没有部署的可以看Alist网盘搭建 - 胡图图

浏览主页 | 胡图图

点击管理找到设置点击管理

自定义头部

<!-- 引入 polyfill -->
<script src="https://polyfill.alicdn.com/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" />

<style>
    /* 隐藏底部 */
    .footer {
        display: none !important;
    }
    
    /*主列表白天模式透明*/
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background-color: rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }
    /*主列表夜间模式透明*/
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background-color: rgba(0, 0, 0, 0.3) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }
    /*readme白天模式透明*/
    .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background-color: rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }
    /*readme夜间模式透明*/
    .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background-color: rgba(0, 0, 0, 0.3) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }

    /*顶部*/
    #root > .header {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background: rgba(255, 255, 255, 0); /* 透明背景色 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }

    /*导航条*/
    /*白天模式*/
    .hope-ui-light .body > .nav {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: var(--hope-radii-xl);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }
    /*夜间模式*/
    .hope-ui-dark .body > .nav {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: var(--hope-radii-xl);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }
   
    /*隐藏导航条遮罩*/
    .body > .nav::after {
        display: none;
    }

    /*右上视图切换菜单*/
    /*白天模式*/
    .hope-ui-light .hope-c-PJLV-iSMXDf-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background: rgba(255, 255, 255, 0.3); /* 透明背景色 */
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }
    /*夜间模式*/
    .hope-ui-dark .hope-c-PJLV-iSMXDf-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background: rgba(0, 0, 0, 0.3); /* 透明背景色 */
        border-radius: var(--hope-radii-xl);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }

    /*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
    .hope-ui-light .hope-c-PJLV-ijgzmFG-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background-color: rgba(255, 255, 255, 0.3) !important;
    }
    .hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
        background-color: rgba(0, 0, 0, 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;
    }

  
    /*全局字体*/
    * {
        font-family: LXGW WenKai;
    }
    * {
        font-weight: bold;
    }
    body {
        font-family: LXGW WenKai;
    }
</style>

自定义内容

<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<div id="customize" style="display: none;">
    <div>
        <!--音乐播放器-->
        <meting-js list-folded="true" server="netease" type="playlist" id="7292043675" fixed=true>
            <pre hidden>
                [00:00.00]This
                [00:04.01]is
                [00:08.02]Waite
            </pre>
        </meting-js>
        <br />
        <center class="dibu">
            <div style=" line-height: 20px;font-size: 9pt;font-weight: bold;">
                <span>
                    "
                    <span style="color: rgb(121, 15, 104); font-weight: bold; font-size: 15px;" id="hitokoto">
                        <a href="#" id="hitokoto_text">
                            "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
                        </a>
                    </span> "
                </span>
                <p style="margin-left: 10rem;font-size: 8pt;">
                    <small>
                        —— Waite's Cloud
                    </small>
                </p>
            </div>

            <div style="font-size: 13px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="https://github.com/GaoZd-yundao " target="_blank">
                        <i class="fab fa-qq" style="color:#9932CC" aria-hidden="true">
                        </i>
                        Github |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="mailto:waite0603@qq.com" target="_blank">
                        <i class="fa-duotone fa-envelope-open" style="color:#9932CC" aria-hidden="true">
                        </i>
                        邮箱 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://www.gaozhi.xin/ " target="_blank">
                        <i class="fas fa-edit" style="color:#9932CC" aria-hidden="true">
                        </i>
                        博客 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="http://alist.gaozhi.xin/ " target="_blank">
                        <i class="fa fa-cloud-download" style="color:#9932CC;" 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:#9932CC;" 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:#9932CC;" aria-hidden="true">
                        </i>
                        Alist
                    </a>
                </span>
                <br />
              
                <br />
                <!--添加备案信息-->
                <span class="nav-item">
                    <a class="nav-link" href="https://beian.miit.gov.cn/#/Integrated/index " target="_blank">
                        <i class="fa-solid fa-shield-check" style="color:#9932CC;" aria-hidden="true">
                        </i>
                        豫ICP备2025120361号-1
                    </a>
                </span>
            </div>
        </center>
        <br />
        <br />
    </div>

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

    function removelrc() {
        //检测是否存在歌词按钮
        if (!document.querySelector(".aplayer-icon-lrc"))
            return;
        else {
            //触发以后立刻移除监听
            document.removeEventListener("DOMNodeInserted", removelrc);
            //稍作延时保证触发函数时存在按钮
            setTimeout(function () {
                //以触发按钮的方式隐藏歌词，防止在点击显示歌词按钮时需要点击两次才能出现的问题
                document.querySelector(".aplayer-icon-lrc").click();
            }, 1);
            console.log("success");
            return;
        }
    }

    document.addEventListener('DOMNodeInserted', removelrc)
</script>

</script>

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

    /* 图片API用法点进去都会有食用说明的
    樱花：https://www.dmoe.cc 
    夏沫：https://cdn.seovx.com 
    搏天：https://api.btstu.cn/doc/sjbz.php 
    姬长信：https://github.com/insoxin/API 
    小歪：https://api.ixiaowai.cn/ 
    保罗：https://api.paugram.com 
    墨天逸：https://api.mtyqx.cn 
    岁月小筑：https://img.xjh.me 
    东方Project：https://img.paulzzh.com 
    */
    .footer {
        display: none !important;
    }

    .hope-c-ivMHWx-dvmlqS-cv {
        color: #9932CC !important;
    }

    .hope-c-PJLV-igVoCQk-css {
        color: #9932CC !important;
    }

    .hope-c-PJLV-ilcHcHe-css {
        color: #9932CC !important;
    }

    .hope-c-PJLV-ieavQQG-css {
        color: #9932CC !important;
    }

    /*白天背景图*/
    .hope-ui-light {
        background-image: url("https://alist.gaozhi.xin/d/%E5%A3%81%E7%BA%B8/%E7%99%BD%E5%BA%95%E5%A3%81%E7%BA%B8/112.jpg?sign=dNYvXYaPiqHOG_s79xnmdqzTkytZ8f9mYYNNiwBJxMs=:0") !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /*夜间背景图*/
    .hope-ui-dark {
        background-image: url("") !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;
    }

    .aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow,
    .aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow:hover .aplayer-body {
        left: 0 !important;
    }
</style>

<!-- 网页鼠标点击特效 - 爱心 -->
<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>

在点击元信息添加下面图片的内容

顶部说明

<marquee>
<b id="nr">(｡･∀･)ﾉﾞ谢谢你 在这世界的角落 发现了我</b> 
</marquee></div>