Alist自定义美化
Alist自定义美化
自定义头部
1<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
2<script src="https://polyfill.io/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<!--不蒜子计数器-->
8<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>
9
10<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
11<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.3.0/css/fontawesome.min.css" media='all'>
12<link href="https://npm.elemecdn.com/font6pro@6.3.0/css/all.min.css" rel="stylesheet">
13
14<style>
15/* 去除通知栏 右上角 X */
16.notify-render .hope-close-button {
17 display: none;
18}
19/* 文字超长自动换行 */
20.name-box .name {
21 white-space: unset !important;
22 overflow: unset !important;
23}
24/* 缩略图图片变大 代码中的160px 自己改 现在是注释状态若需要自行解除注释 */
25/*.obj-box > div {
26grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))
27}
28.obj-box > div .item-thumbnail{
29 height: 100px;
30}*/
31
32/* 图片API用法点进去都会有食用说明的,API来自网络不保证实效性稳定性自己测试
33 樱花：https://www.dmoe.cc
34 夏沫：https://cdn.seovx.com
35 搏天：https://api.btstu.cn/doc/sjbz.php
36 姬长信：https://github.com/insoxin/API
37 小歪：https://api.ixiaowai.cn/
38 保罗：https://api.paugram.com
39 墨天逸：https://api.mtyqx.cn
40 岁月小筑：https://img.xjh.me
41 东方Project：https://img.paulzzh.com
42 */
43
44/*白天背景图*/
45.hope-ui-light {
46 background-image: url("https://api.ixiaowai.cn/mcapi/mcapi.php") !important;
47 background-repeat:no-repeat;
48 background-size:cover;
49 background-attachment:fixed;
50 background-position-x:center;
51}
52/*夜间背景图*/
53.hope-ui-dark {
54 background-image: url(http://pic.rmb.bdstatic.com/bjh/ebe942a9de49856f389c65f25a338335.png) !important;
55 background-repeat:no-repeat;
56 background-size:cover;
57 background-attachment:fixed;
58 background-position-x:center;
59}
60/*主列表白天模式透明*/
61.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
62 background-color: rgba(255, 255, 255, 0.5)!important;
63}
64/*主列表夜间模式透明*/
65 .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
66 background-color:rgb(0 0 0 / 50%)!important;
67}
68
69/*readme白天模式透明*/
70.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
71 background-color: rgba(255, 255, 255, 0.5)!important;
72}
73/*readme夜间模式透明*/
74.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
75 background-color:rgb(0 0 0 / 50%)!important;
76}
77
78/*顶部右上角切换按钮透明*/
79.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
80 background-color: rgba(255, 255, 255, 0.3)!important;
81}
82.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
83 background-color:rgb(0 0 0 / 10%)!important;
84
85}
86
87/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
88.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
89 background-color: rgba(255, 255, 255, 0.5)!important;
90}
91.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
92 background-color:rgb(0 0 0 / 50%)!important;
93}
94
95/*白天模式代码块透明*/
96.hope-ui-light pre {
97 background-color: rgba(255, 255, 255, 0.1)!important;
98}
99/*夜间模式代码块透明*/
100.hope-ui-dark pre {
101 background-color: rgba(255, 255, 255, 0)!important;
102}
103
104/*底部CSS，.App .table这三个一起的*/
105 dibu {
106 border-top: 0px;
107 position: absolute;
108 bottom: 0;
109 width: 100%;
110 margin: 0px;
111 padding: 0px;
112}
113.App {
114 min-height: 85vh;
115}
116.table {
117 margin: auto;
118}
119
120/*去掉底部*/
121.footer {
122 display: none!important;
123}
124
125/*全局字体*/
126 * {
127 font-family:LXGW WenKai
128}
129* {
130 font-weight:bold
131}
132body {
133 font-family: LXGW WenKai;
134}
135
136/*渐变背景CSS*/
137 #canvas-basic {
138 position: fixed;
139 display: block;
140 width: 100%;
141 height: 100%;
142 top: 0;
143 right: 0;
144 bottom: 0;
145 left: 0;
146 z-index: -999;
147}
148</style>
搜索栏美化带毛玻璃
1<style>
2/*白天模式 搜索主体+毛玻璃*/
3.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
4 background-color: rgba(255,255,255,0.2)!important;
5 backdrop-filter: blur(10px)!important;
6}
7
8/*白天模式 搜索栏输入框+毛玻璃*/
9.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
10 background-color: rgba(255,255,255,0.2)!important;
11 backdrop-filter: blur(10px)!important;
12}
13
14/*白天模式 搜索按钮+毛玻璃*/
15.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
16 background-color: rgba(255,255,255,0.2)!important;
17 backdrop-filter: blur(10px)!important;
18 padding: var(--hope-space-1)!important;
19}
20
21/*夜间模式搜索主体+毛玻璃*/
22.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
23 background-color: rgb(0 0 0 / 10%)!important;
24 backdrop-filter: blur(10px)!important;
25}
26
27/*夜间模式搜索栏+毛玻璃*/
28.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
29 background-color: rgb(0 0 0 / 10%)!important;
30 backdrop-filter: blur(10px)!important;
31}
32
33/*夜间模式 搜索按钮+毛玻璃*/
34.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
35 background-color: rgb(0 0 0 / 10%)!important;
36 backdrop-filter: blur(10px)!important;
37 padding: var(--hope-space-1)!important;
38}
39</style>
搜索栏美化不带毛玻璃
1<style>
2/*白天模式 搜索主体*/
3.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
4 background-color: rgba(255,255,255,0.2)!important;
5}
6
7/*白天模式 搜索栏输入框*/
8.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
9 background-color: rgba(255,255,255,0.2)!important;
10}
11
12/*白天模式 搜索按钮*/
13.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
14 background-color: rgba(255,255,255,0.2)!important;
15 padding: var(--hope-space-1)!important;
16}
17
18/*夜间模式搜索主体*/
19.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
20 background-color: rgb(0 0 0 / 10%)!important;
21}
22
23/*夜间模式搜索栏*/
24.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
25 background-color: rgb(0 0 0 / 10%)!important;
26}
27
28/*夜间模式 搜索按钮*/
29.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
30 background-color: rgb(0 0 0 / 10%)!important;
31 padding: var(--hope-space-1)!important;
32}
33</style>
自定义内容
1<!--延迟加载-->
2<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
3<div id="customize" style="display: none;">
4 <div>
5 <br />
6 <center class="dibu">
7 <div style=" line-height: 20px;font-size: 9pt;font-weight: bold;">
8 <span>
9 "
10 <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
11 <a href="#" id="hitokoto_text">
12 "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
13 </a>
14 </span> "
15 </span>
16 <p style="margin-left: 10rem;font-size: 8pt;">
17 <small>
18 —— 限速网盘
19 </small>
20 </p>
21 </div>
22
23 <div style="font-size: 13px; font-weight: bold;">
24 <span class="nav-item">
25 <a class="nav-link" href="mailto:bboyc80@gmail.com" target="_blank">
26 <i class="fa-duotone fa-envelope-open" style="color:#409EFF" aria-hidden="true">
27 </i>
28 邮箱 |
29 </a>
30 </span>
31 <span class="nav-item">
32 <a class="nav-link" href="https://grew.cc" target="_blank">
33 <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
34 </i>
35 博客 |
36 </a>
37 <span class="nav-item">
38 <a class="nav-link" href="https://pan.grew.cc" target="_blank">
39 <i class="fa fa-cloud-download" style="color:#409EFF;" aria-hidden="true">
40 </i>
41 云盘 |
42 </a>
43 </span>
44 <!--后台入口-->
45 <span class="nav-item">
46 <a class="nav-link" href="/@manage" target="_blank">
47 <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
48 </i>
49 管理 |
50 </a>
51 </span>
52 <!--版权，请尊重作者-->
53 <span class="nav-item">
54 <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
55 <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
56 </i>
57 Alist
58 </a>
59 </span>
60 <br />
61 <!--添加一个访问量-->
62 <span>
63 本"<span style="color: rgb(13, 109, 252); font-weight: bold;"><a href="#">目录</a></span>"访问量 <span id="busuanzi_value_page_pv" style="color: rgb(13, 109, 252); font-weight: bold;"></span> 次 本站总访问量 <span id="busuanzi_value_site_pv" style="color: rgb(13, 109, 252); font-weight: bold;"></span> 次 本站总访客数 <span id="busuanzi_value_site_uv" style="color: rgb(13, 109, 252); font-weight: bold;"></span> 人
64 </span>
65 <br />
66 </div>
67 </center>
68 <br />
69 <br />
70 </div>
71
72 <!--一言API-->
73 <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
74<!--延迟加载范围到这里结束-->
75</div>
76<!--延迟加载配套使用JS-->
77<script>
78 let interval = setInterval(() => {
79 if (document.querySelector(".footer")) {
80 document.querySelector("#customize").style.display = "";
81 clearInterval(interval);
82 }
83 }, 200);
84</script>
85
86<!-- 渐变背景初始化,如果要使用渐变背景把下面的那一行注释去掉即可-->
87<!-- 下面的几行都是渐变的一套,自定义头部内还有一个关联的自定义CSS -->
88<!--<canvas id="canvas-basic"></canvas> -->
89<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
90<script>
91var granimInstance = new Granim({
92 element: '#canvas-basic',
93 direction: 'left-right',
94 isPausedWhenNotInView: true,
95 states : {
96 "default-state": {
97 gradients: [
98 ['#a18cd1', '#fbc2eb'],
99 ['#fff1eb', '#ace0f9'],
100 ['#d4fc79', '#96e6a1'],
101 ['#a1c4fd', '#c2e9fb'],
102 ['#a8edea', '#fed6e3'],
103 ['#9890e3', '#b1f4cf'],
104 ['#a1c4fd', '#c2e9fb'],
105 ['#fff1eb', '#ace0f9']
106
107 ]
108 }
109 }
110});
111</script>
最后修改于 2024-02-04
