📝前言
Alist 是一个支持多存储的文件列表程序，但默认界面相对简单。本文将介绍如何对 Alist 进行美化和功能增强，打造一个美观实用的网盘系统。
[!NOTE]
本文以我的网盘为例进行演示
💡效果展示
1.首页效果
💡使用教程
1.进入后台配置
按上图步骤找到配置框:
1.点击”管理”
2.点击”设置”
3.点击”全局”
4.找到”自定义头部”&”自定义全局”
2.添加自定义头部代码
<style>
/* 隐藏底部 */
.footer {
display: none !important;
}
/* 背景设置 */
.hope-ui-dark, .hope-ui-light {
background-image: url('https://tc-new.z.wiki/autoupload/f/3BcOsHl9Z5xRontKljE30Jtxs9f0y17xrRZ-FVXOQOiyl5f0KlZfm6UsKj-HyTuv/20250817/DojH/1597X970/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_2025-08-04_143618_710.png/webp') !important;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
/*主列表白天模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background-color: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*主列表夜间模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background-color: rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*readme白天模式透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background-color: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*readme夜间模式透明*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background-color: rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*顶部*/
#root > .header {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background: rgba(255, 255, 255, 0); /* 透明背景色 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*导航条*/
/*白天模式*/
.hope-ui-light .body > .nav {
background-color: rgba(255, 255, 255, 0.3);
border-radius: var(--hope-radii-xl);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*夜间模式*/
.hope-ui-dark .body > .nav {
background-color: rgba(0, 0, 0, 0.3);
border-radius: var(--hope-radii-xl);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*隐藏导航条遮罩*/
.body > .nav::after {
display: none;
}
/*右上视图切换菜单*/
/*白天模式*/
.hope-ui-light .hope-c-PJLV-iSMXDf-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background: rgba(255, 255, 255, 0.3); /* 透明背景色 */
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*夜间模式*/
.hope-ui-dark .hope-c-PJLV-iSMXDf-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background: rgba(0, 0, 0, 0.3); /* 透明背景色 */
border-radius: var(--hope-radii-xl);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background-color: rgba(255, 255, 255, 0.3) !important;
}
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
-webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
background-color: rgba(0, 0, 0, 0.5) !important;
}
/*白天模式代码块透明*/
.hope-ui-light pre {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/*夜间模式代码块透明*/
.hope-ui-dark pre {
background-color: rgba(255, 255, 255, 0) !important;
}
/*底部CSS，.App .table这三个一起的*/
dibu {
border-top: 0px;
position: absolute;
bottom: 0;
width: 100%;
margin: 0px;
padding: 0px;
}
.App {
min-height: 85vh;
}
.table {
margin: auto;
}
</style>3.添加自定义内容代码
<!-- 延迟加载 -->
<div id="customize" style="display: none;">
<div>
<br />
<center class="dibu">
<div style=" line-height: 20px;font-size: 9pt;font-weight: bold;">
<span>
"
<span style="color: rgb(154, 216, 166); font-weight: bold;" id="hitokoto">
<a href="#" id="hitokoto_text">
"SB"
</a>
</span> "
</span>
</div>
<!--后台入口-->
<span class="nav-item">
<a class="nav-link" href="/@manage" target="_blank">
<i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
</i>
—管理—
</a>
</span>
<br />
<br />
<!--添加备案信息-->
<span class="nav-item">
<a class="nav-link" href="" target="_blank">
<i class="fa-solid fa-shield-check" style="color:#409EFF;" aria-hidden="true">
</i>
</a>
</span>
</div>
</center>
<br />
</div>
<!--一言API-->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!-- 延迟加载JS -->
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
</script>📚总结
1.实现了毛玻璃效果,背景
2.一言展示
3.整体界面美化
[!TIP]
可以根据自己的需求修改背景图片、字体、链接等内容！
