自用Alist美化

Everett2025-02-172025-02-19

前言

这是我一直在用的样式，不想再继续续费服务器了，反正也没什么访问流量，估计不到25年的三月，我的alist服务就停止了。

附上链接：

cpolar内网穿透的版本
 自己域名的版本

预览

具体内容

Alist后台→管理→设置→全局

背景图片API建议调整，不保证一直能用。

自定义头部

<style>

/*白天背景图*/

.hope-ui-light {

    background-image: url("[http://pic.rmb.bdstatic.com/bjh/7569b014a1abafd5481298763300ae1d.png](http://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("[http://pic.rmb.bdstatic.com/bjh/ebe942a9de49856f389c65f25a338335.png](http://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 / 70%) !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 / 70%) !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 / 70%) !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 / 70%) !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.3) !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.3) !important;

}

.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {

    background-color:rgb(0 0 0 / 70%)!important;

}

/*正常情况未使用吸附功能*/

/*导航条*/

/*白天模式*/

.hope-ui-light .hope-c-PJLV-idaeksS-css {

    background-color: rgba(255, 255, 255, 0.5)!important;

    border-radius: 10px !important;

}

/*夜间模式*/

.hope-ui-dark .hope-c-PJLV-idaeksS-css {

    background-color:rgb(0 0 0 / 50%)!important;

    border-radius: 10px !important;

}

/*顶栏*/

.hope-c-PJLV-ikaMhsQ-css {

    background: rgba(255, 255, 255, 0) !important;

}

/* 吸附到页面顶部 */

/*顶部*/

.hope-c-PJLV-icWrYmg-css {

    background: rgba(255, 255, 255, 0) !important;

}

/*导航条*/

.hope-c-PJLV-icKsjdm-css::after {

    background: rgba(255, 255, 255, 0) !important;

}

/*白天模式*/

.hope-ui-light .hope-c-PJLV-icKsjdm-css {

    background-color: rgba(255, 255, 255, 0.5)!important;

    border-radius: 10px !important;

}

/*夜间模式*/

.hope-ui-dark .hope-c-PJLV-icKsjdm-css {

    background-color:rgb(0 0 0 / 50%)!important;

    border-radius: 10px !important;

}

/*仅吸附导航栏*/

/*导航条*/

.hope-c-PJLV-ifdXShc-css::after {

    background: rgba(255, 255, 255, 0) !important;

}

/*白天模式*/

.hope-ui-light .hope-c-hrsMRY {

    background-color: rgba(255, 255, 255, 0.5)!important;

    border-radius: 10px !important;

}

/*夜间模式*/

.hope-ui-dark .hope-c-hrsMRY {

    background-color:rgb(0 0 0 / 50%)!important;

    border-radius: 10px !important;

}

</style>

<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->

<script src="[https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll](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](https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css)" />

<!--音乐播放器所用的文件-->

<!-- require APlayer -->

<link rel="stylesheet" href="[https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css](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](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](https://npm.elemecdn.com/meting@2.0.1/dist/Meting.min.js)"></script>

<style>

  /*全局字体*/

  *{font-family:LXGW WenKai}

  *{font-weight:bold}

  body {font-family: LXGW WenKai;}

</style>

<style>

/*白天模式 搜索主体+毛玻璃*/

.hope-ui-light .hope-c-PJLV-iiBaxsN-css{

   background-color: rgba(255,255,255,0.2)!important;

   backdrop-filter: blur(10px)!important;

}

/*白天模式 搜索栏输入框+毛玻璃*/

.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{

   background-color: rgba(255,255,255,0.2)!important;

   backdrop-filter: blur(10px)!important;

}

/*白天模式 搜索按钮+毛玻璃*/

.hope-ui-light .hope-c-PJLV-ikEIIxw-css{

   background-color: rgba(255,255,255,0.2)!important;

   backdrop-filter: blur(10px)!important;

   padding: var(--hope-space-1)!important;

}

/*夜间模式搜索主体+毛玻璃*/

.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{

    background-color: rgb(0 0 0 / 10%)!important;

    backdrop-filter: blur(10px)!important;

}

/*夜间模式搜索栏+毛玻璃*/

.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{

    background-color: rgb(0 0 0 / 10%)!important;

    backdrop-filter: blur(10px)!important;

}

/*夜间模式 搜索按钮+毛玻璃*/

.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{

    background-color: rgb(0 0 0 / 10%)!important;

    backdrop-filter: blur(10px)!important;

    padding: var(--hope-space-1)!important;

}

</style>

自定义内容

显示运行时间还有访问量



<style>
    #runtime_span {
        display: block;
        text-align: center;
    }
</style>

<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("6/15/2024 10:28: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>

<span id="runtime_span"></span>

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div style="text-align: center;">
    本站总访问量 <span id="busuanzi_value_site_pv"></span> 次  
</div>