效果展示#

自定义头部#

1
<!-- 引入 polyfill -->
2
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
3

4
<!-- 引入字体 -->
5
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
6

7
<style>
8
    /* 隐藏底部 */
9
    .footer {
10
        display: none !important;
11
    }
12

13
    /* 背景设置 */
14
    .hope-ui-dark, .hope-ui-light {
15
        background-image: url('https://img.catcdn.cn/ba/') !important;
16
        background-size: cover;
17
        background-attachment: fixed;
18
        background-position: center;
19
    }
20

21
    /*主列表白天模式透明*/
22
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
23
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
24
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
25
        background-color: rgba(255, 255, 255, 0.3) !important;
26
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
27
    }
28
    /*主列表夜间模式透明*/
29
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
30
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
31
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
32
        background-color: rgba(0, 0, 0, 0.3) !important;
33
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
34
    }
35
    /*readme白天模式透明*/
36
    .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
37
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
38
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
39
        background-color: rgba(255, 255, 255, 0.3) !important;
40
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
41
    }
42
    /*readme夜间模式透明*/
43
    .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
44
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
45
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
46
        background-color: rgba(0, 0, 0, 0.3) !important;
47
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
48
    }
49

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

58
    /*导航条*/
59
    /*白天模式*/
60
    .hope-ui-light .body > .nav {
61
        background-color: rgba(255, 255, 255, 0.3);
62
        border-radius: var(--hope-radii-xl);
63
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
64
    }
65
    /*夜间模式*/
66
    .hope-ui-dark .body > .nav {
67
        background-color: rgba(0, 0, 0, 0.3);
68
        border-radius: var(--hope-radii-xl);
69
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
70
    }
71

72
    /*隐藏导航条遮罩*/
73
    .body > .nav::after {
74
        display: none;
75
    }
76

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

95
    /*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
96
    .hope-ui-light .hope-c-PJLV-ijgzmFG-css {
97
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
98
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
99
        background-color: rgba(255, 255, 255, 0.3) !important;
100
    }
101
    .hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
102
        backdrop-filter: blur(10px); /* 毛玻璃效果的强度 */
103
        -webkit-backdrop-filter: blur(10px); /* 为 Safari 浏览器添加兼容性 */
104
        background-color: rgba(0, 0, 0, 0.5) !important;
105
    }
106
    /*白天模式代码块透明*/
107
    .hope-ui-light pre {
108
        background-color: rgba(255, 255, 255, 0.1) !important;
109
    }
110
    /*夜间模式代码块透明*/
111
    .hope-ui-dark pre {
112
        background-color: rgba(255, 255, 255, 0) !important;
113
    }
114

115
    /*底部CSS，.App .table这三个一起的*/
116
    dibu {
117
        border-top: 0px;
118
        position: absolute;
119
        bottom: 0;
120
        width: 100%;
121
        margin: 0px;
122
        padding: 0px;
123
    }
124
    .App {
125
        min-height: 85vh;
126
    }
127
    .table {
128
        margin: auto;
129
    }
130

131

132
    /*全局字体*/
133
    * {
134
        font-family: LXGW WenKai;
135
    }
136
    * {
137
        font-weight: bold;
138
    }
139
    body {
140
        font-family: LXGW WenKai;
141
    }
142
</style>

自定义内容#

1
<!-- 延迟加载 -->
2
<div id="customize" style="display: none;">
3
    <div>
4
        <br />
5
        <center class="dibu">
6
            <div style=" line-height: 20px;font-size: 9pt;font-weight: bold;">
7
                <span>
8
                    "
9
                    <span style="color: rgb(15, 175, 255); font-weight: bold;" id="hitokoto">
10
                        <a href="#" id="hitokoto_text">
11
                            "与你的日常，便是奇迹！"
12
                        </a>
13
                    </span> "
14
                </span>
15
            </div>
16

17
            <!-- 底部链接 -->
18
            <div style="font-size: 13px; font-weight: bold;">
19
                <span class="nav-item">
20
                    <a class="nav-link" href="https://jerrytom0401@163.com" target="_blank">
21
                        <i class="fa-duotone fa-envelope-open" style="color:#409EFF" aria-hidden="true">
22
                        </i>
23
                        邮箱 |
24
                    </a>
25
                </span>
26
                <span class="nav-item">
27
                    <a class="nav-link" href="https://www.jerry-nis.top/" target="_blank">
28
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
29
                        </i>
30
                        博客 |
31
                    </a>
32
                </span>
33
                <!--后台入口-->
34
                <span class="nav-item">
35
                    <a class="nav-link" href="/@manage" target="_blank">
36
                        <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
37
                        </i>
38
                        管理 |
39
                    </a>
40
                </span>
41
                <!--版权，请尊重作者-->
42
                <span class="nav-item">
43
                    <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
44
                        <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
45
                        </i>
46
                        Openlist
47
                    </a>
48
                </span>
49
            </div>
50
        </center>
51
        <br />
52
    </div>
53

54
    <!--一言API-->
55
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
56
<!--延迟加载范围到这里结束-->
57
</div>
58

59
<!-- 延迟加载JS -->
60
<script>
61
    let interval = setInterval(() => {
62
        if (document.querySelector(".footer")) {
63
            document.querySelector("#customize").style.display = "";
64
            clearInterval(interval);
65
        }
66
    }, 200);
67
</script>

音乐

音乐

效果展示#

自定义头部#

自定义内容#

评论区

音乐

音乐

Openlist美化指南

效果展示#

自定义头部#

自定义内容#

支持与分享

评论区