Alist/OpenList 美化教程-适用于各版本

  • 文章作者
  • 文章发布日期2026年4月4日 22:17
  • 热度22
  • 本文共计6361字
  • 预计阅读32分钟

先看效果🤪

https://pan.iolook.com

打开后台网站😉 设置-全局-自定义头部-自定义内容

自定义头部代码如下🤫：

<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" />
​
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
​
<style>
.hope-ui-light {
 &nbsp;  background-image: url("自己的图片链接") !important;
 &nbsp;  background-repeat:no-repeat;
 &nbsp;  background-size:cover;
 &nbsp;  background-attachment:fixed;
 &nbsp;  background-position-x:center;
}
​
/*网盘列表*/
.obj-box {
 &nbsp; background-color: rgba(255, 255, 255, 0.4)!important;
}
/*Logo图片*/
.header-left img {
    filter: drop-shadow(0px 0px 20px rgb(9, 187, 189));
    filter: brightness(1.5);
}
​
/*头部、面包屑、搜索*/
.header,.hope-breadcrumb,.header-right {
    background-color: unset!important;
    background: unset !important;
    color:#ffffff!important;
}
​
/* 去除右上角状态切换按钮 */
.header-right button {
    display: none!important;
}
/*只保留搜索按钮，搜索按钮背景透明*/
.header-right .hope-stack {
    width:36px!important;
    background: unset !important;
}
kbd {
    display: none!important;
}
/*顶部右上角切换按钮颜色*/
*[aria-label="switch layout"]{
    color:#ffffff!important;
}
/*右下角按钮颜色*/
.toolbar-toggle {
    color:#ffffff!important;
}
​
/*顶部右上角切换按钮透明*/
.hope-button,.hope-icon-button {
 &nbsp; background-color: rgba(255, 255, 255, 0.4)!important;
}
​
/* 去除通知栏 右上角 X 
*[aria-label="Close"] {
 &nbsp; display: none!important;
}
*/
​
/*通知字体颜色*/
.markdown-body, .markdown-body a {
    color:#000000!important;
    text-shadow: 2px 2px 5px #ffffff;
}
​
/*代码块透明*/
.hope-ui-light pre {
 &nbsp; background-color: rgba(255, 255, 255, 0.4)!important;
}
/*网盘列表标题*/
.title .hope-text {
    color:#ffffff!important;
    text-shadow: 0px 0px 10px #00c2cb, 0px 0px 20px #fff;
}
/*网盘列表项目*/
.list-item {
    color:#ffffff!important;
    text-shadow: 2px 2px 5px #000000;
}
/*网盘列表项目 - 图标*/
.list-item svg {
    color:#ffe0b5!important;
    text-shadow: 2px 2px 5px #000000;
}
​
/*底部CSS开始*/
.dibu {
 &nbsp; border-top: 0px;
 &nbsp; position: absolute;
 &nbsp; width: 100%;
 &nbsp; margin: 0px;
 &nbsp; padding: 0px;
 &nbsp; color:#ffffff!important;
 &nbsp; text-shadow: 2px 2px 5px #000000;
 &nbsp; line-height: 30px;
 &nbsp; font-weight: bold;
}
.nav-yiyan {
    font-size: 16px;
    margin-bottom:10px;
}
.nav-item {
    font-size: 14px;
}
.nav-time {
    font-size: 12px;
}
/*底部CSS结束*/
​
/*去掉底部*/
.footer {
 &nbsp; display: none!important;
}
​
/*全局字体*/
* {
 &nbsp; font-family:LXGW WenKai;
}
</style>
​

自定义内容代码如下😮‍💨：

<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<div id="customize" style="display: none;">
 &nbsp;  <div>
 &nbsp; &nbsp; &nbsp;  <center class="dibu">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <div class="nav-yiyan">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <span id="hitokoto">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="#" id="hitokoto_text">"人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."</a>
  </span>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <p style="margin-left: 10rem;font-size: 12px;"> —— 堆叶｜数据仓库</p>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </div>
​
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <div style=" line-height: 20px;font-size: 14px;font-weight: bold;">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <span class="nav-item">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=450466196" target="_blank">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <i class="fa fa-smile-o"></i> QQ　|　
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </a>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </span>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <!--作者-->
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <span class="nav-item">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="https://github.com/Xhofe/alist" target="_blank">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <i class="fa fa-copyright"></i> Alist　|　
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </a>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </span>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <!--邮箱-->
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <span class="nav-item">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="mailto:36521@88.com" target="_blank">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <i class="fa fa-envelope"></i> 邮箱　|　
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </a>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </span>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <!--留言-->
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <span class="nav-item">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="https://www.duiye.cn" target="_blank">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <i class="fa fa-check-square"></i> 博客　|　
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </a>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </span>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <!--后台入口-->
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <span class="nav-item">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="/@manage" target="_blank">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <i class="fa fa-toggle-on"></i> 管理
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </a>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  </div> &nbsp; 
​
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <div class="nav-time"><span id="runtime_span"></span></div> &nbsp;
 &nbsp; &nbsp; &nbsp;  </center>
 &nbsp;  </div>
​
<!--一言API-->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
​
<style>
body {
 &nbsp;  background-color: var(--hope-colors-background);
 &nbsp;  font-family: inherit;
 &nbsp;  line-height: inherit;
 &nbsp;  -webkit-font-smoothing: antialiased;
}
</style>
<!--延迟加载范围到这里结束-->
</div>
​
<!--延迟加载配套使用JS-->
<script>
 &nbsp;  let interval = setInterval(() => {
 &nbsp; &nbsp; &nbsp;  if (document.querySelector(".footer")) {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  document.querySelector("#customize").style.display = "";
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  clearInterval(interval);
 &nbsp; &nbsp; &nbsp;  }
 &nbsp;  }, 200);
</script>
​
<script type="text/javascript">
 &nbsp;  function show_runtime() {
 &nbsp; &nbsp; &nbsp;  window.setTimeout("show_runtime()", 1000);
 &nbsp; &nbsp; &nbsp;  X = new Date("3/30/2020 12:12:12"); /*开始时间*/
 &nbsp; &nbsp; &nbsp;  Y = new Date();
 &nbsp; &nbsp; &nbsp;  T = (Y.getTime() - X.getTime());
 &nbsp; &nbsp; &nbsp;  M = 24 * 60 * 60 * 1000;
 &nbsp; &nbsp; &nbsp;  a = T / M;
 &nbsp; &nbsp; &nbsp;  A = Math.floor(a);
 &nbsp; &nbsp; &nbsp;  b = (a - A) * 24;
 &nbsp; &nbsp; &nbsp;  B = Math.floor(b);
 &nbsp; &nbsp; &nbsp;  c = (b - B) * 60;
 &nbsp; &nbsp; &nbsp;  C = Math.floor((b - B) * 60);
 &nbsp; &nbsp; &nbsp;  D = Math.floor((c - C) * 60);
 &nbsp; &nbsp; &nbsp;  runtime_span.innerHTML = "本站已运行 " + A + " 天 " + B + " 小时 " + C + " 分 " + D + " 秒 "
 &nbsp;  }
 &nbsp;  show_runtime();
</script>