Alist网盘美化记录

874 字

4 分钟

Alist网盘美化记录

2025-01-03

技术折腾

Alist网盘

最近部署了alist网盘，也顺便美化了一下。再做个笔记备用。

Alist版本：v3.41.0

自定义头部#

1
<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
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
<!--不蒜子计数器-->
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.0.1/css/fontawesome.min.css" media='all'>
12
<link href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css" rel="stylesheet">
13

14
<style>
15
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css {display: none!important;}
16
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikEIIxw-css {display: none !important;}
17
.hope-c-PJLV-ijgzmFG-css{background-color: rgba(255, 255, 255, 0.5)!important;}
18

19
/* 去除通知栏 右上角 X */
20
.notify-render .hope-close-button{
21
  display: none;
22
}
23
        /*
24
            樱花：https://www.dmoe.cc
25
            夏沫：https://cdn.seovx.com
26
            搏天：https://api.btstu.cn/doc/sjbz.php
27
            姬长信：https://github.com/insoxin/API
28
            小歪：https://api.ixiaowai.cn/
29
            保罗：https://api.paugram.com
30
            墨天逸：https://api.mtyqx.cn
31
            岁月小筑：https://img.xjh.me
32
            东方Project：https://img.paulzzh.com
33
        */
34
/*白天背景图*/
35
.hope-ui-light{
36
  background-image: url("https://api.paugram.com/wallpaper/") !important;
37
  background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
38
}
39
/*夜间背景图*/
40
.hope-ui-dark {
41
    background-image: url(https://cdn.seovx.com/d/?mom=302) !important;
42
    background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
43
}
44
/*主列表夜间模式透明，50%这数值是控制透明度大小的*/
45
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{
46
background-color:rgb(0 0 0 / 50%) !important;
47
}
48
/*readme夜间模式透明，50%这数值是控制透明度大小的*/
49
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{
50
background-color:rgb(0 0 0 / 50%) !important;
51
}
52
/*主列表透明*/
53
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
54
background-color: rgba(255, 255, 255, 0.5) !important;
55
}
56
/*readme透明*/
57
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
58
background-color: rgba(255, 255, 255, 0.5) !important;
59
}
60
/*顶部右上角切换按钮透明*/
61
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
62
background-color: rgba(255, 255, 255, 0.3) !important;
63
}
64
/*右下角侧边栏按钮透明*/
65
.hope-c-PJLV-ijgzmFG-css{
66
background-color: rgba(255, 255, 255, 0.5) !important;
67
}
68

69
/*白天模式代码块透明*/
70
.hope-ui-light pre{
71
    background-color: rgba(255, 255, 255, 0.1) !important;
72
}
73
/*夜间模式代码块透明*/
74
.hope-ui-dark pre {
75
    background-color: rgba(255, 255, 255, 0) !important;
76
}
77

78
/*底部CSS，.App .table这三个一起的*/
79
dibu {
80
    border-top: 0px;
81
    position: absolute;
82
    bottom: 0;
83
    width: 100%;
84
    margin: 0px;
85
    padding: 0px;
86
}
87
.App {
88
    min-height: 85vh;
89
}
90
.table {
91
    margin: auto;
92
}
93

94

95
/*去掉底部*/
96
.footer {
97
    display: none !important;
98
}
99

100
/*全局字体*/
101
*{font-family:LXGW WenKai}
102
*{font-weight:bold}
103
body {font-family: LXGW WenKai;}
104

105

106
/*渐变背景CSS*/
107
#canvas-basic {
108
  position: fixed;
109
  display: block;
110
  width: 100%;
111
  height: 100%;
112
  top: 0;
113
  right: 0;
114
  bottom: 0;
115
  left: 0;
116
  z-index: -999;
117
}
118
</style>

自定义内容#

1
<!--延迟加载-->
2
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
3
<div id="customize" style="display: none;">
4
    <div>
5
        <center class="dibu">
6
            <div style=" line-height: 20px;font-size: 9pt;font-weight: bold;">
7
                <span>
8
                    "
9
                    <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
10
                        <a href="#" id="hitokoto_text">
11
                            "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
12
                        </a>
13
                    </span> "
14
                </span>
15
                <p style="margin-left: 10rem;font-size: 8pt;">
16
                    <small>
17
                        —— 来自下水道的关心
18
                    </small>
19
                </p>
20
            </div>
21

22
            <div style="font-size: 13px; font-weight: bold;">
23
                <span class="nav-item">
24
                    <a class="nav-link" href="https://blog.xpled.icu/" target="_blank">
25
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
26
                        </i>
27
                        博客 |
28
                    </a>
29
                </span>
30
                <!--后台入口-->
31
                <span class="nav-item">
32
                    <a class="nav-link" href="/@manage" target="_blank">
33
                        <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
34
                        </i>
35
                        管理 |
36
                    </a>
37
                </span>
38
                <!--版权，请尊重作者-->
39
                <span class="nav-item">
40
                    <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
41
                        <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
42
                        </i>
43
                        Alist
44
                    </a>
45
                </span>
46
        <br />
47
        <span>
48
                    本"<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> 人
49
                </span>
50
                <br />
51
        <!--添加备案信息-->
52
                <span class="nav-item">
53
                    <a class="nav-link" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
54
                        <i class="fa-solid fa-shield-check" style="color:#409EFF;" aria-hidden="true">
55
                        </i>
56
                        闽ICP备2024076278号-1
57
                    </a>
58
                </span>
59
            </div>
60
        </center>
61
        <br />
62
        <br />
63
    </div>
64

65

66

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

81
<!-- 渐变背景初始化,如果要使用渐变背景把下面的那一行注释去掉即可-->
82
<!-- 下面的几行都是渐变的一套,自定义头部内还有一个关联的自定义CSS -->
83
<!--<canvas id="canvas-basic"></canvas> -->
84
<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
85
<script>
86
var granimInstance = new Granim({
87
    element: '#canvas-basic',
88
    direction: 'left-right',
89
    isPausedWhenNotInView: true,
90
    states : {
91
        "default-state": {
92
            gradients: [
93
                ['#a18cd1', '#fbc2eb'],
94
                 ['#fff1eb', '#ace0f9'],
95
                 ['#d4fc79', '#96e6a1'],
96
                 ['#a1c4fd', '#c2e9fb'],
97
                 ['#a8edea', '#fed6e3'],
98
                 ['#9890e3', '#b1f4cf'],
99
                 ['#a1c4fd', '#c2e9fb'],
100
                 ['#fff1eb', '#ace0f9']
101

102
            ]
103
        }
104
    }
105
});
106
</script>