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

<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 {
    background-image: url("自己的图片链接") !important;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center;
}
​
/*网盘列表*/
.obj-box {
   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 {
   background-color: rgba(255, 255, 255, 0.4)!important;
}
​
/* 去除通知栏 右上角 X 
*[aria-label="Close"] {
   display: none!important;
}
*/
​
/*通知字体颜色*/
.markdown-body, .markdown-body a {
    color:#000000!important;
    text-shadow: 2px 2px 5px #ffffff;
}
​
/*代码块透明*/
.hope-ui-light pre {
   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 {
   border-top: 0px;
   position: absolute;
   width: 100%;
   margin: 0px;
   padding: 0px;
   color:#ffffff!important;
   text-shadow: 2px 2px 5px #000000;
   line-height: 30px;
   font-weight: bold;
}
.nav-yiyan {
    font-size: 16px;
    margin-bottom:10px;
}
.nav-item {
    font-size: 14px;
}
.nav-time {
    font-size: 12px;
}
/*底部CSS结束*/
​
/*去掉底部*/
.footer {
   display: none!important;
}
​
/*全局字体*/
* {
   font-family:LXGW WenKai;
}
</style>
​

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