alist两个美化方案

Posted 2024-12-29 by zjccc; tagged with alist

第一种:

alist美化页面1.png

自定义头部:

<link rel="stylesheet" href="https://cdn.staticfile.net/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaigbscreen.min.css">
<style>
.hope-ui-light {
  --my-color: rgba(255,255,255,0.7);
  --color-main-custom: #ffffff;
}
.hope-ui-dark {
  --my-color: rgba(0,0,0,0.7);
  --color-main-custom: #000000;

{
font-family: LXGW WenKai Screen;
}
/ 背景 /
body {
background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url(https://api.qjqq.cn/api/Img?sort=belle) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
background-position-x: center !important;
}
.hope-c-PJLV-igScBhH-css,
.hope-c-PJLV-ikSuVsl-css {
background-color: #ffffff9e !important;
backdrop-filter: blur(10px);
}
.hope-c-PJLV-idaeksS-css,
.hope-c-PJLV-ikaMhsQ-css {
background: none !important;
}
.footer {
display: none !important;
}

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

  * {
      letter-spacing: 2px;
  }

  .hope-ui-dark .markdown-body a {
      color: #fff !important;
  }

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

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

  .copyright a {
      display: flex;
      justify-content: center;
      margin: 0 10px;
      position: relative;
      transition: .5s;
  }

  .copyright .xhx {
      background: pink;
      height: 3px;
      border-radius: 10px;
      width: 0;
      position: absolute;
      bottom: -3px;
      transition: .5s;
  }

  .copyright a:hover {
      color: pink;
  }

  .copyright a:hover .xhx {
      width: 100%;
  }

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

  .copyright .link {
      padding: 4px;
      background: rgba(255, 133, 153);
      border-radius: 0 8px 8px 0;
  }

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

  .copyright {
      padding: 50px;
  }

  .runtime {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .about,
  .state {
      width: min(99%, 980px);
      text-align: center;
      padding-inline: 2%;
  }

  .state {
      margin-top: 20px;
  }

自定义内容:

<!-- 延迟加载 -->
<!-- 如果要写自定义内容建议都加到这个延迟加载的范围内 -->
<br />
<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="/@login" target="_blank">
              登录页面 |
          </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>
      <!-- 版权 -->
      <span class="nav-item">
          <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
              <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true"></i>
              Alist
          </a>
      </span>
  </div>
</center>
 
<!-- 免责声明 -->
<div style="font-size: 12px; color: #666; margin-top: 20px;">
  <p>免责声明：本站为个人网盘，网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的。</p>
</div>
 
<br />
<br />
</div>
 
<!-- 延迟加载范围到这里结束 -->
</div>
 
<!-- 延迟加载配套使用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>

第二种:

alist美化页面2.png

自定义头部:

<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
 
<!--引入字体，全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" />
 
<!--评论系统使用的js-->
<script src='https://unpkg.com/valine/dist/Valine.min.js'></script>
 
<style>
/* 去除通知栏 右上角 X */
.notify-render .hope-close-button{
  display: none;
}
 
/*渐变背景CSS*/
#canvas-basic {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -999;
  backdrop-filter: blur(10px)!important;
}
 
 
/*顶部*/
#root > .header {
  background: rgba(255, 255, 255, 0);
}
/*导航条*/
/*白天模式*/
.hope-ui-light .body > .nav {
  background-color: rgba(255, 255, 255, 0.2);
  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;
}
 
 
/*主列表夜间模式透明，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.2) !important;
backdrop-filter: blur(10px)!important;
 
}
/*readme透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px)!important;
}
/*顶部右上角切换按钮透明*/
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px)!important;
}
/*右下角侧边栏按钮透明*/
.hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px)!important;
}
 
/*白天模式代码块透明*/
.hope-ui-light pre{
  background-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px)!important;
}
/*夜间模式代码块透明*/
.hope-ui-dark pre {
  background-color: rgba(255, 255, 255, 0) !important;
  backdrop-filter: blur(10px)!important;
}
 
/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
 background: rgba(255,255,255,0.2)!important;
 backdrop-filter: blur(10px)!important;
}
 
/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
 background: rgba(255,255,255,0.2)!important;
 backdrop-filter: blur(10px)!important;
}
 
/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
 background: rgba(255,255,255,0.2)!important;
 backdrop-filter: blur(10px)!important;
}
 
/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
  background: rgb(0 0 0 / 10%)!important;
  backdrop-filter: blur(10px)!important;
}
 
/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
  background: rgb(0 0 0 / 10%)!important;
  backdrop-filter: blur(10px)!important;
}
 
/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
  background: rgb(0 0 0 / 10%)!important;
  backdrop-filter: blur(10px)!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;}
</style>

自定义内容:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     .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;
      }
  </style>
</head>
 
<body>
  <!-- 延迟加载 -->
  <!-- 如果要写自定义内容建议都加到这个延迟加载的范围内 -->
  <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(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;">
                  <!-- 此处已删除QQ相关代码 -->
                  <span class="nav-item">
                      <a class="nav-link" href="/@login" target="_blank">
                          <i class="fa-duotone fa-sign-in" 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>
                  <span class="nav-item">
                      <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
                          <i class="fa-solid fa-copyright" style="color:#409EFF" aria-hidden="true">
                          </i>
                          Alist
                      </a>
                  </span>
              </div>
          </center>
          <br />
          <br />
      </div>
 
 
      <!--一言API-->
      <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
  </div>
  <!--延迟加载配套使用JS-->
  <script>
      const target = document.querySelector('.footer');
      const observer = new MutationObserver((mutationsList, observer) => {
          for (const mutation of mutationsList) {
              if (mutation.type === 'childList' && document.querySelector('.footer')) {
                  document.getElementById('customize').style.display = '';
                  observer.disconnect();
              }
          }
      });
      observer.observe(document.body, { childList: true, subtree: true });
  </script>
  <!-- 网页鼠标点击特效（爱心） -->
  <script type="text/javascript">
     !function (e, t, a) {
          var MAX_HEARTS = 50; // 限制最大爱心数量
          var hearts = [];
 
          function createHeart(e) {
              if (hearts.length >= MAX_HEARTS) return;
              var a = t.createElement("div");
              a.className = "heart";
              hearts.push({
                  el: a,
                  x: e.clientX - 5,
                  y: e.clientY - 5,
                  scale: 1,
                  alpha: 1,
                  color: getRandomColor()
              });
              t.body.appendChild(a);
          }
 
          function getRandomColor() {
              return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")";
          }
 
          function updateHearts() {
              for (var i = 0; i < hearts.length; i++) {
                  var heart = hearts[i];
                  if (heart.alpha <= 0) {
                      t.body.removeChild(heart.el);
                      hearts.splice(i, 1);
                      i--;
                  } else {
                      heart.y--;
                      heart.scale +=.004;
                      heart.alpha -=.013;
                      heart.el.style.cssText = "left:" + heart.x + "px;top:" + heart.y + "px;opacity:" + heart.alpha + ";transform:scale(" + heart.scale + "," + heart.scale + ") rotate(45deg);background:" + heart.color + ";z-index:99999";
                  }
              }
              requestAnimationFrame(updateHearts);
          }
 
          function r() {
              for (var e = 0; e < hearts.length; e++) hearts[e].alpha <= 0? (t.body.removeChild(hearts[e].el), hearts.splice(e, 1)) : (hearts[e].y--, hearts[e].scale +=.004, hearts[e].alpha -=.013, hearts[e].el.style.cssText = "left:" + hearts[e].x + "px;top:" + hearts[e].y + "px;opacity:" + hearts[e].alpha + ";transform:scale(" + hearts[e].scale + "," + hearts[e].scale + ") rotate(45deg);background:" + hearts[e].color + ";z-index:99999");
              requestAnimationFrame(r)
          }
 
          function n() {
              var t = "function" == typeof e.onclick && e.onclick;
              e.onclick = function (e) {
                  t && t(), createHeart(e)
              }
          }
 
          e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
              setTimeout(e, 1e3 / 60)
          };
          n();
          r();
          document.addEventListener('click', createHeart);
      }(window, document);
  </script>
 
  <!-- 渐变背景初始化,如果要使用渐变背景把下面的那一行注释去掉即可-->
  <!-- 下面的几行都是渐变的一套,自定义头部内还有一个关联的自定义CSS -->
  <canvas id="canvas-basic"></canvas>
  <script src="https://npm.elemecdn.com/[email protected]/dist/granim.min.js"></script>
  <script>
      // 创建 Granim 实例来实现渐变背景效果
      var granimInstance = new Granim({
          element: '#canvas-basic', // 指定承载渐变效果的 canvas 元素的 id
          direction: 'left-right', // 渐变的方向
          isPausedWhenNotInView: true, // 当不在视图内时暂停渐变
          states: {
              "default-state": {
                  gradients: [
                      ['#a18cd1', '#fbc2eb'],
                      ['#fff1eb', '#ace0f9'],
                      ['#d4fc79', '#96e6a1'],
                      ['#a1c4fd', '#c2e9fb'],
                      ['#a8edea', '#fed6e3'],
                      ['#9890e3', '#b1f4cf'],
                      ['#a1c4fd', '#c2e9fb'],
                      ['#fff1eb', '#ace0f9']
                  ]
              }
          }
      });
  </script>
  <div class="copyright" align="center">
      <div class="about">
          <div class="runtime">
              <span class="run_item">运行时间：<span id="runtime">载入中...</span></span>
          </div>
      </div>
      <div class="state">
          <p>免责声明：本站为个人网盘，网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的</p>
      </div>
 
      <!-- 引入 SweetAlert2 库 -->
      <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
      <script>
          // 网站的启用时间
          var launchTime = new Date("04/17/2022 00:00:00");
 
          function formatTime(difference) {
              var days = Math.floor(difference / (1000 * 60 * 60 * 24));
              var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
              var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
              var seconds = Math.floor((difference % (1000 * 60)) / 1000);
              return `本站已稳定运行${days}天${hours}小时${minutes}分${seconds}秒`;
          }
 
          function updateRuntime() {
              var now = new Date();
              var difference = now - launchTime;
              document.getElementById('runtime').innerHTML = formatTime(difference);
          }
 
          setInterval(updateRuntime, 1000);
 
 
      </script>
  </div>
</body>
 
</html>