OpenList与AList通用美化教程：一键磨砂UI代码

奇营
奇营
10阅读

OpenList 是知名网盘目录程序 AList 的一个弹性、长期治理且由社区驱动的分支版本。由于两者的底层逻辑高度一致，这篇美化教程完美兼容 OpenList 与 AList V3版本

原生界面虽然简洁，但对于追求个性化的站长来说，往往过于单调。通过本教程，你可以轻松实现以下效果：

  1. 全局字体优化：引入更适合阅读的“霞鹜文楷”。
  2. 动态交互：添加看板娘、底部音乐播放器。
  3. 功能增强：集成 Valine 评论系统与不蒜子访问统计。
  4. 视觉升级：实现日夜间模式自动切换背景，以及UI界面的磨砂透明感。

美化教程分为两部分：

  1. 第一部分：修改自定义头部美化代码
  2. 第二部分：修改自定义内容美化代码

本教程基于已运行的网盘环境。如果你尚未搭建，请先参考以下教程完成基础配置：

OpenList 用户请看：OpenList 从零搭建到域名部署完整教程

必读内容
在进行任何代码修改或美化之前，备份是绝对的第一要务。
请务必导出当前的配置，或者备份数据库。

第一部分：自定义头部美化代码

OpenList/AList美化效果预览

以下效果图仅供参考，所有背景图、透明度和组件均可根据代码注释进行自定义。
OpenList与AList通用美化教程：一键磨砂UI代码 - 图片1

美化实操

准备工作

  1. 登录 OpenList 或 AList 管理后台，进入 设置 -> 全局 -> 自定义头部。
  2. 复制下方全局自定义头部代码
<!-- Alist 兼容脚本 -->
<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" />

<!-- 访问统计 -->
<script async src="https://busuanzi.9420.ltd/js"></script>

<!-- 图标库 -->
<link type="text/css" rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.3.0/css/fontawesome.min.css" media="all" />
<link href="https://npm.elemecdn.com/font6pro@6.3.0/css/all.min.css" rel="stylesheet" />

<style>
/* 隐藏通知栏关闭按钮 */
.notify-render .hope-close-button {
  display: none;
}
/* 隐藏原生底部 */
.footer {
  display: none !important;
}

/* 白天背景 */
.hope-ui-light {
  background-image: url("https://pic.rmb.bdstatic.com/bjh/7569b014a1abafd5481298763300ae1d.png") !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-x: center;
}
/* 夜间背景 */
.hope-ui-dark {
  background-image: url("https://pic.rmb.bdstatic.com/bjh/ebe942a9de49856f389c65f25a338335.png") !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-x: center;
}

/* 主列表白天透明 */
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
/* 主列表夜间透明 */
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
  background-color: rgb(0 0 0 / 50%) !important;
}

/* readme 白天透明 */
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
/* readme 夜间透明 */
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
  background-color: rgb(0 0 0 / 50%) !important;
}

/* 右上角按钮白天透明 */
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
/* 右上角按钮夜间透明 */
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
  background-color: rgb(0 0 0 / 50%) !important;
}

/* 右下角侧边栏白天透明 */
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
/* 右下角侧边栏夜间透明 */
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
  background-color: rgb(0 0 0 / 50%) !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;
}

/* 左侧目录白天透明 */
.hope-ui-light .hope-c-PJLV-ieGWMbI-css {
  background: rgba(255, 255, 255, 0.5) !important;
}
/* 左侧目录夜间透明 */
.hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
  background-color: rgb(0 0 0 / 50%) !important;
}

/* 返回顶部白天透明 */
.hope-c-PJLV-ihVEsOa-css {
  background: rgba(255, 255, 255, 0.5) !important;
}
/* 返回顶部夜间透明 */
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
  background-color: rgb(0 0 0 / 50%) !important;
}

/* 顶部透明 */
#root > .header {
  background: rgba(255, 255, 255, 0);
}
/* 导航条白天透明圆角 */
.hope-ui-light .body > .nav {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: var(--hope-radii-xl);
}
/* 导航条夜间透明圆角 */
.hope-ui-dark .body > .nav {
  background-color: rgb(0 0 0 / 50%);
  border-radius: var(--hope-radii-xl);
}
/* 隐藏导航遮罩 */
.body > .nav::after {
  display: none;
}

/* 自定义底部定位 */
.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;
}

/* 渐变背景样式（备用） */
#canvas-basic {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -999;
}
</style>

第二部分：美化自定义内容代码

  1. 登录 OpenList 或 AList 管理后台，进入 设置 -> 全局 -> 自定义内容。
  2. 复制下方全局自定义内容代码
<!-- 延迟加载自定义内容 -->
<div id="customize" style="display: none;">
  <div>
    <!-- 自定义底部 -->
    <center class="dibu">
      <div style="line-height:20px;font-size:9pt;font-weight:bold;">
        <span>
          "
          <span style="color:rgb(13,109,252);font-weight:bold;" id="hitokoto">
            <a href="#" id="hitokoto_text">
              人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人.
            </a>
          </span> "
        </span>
        <p style="margin-left:10rem;font-size:8pt;">
          <small>—— Anwen's Cloud</small>
        </p>
      </div>

      <div style="font-size:13px;font-weight:bold;">
        <span class="nav-item">
          <a class="nav-link" href="http://qm.qq.com/cgi-bin/qm/qr?k=cwxBjxmLm2OJxmN3m7qRb2t303r49VFq" target="_blank">
            <i class="fab fa-qq" style="color:#409EFF"></i> QQ |
          </a>
        </span>

        <span class="nav-item">
          <a class="nav-link" href="http://blog.qyli.cn/" target="_blank">
            <i class="fas fa-edit" style="color:#409EFF"></i> 博客 |
          </a>
        </span>

        <span class="nav-item">
          <a class="nav-link" href="http://pan.qyli.cn/" target="_blank">
            <i class="fa fa-cloud-download" style="color:#409EFF"></i> 云盘 |
          </a>
        </span>

        <span class="nav-item">
          <a class="nav-link" href="/@manage" target="_blank">
            <i class="fa-solid fa-folder-gear" style="color:#409EFF"></i> 管理
          </a>
        </span>
        <br />

        <span>
          本"<span style="color:rgb(13,109,252);font-weight:bold;"><a href="#">目录</a></span>"访问量
          <span id="busuanzi_page_pv" style="color:rgb(13,109,252);font-weight:bold;"></span> 次
          本站总访问量 <span id="busuanzi_site_pv" style="color:rgb(13,109,252);font-weight:bold;"></span> 次
          本站总访客数 <span id="busuanzi_site_uv" style="color:rgb(13,109,252);font-weight:bold;"></span> 人
        </span>
      </div>
    </center>
    <br><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>

常见问题 (FAQ)

Q: 背景图片加载慢怎么办？
A: 代码中的背景图使用的是公共图床，建议将图片下载后上传到你自己的 OpenList 目录中，并将 URL 替换为你的站点链接，例如 https://你的域名/d/图片/bg.png。

Q: 音乐播放器不显示？
A: 请确保你已经在 Body 代码中正确配置了 标签，且填写的歌单 ID 有效（建议使用网易云音乐歌单）。
**
Q: OpenList 和 AList 的 CSS 类名通用吗？**
A: OpenList 是基于 AList 开发的，绝大多数核心类名（如 .hope-ui-light, .obj-box）是通用的。如果遇到版本更新导致样式失效，请检查浏览器控制台的元素类名是否发生变化。

觉得内容不错？我要

打赏杯咖啡或蜜雪冰城吧
微信扫一扫
微信赞赏码
版权声明
本文作者：奇营
本文链接：https://blog.qyli.cn/archives/80/
转载需注明文章出处，若本文内容有侵犯到您合法权益，请联系站长删除
评论 暂无评论
暂无评论，快来抢沙发吧~