OpenList 美化教程

前言

如你所见，本文是一篇 OpenList 的美化教程。鉴于截至本文完成时，OpenList 还只有 beta 版，由此大概能明白这个项目目前知名度不算太高（这篇文章恐怕也成了第一篇 OpenList 美化教程，事实上，关于它的其他资料也很少）。因此，先介绍一下它的本体。

OpenList 是什么？

OpenList 是在知名开源网盘列表程序 Alist 被出售给商业公司（趋势）后，其部分贡献者另起炉灶而诞生的一个项目。

美化代码

废话不多说，直接上代码！和 Alist 一样，将代码填入“设置/全局”的相应位置。

自定义内容（核心科技）

<!-- 修正部分区域的透明 -->
<style>
    .hope-ui-light,
    .hope-ui-dark {
        --hope-colors-background: transparent;
    }
</style>

<script type="module">
    // v7

    // 提供用来监听代码控制的 url 变化的事件
    (() => {
        const wrapHistoryMethod = (type) => {
            const orig = history[type];
            return function (...args) {
                const rv = orig.apply(this, args);
                const event = new CustomEvent(type, { detail: args });
                window.dispatchEvent(event);
                return rv;
            };
        };
        history.pushState = wrapHistoryMethod('pushState');
        history.replaceState = wrapHistoryMethod('replaceState');
    })();

    class Beautifier {
        /**
            * Beautifier 类用于美化页面背景色
            * 
            * 其提供了3个方法：
            * - observe: 开始监听页面变化并美化背景色
            * - disconnect: 停止监听页面变化
            * - undo: 恢复页面背景色到默认状态
            *
            * 可以通过window.beautifier访问实例对象
            * 
         */
        static ignoredSelectors = [
        '.hope-tooltip', // 提示小标签及其装饰
        '.hope-tooltip__arrow',
        '.hope-checkbox__control',// 复选框
        '.hope-modal__overlay', // 模态框遮罩 
        '.hope-drawer__overlay', // 抽屉遮罩
        '.hope-select__option', // 下拉选项
        '.monaco-editor, .monaco-editor *', // 代码编辑器
        '.art-video-player, .art-video-player *', // 视频播放器
        'button:not(.hope-menu__trigger)', // 除目录外按钮
        'svg' // SVG 图标
    ];

        static getSelector(mainSelector) {
            return `${mainSelector} :not(${Beautifier.ignoredSelectors.join('):not(')})`;
        }

        static lightSelector = Beautifier.getSelector('.hope-ui-light');
        static darkSelector = Beautifier.getSelector('.hope-ui-dark');

        static lightBgColor = 'rgba(255, 255, 255, 0.8)';
        static darkBgColor = 'rgb(32, 36, 37)';

        static specificPrefix = 'rgba(132, 133, 141,';

        constructor() {
            this.observer = null;
        }

        /**
         * @param {'light'|'dark'} theme
         */
        #rewriteStyle(theme) {
            let selector = theme === 'light' ? Beautifier.lightSelector : Beautifier.darkSelector;
            let bgColor = theme === 'light' ? Beautifier.lightBgColor : Beautifier.darkBgColor;

            document.querySelectorAll(selector).forEach(element => {
                const computedStyle = getComputedStyle(element);

                if (computedStyle.backgroundColor !== 'rgba(0, 0, 0, 0)' &&
                    !computedStyle.backgroundColor.startsWith(Beautifier.specificPrefix)) {
                    element.style.backgroundColor = bgColor;

                    element.setAttribute('data-beautified', 'true');
                }
            });
        }

        #beautify() {
            if (!location.pathname.startsWith('/@manage') && !location.pathname.startsWith('/@login')) {
                this.#rewriteStyle('light');
                this.#rewriteStyle('dark');
            }
        }

        observe() {
            this.observer = new MutationObserver(this.#beautify.bind(this));
            this.observer.observe(document.body, {
                childList: true,
                subtree: true
            });

            this.#beautify();
        }

        disconnect() {
            if (this.observer) {
                this.observer.disconnect();
            }
        }

        undo() {
            this.disconnect();

            document.body.querySelectorAll('[data-beautified]').forEach(element => {
                element.style.backgroundColor = '';

                element.removeAttribute('data-beautified');
            });
        }
    }

    const beautifier = new Beautifier();
    window.beautifier = beautifier;

    beautifier.observe();

    // 一个愚蠢到有点无敌的修复机制，不过工作良好
    (() => {
        function fixLogin(pathname) {
            if (pathname.startsWith('/@login')) {
                beautifier.undo();
            }
            else {
                beautifier.disconnect();
                beautifier.observe();
            }
        }

        ['popstate', 'pushState', 'replaceState'].forEach(eventType => {
            addEventListener(eventType, () => {
                fixLogin(location.pathname);
            });
        });
    })();
</script>

自定义头部（想用就用）

<!-- 引入自定义字体 -->
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/lxgw-wenkai-webfont/1.7.0/lxgwwenkai-regular.min.css">

<style>
    /* 移除原生视频控件 */
    video::-webkit-media-controls {
        display: none;
    }

    /* 设置背景图片样式 */
    body {
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
    }

    /* 在此处的url()里修改背景图片地址 */
    /* 加了个深色遮罩，爱护你的眼睛 */
    body.hope-ui-dark {
        background-color: rgb(32, 36, 37);
        background-image: linear-gradient(rgba(32, 36, 37, 0.7), rgba(32, 36, 37, 0.7)), url('https://cdn.mmoe.work/img/miku.webp');
    }

    /* 在此处的url()里修改背景图片地址 */
    body.hope-ui-light {
        background-image: url('https://cdn.mmoe.work/img/miku.webp');
    }

    /* 统一站点公告的样式 */
    .hope-ui-light .hope-c-PJLV-ikJQsXT-css {
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(0) !important;
    }

    .hope-ui-dark .hope-c-PJLV-ikJQsXT-css {
        background: rgb(32, 36, 37) !important;
        backdrop-filter: blur(0) !important;
    }

    /* 自定义字体 */
    * {
        font-family: "LXGW WenKai", sans-serif;
    }
</style>

<!-- 看板娘 -->
<script src="https://l2d.mmoe.work/dist/autoload.js" async></script>

<script
    src="https://s4.zstatic.net/ajax/libs/js-polyfills/0.1.43/polyfill.min.js?features=String.prototype.replaceAll"></script>

通过 CDN 引入

只适用于只打算美化元素背景色，已有其他美化的读者。

<script type="module" src="https://fastly.jsdelivr.net/gh/adogecheems/alist-beautification@latest/src/beautifier.js"></script>

效果

表现完美（我还专门跑去用 OpenList 试了一下）。

需要说明的部分

好吧，我得承认，OpenList 与原版项目 Alist 目前没有任何显而易见的区别，特别是在前端方面。所以以前的 Alist 美化代码，现在其实可以在 OpenList 上正常工作。

那么这篇文章的意义是什么？

为什么我仍打算写这篇文章呢（不是为了凑热度），是因为我提出的这种美化方案（一开始载于《一劳永逸的 Alist 美化方案》）是基于动态 observe 原理的，具有较高的泛用性，在以后 OpenList 的持续更新中会更为省心。

如果你使用过传统的 Alist 美化代码，想必你遇到过版本一更新，美化的样式就出现一些扎眼的不协调部分的问题，这通常是类名发生变化导致的。而我确信这个美化方案即使在多次版本更新之后，仍然能保持良好的工作。

因此，我希望在新项目 OpenList 诞生后，其主流的美化方式是这种新的方案，所以重新写了一篇文章来介绍。

最后的碎碎念

美化代码

自定义头部

<!-- 字体引入 -->
<link rel="preconnect" href="https://fontsapi.zeoseven.com" crossorigin />
<link rel="stylesheet"
    href="https://fontsapi.zeoseven.com/7/main/result.css"
    onerror="this.href='https://fontsapi-storage.zeoseven.com/7/main/result.css'" />

<!-- 图标库 Font6 Pro -->
<link rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css">
<link rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css">

<!-- 不蒜子计数器 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!-- 一言 API -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

自定义内容

<div id="customize" style="display: none;">
    <!-- 底部信息栏 -->
    <footer class="copyright" style="margin-top: 3rem; padding: 1rem 0; text-align: center;">
      <!-- 一言 -->
      <p id="hitokoto">你现在的气质里，藏着你走过的路，读过的书和爱过的人。</p>

      <!-- 友链 -->
      <div style="margin-bottom: 0rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;">
        <a href="https://www.kejizhixing.com/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-home" style="margin-right: 0.4rem;"></i>主页
        </a>
        <a href="https://www.kejizhixing.com/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-edit" style="margin-right: 0.4rem;"></i>博客
        </a>
        <a href="https://github.com/kejizhixing" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fab fa-github" style="margin-right: 0.4rem;"></i>GitHub
        </a>
        <a href="https://www.kejizhixing.com/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-comment-lines" style="margin-right: 0.4rem;"></i>留言
        </a>
        <a href="/@manage" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fa-solid fa-folder-gear" style="margin-right: 0.4rem;"></i>管理
        </a>
      </div>

      <!-- 访问统计 -->
      <div style="margin-bottom: 0rem;">
        本<span style="color: #0d6efd;"><a href="#" style="color: #0d6efd; text-decoration: none;">目录</a></span>访问量：
        <span id="busuanzi_value_page_pv" style="color: #0d6efd;"></span> 次，
        总访问量：
        <span id="busuanzi_value_site_pv" style="color: #0d6efd;"></span> 次，
        总访客数：
        <span id="busuanzi_value_site_uv" style="color: #0d6efd;"></span> 人
      </div>

      <!-- 版权信息 -->
      <div style="margin-bottom: 0rem;">
        <i class="fa-solid fa-copyright"></i>
        2021 -
        <script>document.write((new Date()).getFullYear());</script>
        Powered by <a href="https://www.kejizhixing.com/" target="_blank" style="text-decoration: none; color: inherit;">安小歪</a>
      </div>

      <!-- 运行时间 -->
      <div class="runtime">
        <i class="fa fa-alarm-clock" style="color:#409EFF;"></i>
        <span id="runtime_span"></span>
      </div>
    </footer>
  </div>

  <!-- 样式优化 -->
  <style>
  .hope-ui-light {
      --my-color: rgba(255,255,255,0.4);
      --color-main-custom: #ffffff9e;
  }
  .hope-ui-dark {
      --my-color: rgba(0,0,0,0.4);
      --color-main-custom: #2e2e2e70;
  }

  * {
      font-family: "Zhuque Fangsong (technical preview)";
      letter-spacing: 2px;
  }

  /* 背景里面的url可以替换为自己的图片url地址 */
  body {
      background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url("https://www.loliapi.com/acg") !important; 
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-attachment: fixed !important;
      background-position-x: center !important;
  }

  /*目录模糊背景*/
  .hope-breadcrumb__list.hope-c-cPYwgm.hope-c-PJLV.hope-c-PJLV-iehpHsP-css {
    background-color: var(--color-main-custom) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* 兼容 Safari */
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
}

  /* 列表、Readme 区域透明度 */
  .hope-c-PJLV-igScBhH-css,
  .hope-c-PJLV-ikSuVsl-css,
  .hope-c-PJLV-ieGWMbI-css {
      background-color: #ffffff9e !important;
      backdrop-filter: blur(10px);
  }

  .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
      background-color: var(--hope-colors-neutral3) !important;
  }

  /* 隐藏顶部 header 和底部 footer 背景 */
  .hope-c-PJLV-idaeksS-css,
  .hope-c-PJLV-ikaMhsQ-css {
      background: none !important;
  }

  .footer.hope-stack {
      display: none !important;
  }

  ::selection {
      background: #fbc2eb;
      color: #fff;
  }

  .copyright a,
  .copyright .by {
      text-decoration: none;
  }

  .copyright .by {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
  }

  .copyright a:hover {
      color: pink;
  }

  .copyright .run_item {
      display: flex;
      align-items: center;
      margin: 10px;
  }

  .copyright .link {
      padding: 4px;
      background: #479fff96;
      backdrop-filter: blur(10px);
      border-radius: 0 8px 8px 0;
  }

  .copyright .name {
      padding: 4px;
      backdrop-filter: blur(10px);
      background: var(--color-main-custom);
      border-radius: 8px 0 0 8px;
  }

  .copyright {
      padding: 50px;
  }

  .runtime {
      width: 100%;
      padding: 0px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  </style>

  <!-- 脚本逻辑 -->
  <script>
      // 站点运行时间
      function show_runtime() {
          window.setTimeout("show_runtime()", 1000);
          const X = new Date("11/28/2022 14:00:00");  //这里填写你的建站时间
          const Y = new Date();
          let T = (Y.getTime() - X.getTime());
          const M = 24 * 60 * 60 * 1000;
          let a = T / M;
          let A = Math.floor(a);
          let b = (a - A) * 24;
          let B = Math.floor(b);
          let c = (b - B) * 60;
          let C = Math.floor(c);
          let D = Math.floor((c - C) * 60);
          document.getElementById('runtime_span').innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒";
      }
      show_runtime();

      // 延迟加载逻辑
      let interval = setInterval(() => {
          const bodyContainer = document.querySelector(".body.hope-stack");
          if (bodyContainer) {
              bodyContainer.appendChild(document.getElementById("customize"));
              document.getElementById("customize").style.display = "block";
              clearInterval(interval);
          }
      }, 200);

      // 鼠标点击爱心特效
      !function (e, t, a) {
          function r() {
              for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
              requestAnimationFrame(r)
          }

          function n() {
              var t = "function" == typeof e.onclick && e.onclick;
              e.onclick = function (e) {
                  t && t(), o(e)
              }
          }

          function o(e) {
              var a = t.createElement("div");
              a.className = "heart", s.push({
                  el: a,
                  x: e.clientX - 5,
                  y: e.clientY - 5,
                  scale: 1,
                  alpha: 1,
                  color: c()
              }), t.body.appendChild(a)
          }

          function i(e) {
              var a = t.createElement("style");
              a.type = "text/css";
              try {
                  a.appendChild(t.createTextNode(e))
              } catch (t) {
                  a.styleSheet.cssText = e
              }
              document.head.appendChild(a)
          }

          function c() {
              return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
          }

          var s = [];
          e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
              setTimeout(e, 1e3 / 60)
          };

          i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
  </script>

替换自定义头部中的所有内容

<!-- Alist V3建议添加的，已经默认添加了，如果你的没有建议加上 -->
<script src="https://polyfill.io/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="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script＞

<!-- 评论系统使用的js -->
<link rel="stylesheet" href="https://npm.onmicrosoft.cn/@waline/client/dist/waline.css" />
<script src="https://npm.onmicrosoft.cn/@waline/client/dist/waline.js"></script＞

<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css"
    media='all'>
<link href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css" rel="stylesheet">

<!-- 音乐播放器所用的文件 -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script＞
<!-- require MetingJS -->
<script src="https://npm.elemecdn.com/meting@2.0.1/dist/Meting.min.js"></script＞

<!-- 站点运行时间 -->
<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("11/28/2022 14:00:00");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "本站已运行 " + A +  "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script＞

<style>
    /* 去除通知栏 右上角 X */
    .notify-render .hope-close-button {
        display: none;
    }

    /* 白天背景图 */
    .hope-ui-light {
        background-image: url(https://xxxx.png) !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /* 夜间背景图 */
    .hope-ui-dark {
        background-image: url(https://xxxx.png) !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /* 主列表夜间模式透明，50%这数值是控制透明度大小的 */
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /* readme夜间模式透明，50%这数值是控制透明度大小的 */
    .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /* 主列表透明 */
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* readme透明 */
    .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* 顶部右上角切换按钮透明 */
    .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* 右下角侧边栏按钮透明 */
    .hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(255, 255, 255, 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;
    }

    /* 去掉底部 */
    .footer {
        display: none !important;
    }

    /* 全局字体 */
    * {
        font-family: LXGW WenKai
    }

    * {
        font-weight: bold
    }

    body {
        font-family: LXGW WenKai;
    }
/*以下为waline评论系统专用*/
/*适配大小契合度*/
.comments {
    width: min(96%, 940px);
    flex-direction: column;
    row-gap: var(--hope-space-2);
    border-radius: var(--hope-radii-xl);
    padding: var(--hope-space-2);
    box-shadow: var(--hope-shadows-lg);
}
/*评论区 - 白天模式透明度*/
.hope-ui-light .comments {
    background-color: rgba(255, 255, 255, 0.8)!important;
}
/*评论区 - 夜间模式透明度*/
.hope-ui-dark .comments {
    background-color:rgb(0 0 0 / 80%)!important;
}
/* waline评论系统右侧的gif */
.wl-editor, .wl-input {
    background-size: contain!important;
}
#wl-edit {
    background: url(https://hexo.anxy.top/img/waline-bg.gif) 100% 100% no-repeat;
}

/*Waline表情自适应*/
.wl-emoji-popup{
    width: 100%;
}

/*渐变背景CSS*/
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}

.hope-c-PJLV-iiHckfM-css{
    min-height: 20vh!important;
}

/*音乐播放器进一步进行隐藏*/
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0!important;
}
</style>

<!-- 看板娘 -自定义大小，隐藏对话框和对话框高度 -->
<style type="text/css">
    #waifu #live2d {
        height: 350px !important;
        width: 350px !important;
    }

    #waifu-tips {
        top: -60px;
        /*display:none !important;隐藏对话框*/
    }
</style>

<!-- 看板娘加载指定模型 -->
<script＞
    localStorage.setItem('modelId', '7');
    localStorage.setItem('modelTexturesId', '3');
</script＞

<!-- 看板娘 -->
<script src="https://xxxxxx.js"></script＞

替换自定义内容中的所有内容

<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<div id="customize" style="display: none;">
    <div>
        <!--音乐播放器-->
        <meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="QQ音乐或者网易云的链接"></meting-js>

        <!--评论模块还有下面的script也是-->
        <center>
            <div class="comments" id="waline"></div>
        </center>
        <script＞
            Waline.init({
                el: '#waline',
                serverURL: '',
                search: false,
                meta: ["nick", "mail", "link"],
                requiredMeta: ["nick", "mail"],
                locale:{
                    placeholder: ''
                },
                emoji: []
            });
        </script＞

        <br />
        <center class="dibu">
            <div style=" line-height: 30px;font-size: 13pt;font-weight: bold;">
                <span style="color: rgb(255, 255, 255); font-weight: bold;" id="hitokoto">
                    <a href="#" id="hitokoto_text">
                        "没有请求到啦~~"
                    </a>
                </span>
                <p style="margin-left: 10rem;font-size: 8pt;">
                </p>
            </div>

            <div style="font-size: 16px; font-weight: bold;">
                <!-- 友链信息 -->
                <span class="nav-item">
                    <a class="nav-link" href="https://www.kejizhixing.com/" target="_blank">
                        <i class="fas fa-home" style="color:#409EFF" aria-hidden="true">
                        </i>
                        主页 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://www.kejizhixing.com//" target="_blank">
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
                        </i>
                        博客 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://github.com/kejizhixing" target="_blank">
                        <i class="fab fa-github" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        GitHub 
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://www.kejizhixing.com/" target="_blank">
                        <i class="fas fa-comment-lines" style="color:#409EFF;" aria-hidden="true">
                        </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;" aria-hidden="true">
                        </i>
                        管理
                    </a>
                </span>
                <br />
                <!-- 版权信息 -->
                <span class="nav-item">
                    <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
                    </i>
                    2021-<script type="text/javascript">document.write((new Date()).getFullYear());</script＞ Powered by
                    <a class="nav-link" href="https://www.kejizhixing.com/" target="_blank">
                        <i style="color:#409EFF;" aria-hidden="true">
                            科技之星
                        </i>
                    </a>
                </span>
                <br />
                <!--添加一个访问量-->
                <span>
                本"
                    <span style="color: rgb(13, 109, 252); font-weight: bold;"><a href="#">目录</a>
                    </span>
                "访问量 
                    <span id="busuanzi_value_page_pv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 次 
                本站总访问量 
                    <span id="busuanzi_value_site_pv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 次 
                本站总访客数 
                    <span id="busuanzi_value_site_uv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 人
                <br />
                <!-- 站点运行时间 -->
                <i class="fa fa-alarm-clock" style="color:#409EFF" aria-hidden="true">
                </i>
                <span class="nav-item" id="runtime_span" style="color: rgb(255, 255, 255); font-weight: bold;">
                </span>
            </div>

        </center>
        <br />
        <br />
    </div>

    <!--一言API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script＞
    <!-- 延迟加载配套使用JS -->
<script＞
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script＞

<!-- 网页鼠标点击特效 - 爱心 -->
<script type="text/javascript">
    ! function (e, t, a) {
        function r() {
            for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }
        function n() {
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function (e) {
                t && t(), o(e)
            }
        }

        function o(e) {
            var a = t.createElement("div");
            a.className = "heart", s.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: c()
            }), t.body.appendChild(a)
        }

        function i(e) {
            var a = t.createElement("style");
            a.type = "text/css";
            try {
                a.appendChild(t.createTextNode(e))
            } catch (t) {
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                .random()) + ")"
        }
        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
            .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                setTimeout(e, 1e3 / 60)
            }, i(
                ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
            ), n(), r()
    }(window, document);
</script＞

评论的修改折叠栏的效果

<style>
  .toggle-comments {
    color: #24292e;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #comment-section {
    display: none;
    margin-top: 10px;
  }
</style>

<div id="comments">
  <button class="toggle-comments" onclick="toggleComments()">显示评论</button>
  <div id="comment-section">
    <!--评论模块还有下面的script也是-->
        <center>
            <div class="comments" id="waline"></div>
        </center>
        <script＞
            Waline.init({
                el: '#waline',
                serverURL: '',
                search: false,
                meta: ["nick", "mail", "link"],
                requiredMeta: ["nick", "mail"],
                locale:{
                    placeholder: ''
                },
                emoji: []
            });
        </script＞ -->
  </div>
</div>

<script＞
  function toggleComments() {
    var commentSection = document.getElementById("comment-section");
    var toggleButton = document.querySelector(".toggle-comments");

    if (commentSection.style.display === "none") {
      commentSection.style.display = "block";
      toggleButton.innerHTML = "隐藏评论";
    } else {
      commentSection.style.display = "none";
      toggleButton.innerHTML = "显示评论";
    }
  }
</script＞

还需要添加以下两个CSS

<!-- 评论折叠居中css -->
<style>
  .toggle-comments {
    color: #24292e;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }

  #comment-section {
    display: none;
    margin-top: 10px;
  }
</style>

<!-- 评论按钮线条消失术 -->
<style>
   button:focus {
    outline: none !important;
}
</style>

推荐在原创作者存储库：科技之星获得后续代码优化，如果可以的话，就请点个 star 支持一下吧！

未经允许不得转载作者: GRUD，转载或复制请以超链接形式并注明出处科技之星网站。
原文地址：《 openlist美化教程指南动态美化方案》发布于 2025-12-25

扫描二维码，在手机上阅读

本网站内提供的所有资源均合法的来源于互联网整理收集，免费分享，不构成任何商业目的资源仅供大家交流和学习

（禁止商用或其它牟利行为）版权归原作者本人所有，您必须在下载后24小时内删除，感谢您的理解与合作