alist v3 样式

#自定义头部

1
<!--音乐播放器所用的文件-->
2
<!-- require APlayer -->
3
<link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css">
4
<script src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
5
<!-- require MetingJS -->
6
<script src="https://cdn.jsdelivr.net/npm/@xizeyoupan/meting@latest/dist/Meting.min.js"></script>
7

8
<!-- Waline CSS -->
9
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v2/dist/waline.css" />
10

11

12
<style>
13

14
/* 移除搜索框中的快捷键指引 */
15
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {
16
    display: none !important;
17
}
18

19

20
/* 移除整个搜索框 */
21
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikEIIxw-css {
22
    display: none !important;
23
}
24

25

26
/* 搜索框改透明 */
27
/* 毛玻璃效果 */
28
/* 白天模式 */
29
.hope-ui-light .hope-c-PJLV-ikEIIxw-css {
30
    background: rgba(255, 255, 255, 0.2) !important;
31
    backdrop-filter: blur(10px) !important;
32
}
33

34
/* 夜间模式 */
35
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css {
36
    background: rgb(0 0 0 / 10%) !important;
37
    backdrop-filter: blur(10px) !important;
38
}
39

40
/* 非毛玻璃效果 */
41
/* 白天模式 */
42
.hope-ui-light .hope-c-PJLV-ikEIIxw-css {
43
    background: rgba(255, 255, 255, 0.2) !important;
44
}
45

46
/* 夜间模式 */
47
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css {
48
    background: rgb(0 0 0 / 10%) !important;
49
}
50

51

52
/* 搜索结果改透明 */
53
/* 毛玻璃效果 */
54
/* 白天模式 */
55
.hope-ui-light .hope-c-PJLV-iiBaxsN-css {
56
    background: rgba(255, 255, 255, 0.2) !important;
57
    backdrop-filter: blur(10px) !important;
58
}
59

60
/* 夜间模式 */
61
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css {
62
    background: rgb(0 0 0 / 10%) !important;
63
    backdrop-filter: blur(10px) !important;
64
}
65

66
/* 非毛玻璃效果 */
67
/* 白天模式 */
68
.hope-ui-light .hope-c-PJLV-iiBaxsN-css {
69
    background: rgba(255, 255, 255, 0.2) !important;
70
}
71

72
/* 夜间模式 */
73
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css {
74
    background: rgb(0 0 0 / 10%) !important;
75
}
76

77

78
/* 搜索结果输入框改透明 */
79
/* 毛玻璃样式 */
80
/* 白天模式 */
81
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled {
82
    background: rgba(255, 255, 255, 0.2) !important;
83
    backdrop-filter: blur(10px) !important;
84
}
85

86
/* 夜间模式 */
87
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled {
88
    background: rgb(0 0 0 / 10%) !important;
89
    backdrop-filter: blur(10px) !important;
90
}
91

92
/* 非毛玻璃样式 */
93
/* 白天模式 */
94
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled {
95
    background: rgba(255, 255, 255, 0.2) !important;
96
}
97

98
/* 夜间模式 */
99
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled {
100
    background: rgb(0 0 0 / 10%) !important;
101
}
102

103

104
/* 切换视图按钮改透明 */
105
.hope-c-ivMHWx-hZistB-cv.hope-icon-button {
106
    background-color: rgba(255, 255, 255, 0.3) !important; /* 可将0.3改成0达到完全没有背景 */
107
}
108

109

110
/* 去除网站图标与搜索 */
111
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css {
112
    display: none !important;
113
}
114

115

116
/* 顶部新增图片（可设置GIF） */
117
<img src="图片地址" style="display:block; margin:auto;" />
118

119

120
/* 使用背景图（可设置GIF） */
121
/*图片API
122
  樱花：https://www.dmoe.cc
123
  夏沫：https://cdn.seovx.com
124
  搏天：https://api.btstu.cn/doc/sjbz.php
125
  姬长信：https://github.com/insoxin/API
126
  小歪：https://api.ixiaowai.cn/
127
  保罗：https://api.paugram.com
128
  墨天逸：https://api.mtyqx.cn
129
  岁月小筑：https://img.xjh.me
130
  东方Project：https://img.paulzzh.com
131
  */
132
/* 白天模式 */
133
.hope-ui-light {
134
    background-image: url("图片地址") !important;
135
    background-repeat: no-repeat;
136
    background-size: cover;
137
    background-attachment: fixed;
138
    background-position-x: center;
139
}
140

141
/* 夜间模式 */
142
.hope-ui-dark {
143
    background-image: url("图片地址") !important;
144
    background-repeat: no-repeat;
145
    background-size: cover;
146
    background-attachment: fixed;
147
    background-position-x: center;
148
}
149

150

151
/* 列表改透明 */
152
/* 白天模式 */
153
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
154
    background-color: rgba(255, 255, 255, 0.5) !important;
155
}
156

157
/* 夜间模式 */
158
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
159
    background-color: rgb(0 0 0 / 50%) !important;
160
}
161

162

163
/* 元信息改透明 */
164
/* 白天模式 */
165
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
166
    background-color: rgba(255, 255, 255, 0.5) !important;
167
}
168

169
/* 夜间模式 */
170
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
171
    background-color: rgb(0 0 0 / 50%) !important;
172
}```
173

174

175
/* 文档预览改透明 */
176
/* 白天模式 */
177
.hope-ui-light pre {
178
    background-color: rgba(255, 255, 255, 0.1) !important;
179
}
180

181
/* 夜间模式 */
182
.hope-ui-dark pre {
183
    background-color: rgba(255, 255, 255, 0)!important;
184
}
185

186

187
/* 侧边栏改透明 */
188
.hope-c-PJLV-ijgzmFG-css {
189
    background-color: rgba(255, 255, 255, 0.5) !important;
190
}
191

192

193
/* 去除底部 */
194
.footer {
195
    display: none !important;
196
}
197

198

199
/* 移除本地设置中的 Aria2 */
200
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikjnSaO-css {
201
    display: none !important;
202
}
203

204

205
/* 移除下载选项 */
206
.hope-select__trigger.hope-c-kvTTWD.hope-c-huZphZ.hope-c-kvTTWD-hYRNAb-variant-filled.hope-c-kvTTWD-gfwxhr-size-md.hope-c-huZphZ-cIGthf-cv.hope-c-PJLV.hope-c-PJLV-ijSQbqe-css {
207
    display: none !important;
208
}
209

210

211
/* 去除公告关闭按钮 */
212
.notify-render .hope-close-button {
213
    display: none;
214
}
215

216

217
/* 评论适配大小契合度 */
218
.newWaline {
219
    width: min(96%, 940px);
220
    flex-direction: column;
221
    row-gap: var(--hope-space-2);
222
    border-radius: var(--hope-radii-xl);
223
    padding: var(--hope-space-2);
224
    box-shadow: var(--hope-shadows-lg);
225
}
226
/* 评论区 白天模式透明度 */
227
.hope-ui-light .newWaline {
228
    background-color: rgba(255, 255, 255, 0.8)!important;
229
}
230
/* 评论区 夜间模式透明度 */
231
.hope-ui-dark .newWaline {
232
    background-color:rgb(0 0 0 / 80%)!important;
233
}
234

235

236
/* 音乐播放器进一步进行隐藏 */
237
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
238
    left: -66px!important;
239
}
240
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
241
    left: 0!important;
242
}
243

244

245
/*渐变背景CSS*/
246
 #canvas-basic {
247
    position: fixed;
248
    display: block;
249
    width: 100%;
250
    height: 100%;
251
    top: 0;
252
    right: 0;
253
    bottom: 0;
254
    left: 0;
255
    z-index: -999;
256
}
257

258
</style>

#自定义内容

1
<!--延迟加载-->
2
<div id="customize" style="display: none;">
3
    <div>
4
        <!--音乐播放器-->
5
        <meting-js
6
            server="netease"
7
            id="7519316683"
8
            type="playlist"
9
            fixed="true"
10
            autoplay="true">
11
        </meting-js>
12

13
        <!--评论模块-->
14
        <center>
15
            <div class="newWaline" id="waline"></div>
16
        </center>
17
        <script type="module">
18
            import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
19

20
            init({
21
                el: '#waline',
22
                serverURL: 'https://your-domain.vercel.app',
23
            });
24
        </script>
25

26
        <br />
27
        <center>
28
            <div>
29
                <span class="nav-item">
30
                    <a class="nav-link" href="xxxxxx" target="_blank">
31
                        博客 |
32
                    </a>
33
                </span>
34
                <!--后台入口-->
35
                <span class="nav-item">
36
                    <a class="nav-link" href="/@manage" target="_blank">
37
                        管理
38
                    </a>
39
                </span>
40
            </div>
41
        </center>
42
        <br />
43
        <br />
44
    </div>
45
    <!--延迟加载范围到这里结束-->
46
</div>
47
<!--延迟加载配套使用JS-->
48
<script>
49
    let interval = setInterval(() => {
50
        if (document.querySelector(".footer")) {
51
            document.querySelector("#customize").style.display = "";
52
            clearInterval(interval);
53
        }
54
    }, 200);
55
</script>
56

57
<!-- 渐变背景初始化,如果要使用渐变背景把下面一行注释去掉即可 -->
58
<!-- <canvas id="canvas-basic"></canvas> -->
59
<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
60
<script>
61
    var granimInstance = new Granim({
62
        element: '#canvas-basic',
63
        direction: 'left-right',
64
        isPausedWhenNotInView: true,
65
        states: {
66
            "default-state": {
67
                gradients: [
68
                    ['#a18cd1', '#fbc2eb'],
69
                    ['#fff1eb', '#ace0f9'],
70
                    ['#d4fc79', '#96e6a1'],
71
                    ['#a1c4fd', '#c2e9fb'],
72
                    ['#a8edea', '#fed6e3'],
73
                    ['#9890e3', '#b1f4cf'],
74
                    ['#a1c4fd', '#c2e9fb'],
75
                    ['#fff1eb', '#ace0f9']
76

77
                ]
78
            }
79
        }
80
    });
81
</script>

音乐

评论区

音乐

目录