Alist 美化合集

发表于 更新于 分类于 阅读次数：
AList美化简单教程

自定义头部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/* 显示站点运行时间的js，建议自行修改后并将第一行删去或注释 */
<script src="https://cdn.jsdmirror.com/gh/lm379look/lm379look@main/runtime.js"></script>
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/css/fontawesome.min.css" media='all'>
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" />
<link href="https://npm.elemecdn.com/[email protected]/css/all.min.css" rel="stylesheet">
/* 获取访客ip */
<script src="https://cdn.jsdmirror.com/gh/lm379look/lm379look@main/getip.js"></script>
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>  
<style>
/*白天背景图*/
 .hope-ui-light {
    background-image: url("https://r2.lm379.cn/2024/04/aa165e75f16a6506a584418fd5039c54.png") !important;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center;
}
/*夜间背景图*/
 .hope-ui-dark {
    background-image: url("https://image.baidu.com/search/down?url=https://tva1.sinaimg.cn/large/007Dxz4Tgy1hrgu4y6wo8j31hc0u04qp.jpg") !important;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center;
}
/*主列表白天模式透明*/
 .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
    background-color: rgba(255, 255, 255, 0) !important;
}
/*主列表夜间模式透明*/
 .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
    background-color:rgb(0 0 0 / 0%) !important;
}
/*readme白天模式透明*/
 .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
/*readme夜间模式透明*/
 .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
    background-color:rgb(0 0 0 / 20%) !important;
}

/*顶部右上角切换按钮透明*/
 .hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color: rgba(255, 255, 255, 0) !important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color:rgb(0 0 0 / 0%) !important;
}
/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
 .hope-ui-light .hope-c-PJLV-ijgzmFG-css {
    background-color: rgba(255, 255, 255, 0) !important;
}
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
    background-color:rgb(0 0 0 / 0%) !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.1)!important;
}

/*左侧侧边栏目录*/
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-ieGWMbI-css {
    background: rgba(255, 255, 255, 0) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
    background-color:rgb(0 0 0 / 0%) !important;
}

/* 返回顶部 */
 .hope-c-PJLV-ihVEsOa-css {
    background: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

/*正常情况未使用吸附功能*/
/*顶部*/
 .hope-c-PJLV-ikaMhsQ-css {
    background: rgba(255, 255, 255, 0) !important;
}
/*导航条*/ 
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-idaeksS-css {
    background-color: rgba(255, 255, 255, 0) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-idaeksS-css {
    background-color:rgb(0 0 0 / 0%) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/* 吸附到页面顶部 */
/*顶部*/
 .hope-c-PJLV-icWrYmg-css {
    background: rgba(255, 255, 255, 0) !important;
}
/*导航条*/
 .hope-c-PJLV-icKsjdm-css::after {
    background: rgba(255, 255, 255, 0) !important;
}
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-icKsjdm-css {
    background-color: rgba(255, 255, 255, 0) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-icKsjdm-css {
    background-color:rgb(0 0 0 / 0%) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*仅吸附导航栏*/
/*导航条*/
 .hope-c-PJLV-ifdXShc-css::after {
    background: rgba(255, 255, 255, 0) !important;
}
/*白天模式*/
 .hope-ui-light .hope-c-hrsMRY {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-hrsMRY {
    background-color:rgb(0 0 0 / 50%) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*路径栏透明*/
.hope-ui-dark .hope-c-PJLV-idaeksS-css {
    background-color:rgb(0 0 0 / 0%) !important;
}
.hope-ui-light .hope-c-PJLV-idaeksS-css {
    background-color:rgb(0 0 0 / 0%) !important;
}
/*markdown大纲透明*/
.hope-c-PJLV-igmvEDM-css {
    background-color:rgb(0 0 0 / 0%) !important;
}
/*修改全局字体为霞鹜文楷*/
 * {
    font-family:LXGW WenKai
}
* {
    font-weight:bold
}
body {
    font-family: LXGW WenKai;
}
</style>

上面修改了全局透明度，引入了一些js以及字体

你可以自己进行修改，比如修改全局字体为MiSans

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans" />
<style>
* {
    font-family:MiSans
}
body {
    font-family:MiSans;
}
</style>

自定义内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--延迟加载-->
<div id="customize" style="display: none;">
    <div>
        <center class="dibu">
            <div style="font-size: 13px; font-weight: bold;">
                <!--显示访客ip-->
                <p style="text-align: center" id="welcome"></p>
                <!--显示站点运行时间-->
                <p style="text-align: center;">本站已稳定运行<span id="runtime"></span></p>
                <!--添加备案信息-->
                <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:#409EFF;" aria-hidden="true">
                        </i>
                        ICP备2022000000号
                    </a>
                </span>
                <p style="text-align: center"><a href="https://ipw.cn/ipv6webcheck/?site=pan.lm379.cn"
                        title="本站支持IPv6访问" target='_blank'><img style='display:inline-block;vertical-align:middle'
                            alt="本站支持IPv6访问" src="https://static.ipw.cn/icon/ipv6-s4.svg"></a>
                    <a href="https://ipw.cn/ssl/?site=pan.lm379.cn" title="本站支持SSL安全访问" target='_blank'><img
                            style='display:inline-block;vertical-align:middle' alt="本站支持SSL安全访问"
                            src="https://static.ipw.cn/icon/ssl-s4.svg"></a>
                </p>
            </div>
        </center>
    </div>
    <!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>

其中显示站点运行时间的js代码为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function updateRuntime() {
    const startDate = new Date('2021-11-14T00:00:00'); // 建站日期
    const now = new Date();
    const elapsed = now - startDate;

    const days = Math.floor(elapsed / (1000 * 60 * 60 * 24));
    const hours = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((elapsed % (1000 * 60)) / 1000);

    document.getElementById('runtime').innerHTML = `${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;
}

setInterval(updateRuntime, 1000); // 每秒更新一次时间
updateRuntime(); // 初始化时间显示

获取访客ip的js代码为

1
2
3
4
5
6
7
8
9
10
fetch('https://token.ip.api.useragentinfo.com/json?token=ab28a017dc0b7536f452fd951aed51d2')
    .then(response => response.json())
    .then(data => {
        const ip = data.ip;
        const province = data.province;
        const city = data.city;
        const welcomeMessage = `欢迎${province}${city}（IP：${ip}）的小伙伴访问本站`;
        document.getElementById('welcome').textContent = welcomeMessage;
    })
    .catch(error => console.error(error));

在我的配置中已经将这两个js传到了github然后通过jsdelivr引用(使用了jsd镜像)，你也可以直接使用<script>标签引用上面的代码
我将引用的部分放在了自定义头部

其他优化

修改AList静态资源CDN

以脚本直接安装为例

1
nano /opt/alist/data/config.json

修改CDN字段如下

1
"cdn": "https://registry.npmmirror.com/alist-web/$version/files/dist/"

然后重启AList使配置生效

若使用Alist默认的logo，建议进入AList后台将网站图标修改为

1
https://cdn.jsdmirror.com/gh/alist-org/logo@main/logo.svg

修改音频封面为

1
https://cdn.jsdmirror.com/gh/alist-org/logo@main/logo.svg