🎨 Alist 美化魔改教程和源码分享

📝 前言

Alist 默认界面并不难用，但如果你希望它更有个人风格、更贴近自己的站点气质，就可以通过自定义头部代码、自定义内容代码和一些前端样式进行美化。

这篇文章会围绕“效果展示 → 配置位置 → 可直接使用的代码 → 修改建议”这条路线来整理，让你不只是复制代码，还能大概看懂每一部分在做什么。

[!NOTE]
本文以我的网盘 pan.xmdblog.com 为例演示，适合已经安装好 Alist 的用户继续美化界面。

✨ 一、效果展示

1. 首页效果

首页效果图

2. 列表页效果

列表页效果图

从效果上看，这套方案主要实现了这些变化：

  • 页面背景更有氛围感
  • 主列表与导航区域带有毛玻璃效果
  • 全站统一字体风格
  • 底部增加自定义链接与备案信息
  • 增加一言内容，页面更灵动

🛠️ 二、进入后台配置位置

1. 找到配置入口

登录 Alist 后台后，按下面路径进入：

  1. 点击“管理”
  2. 找到“其他设置”
  3. 找到“自定义头部”与“自定义内容”

后台配置

[!TIP]
一般来说，样式类代码放进“自定义头部”，页面底部补充内容、脚本内容放进“自定义内容”，会更清晰。

🧩 三、这套美化方案包含哪些部分

为了方便理解，你可以把本文的代码拆成 4 个模块：

1. 基础兼容与字体资源

负责：

  • 引入 replaceAll 兼容脚本
  • 引入网页字体

2. 页面视觉样式

负责：

  • 背景图
  • 毛玻璃卡片
  • 顶部栏透明效果
  • 白天/夜间模式适配

3. 底部自定义内容

负责：

  • 邮箱、博客、云盘、后台入口等链接
  • 备案信息展示
  • 页面底部结构补充

4. 动态增强脚本

负责：

  • 延迟插入底部内容
  • 一言内容加载

当你知道这些模块分别是干什么的，后面二次修改就不会太痛苦。

💻 四、自定义头部代码

把下面代码粘贴到 Alist 的“自定义头部”中：

<!-- 引入 polyfill -->
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

<!-- 引入字体 -->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />

<style>
    /* 隐藏底部 */
    .footer {
        display: none !important;
    }

    /* 背景设置 */
    .hope-ui-dark, .hope-ui-light {
        background-image: url('https://www.xmdblog.com/img/backgroud.jpeg') !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);
        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);
        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);
        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);
        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);
        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);
        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);
        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);
        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);
        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;
    }

    dibu {
        border-top: 0px;
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    .App {
        min-height: 85vh;
    }
    .table {
        margin: auto;
    }

    * {
        font-family: LXGW WenKai;
        font-weight: bold;
    }
    body {
        font-family: LXGW WenKai;
    }
</style>

这段代码主要做了什么

可以简单理解为：

  • 先把原始底部隐藏
  • 给页面铺上背景图
  • 给内容卡片和导航区域加透明与模糊效果
  • 调整白天 / 夜间模式下的显示
  • 全站切换到 LXGW WenKai 字体

[!WARNING]
这类基于类名的样式选择器，可能会随着 Alist 前端版本更新而失效，后续升级后如果样式不生效，需要重新检查选择器。

📄 五、自定义内容代码

把下面代码粘贴到“自定义内容”中：

<!-- 延迟加载 -->
<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">
                            "探索科技，启迪技能"
                        </a>
                    </span> "
                </span>
            </div>

            <!-- 底部链接 -->
            <div style="font-size: 13px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="mailto:xiaoming@xmdblog.com" target="_blank">邮箱 |</a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="www.xmdblog.com" target="_blank">博客 |</a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="pan.xmdblog.com" target="_blank">云盘 |</a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="/@manage" target="_blank">管理 |</a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">Alist</a>
                </span>
                <br />
                <br />
                <span class="nav-item">
                    <a class="nav-link" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
                        沪ICP备2024050492号-1
                    </a>
                </span>
            </div>
        </center>
        <br />
    </div>

    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
</div>

<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>

这段代码负责什么

它主要做了 3 件事：

  1. 在底部插入自定义链接
  2. 显示备案信息
  3. 加载一言内容，让页面更生动

🎨 六、你最值得优先改的内容

如果你想把这套代码真正改成“自己的版本”，建议优先改下面这些地方：

1. 背景图片地址

把：

https://www.xmdblog.com/img/backgroud.jpeg

替换成你自己的图片地址。

2. 邮箱、博客、云盘链接

把文中的示例链接改成你自己的：

  • 邮箱地址
  • 博客首页地址
  • 云盘地址
  • 后台入口

3. 备案号

如果你没有备案，可以删除备案部分；如果你有备案，请改成自己的备案号。

4. 一言内容风格

如果你不喜欢随机句子，也可以把一言 API 去掉，换成固定文案。

🛠️ 七、常见问题

1. 样式没生效

优先检查：

  • 代码是否放错位置
  • 是否保存成功
  • 浏览器缓存是否未刷新
  • Alist 版本更新后类名是否发生变化

2. 背景图不显示

优先检查：

  • 图片链接是否能直接访问
  • 是否开启了防盗链
  • 地址是否拼写错误

3. 底部内容不显示

优先检查：

  • 自定义内容代码是否完整复制
  • 页面是否成功找到 .footer
  • 是否有其他脚本冲突

4. 夜间模式显示怪异

说明部分颜色或透明度不够协调，可以单独调整：

  • background-color
  • box-shadow
  • backdrop-filter

📚 总结

这套 Alist 美化方案的重点不是“代码多”，而是思路清晰：

  1. 用头部代码控制整体视觉
  2. 用自定义内容补充底部结构
  3. 用字体、背景、透明效果塑造统一风格
  4. 用一言和链接让页面更完整

如果你只是想快速提升默认界面的观感，这一套已经够用；如果你还想继续深入，下一步可以进一步做：

  • 登录页单独美化
  • 图标与配色统一
  • 移动端细节适配
  • 更精简、更稳的选择器重写

💬 讨论

欢迎在评论区交流：

  1. 你更喜欢简洁风，还是这种毛玻璃氛围风？
  2. 你还想给 Alist 增加哪些视觉效果？
  3. 如果你愿意，我也可以继续帮你把这套代码再精简成更稳定、可维护的版本。