Alist 美化教程｜实用代码合集
本文整理了Alist常用美化代码，涵盖风格定制、看板娘、特效、布局调整等，所有代码均已格式化，复制到Alist自定义设置中即可生效，新手也能轻松操作 ✨
注：所有代码均保留原始功能，优化了格式冗余，适配博客展示，复制时直接复制代码块内内容即可。
一、风格定制
1. 猛男风格（两种版本可选）
风格特点：柔和字体+通透背景，适配各类Alist版本，两种代码择一使用即可。
<!--猛男风格 完整版-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<style>
*{font-family:'ZCOOL XiaoWei',serif}
#root,.App,body,html{min-height:70vh;margin:0;padding:0;margin-top:1%!important}
.chakra-ui-light{background-color:#fff}
.main-box{border-radius:15px!important;box-shadow:unset!important}
.chakra-ui-light .main-box,.chakra-ui-light .readme-box{background-color:rgba(255,255,255,.8)!important}
.readme-box{border-radius:15px!important;box-shadow:unset!important}
body{background-size:cover!important;background-position:center top!important;background-attachment:fixed!important}
.chakra-breadcrumb__list li,.chakra-breadcrumb__list li a{color:#000!important}
.css-neion{color:#ffb6c1!important}
.chakra-stack button{color:#fff!important}
.chakra-stack .list-title p,.overlay button{color:#ffb6c1!important}
a:hover{color:#f9cfec!important}
.foot{line-height:40px;position:fixed;bottom:0;width:100%;text-align:center;letter-spacing:1px}
dibu{border-top:0;position:absolute;bottom:0;width:100%;margin:0;padding:0}
#bg{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1}
#bg:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to top,rgba(255,255,255,.7),rgba(255,255,255,.7)),url(https://jitsu.oss-cn-beijing.aliyuncs.com/home/img/overlay.png);background-size:auto,256px 256px;background-position:center,center;background-repeat:no-repeat,repeat;z-index:2;transition:background-color 2.5s ease-in-out .75s}
#bg:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(https://iw233.cn/api.php?sort=pc);background-position:center;background-size:cover;background-repeat:no-repeat;z-index:1;transform:scale(1.125);transition:transform .325s ease-in-out,filter .325s ease-in-out}
@media screen and (max-width:960px){
#bg:after{background-image:url(https://iw233.cn/api.php?sort=mp)}
}
</style>
<div id="bg"></div><!--猛男风格 简约版（轻量无多余样式）-->
<!--head-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/anosu/anosu.github.io@main/cdn/css/alist/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!--body-->
<div id="bg"></div>2. 全白无框风格
风格特点：纯净无杂色，去除多余阴影，适配喜欢简洁干净风格的用户。
<!--全白无框-->
<style>
.chakra-ui-light{
background-color: #FFFFFF;
}
.main-box {
border-radius: 15px !important;
box-shadow: unset !important;
}
.chakra-ui-light .main-box {
background-color: rgba(255,255,255,0.9) !important;
}
.chakra-ui-light .readme-box {
background-color: rgba(255,255,255,0.9) !important;
}
.readme-box {
border-radius: 15px !important;
box-shadow: unset !important;
}
</style>3. 自定义背景
说明：替换代码中 url() 内的链接，即可设置自己喜欢的背景图，支持随机背景链接。
<!--自定义背景（替换url即可）-->
<style>
.chakra-ui-light{
background-image: url("https://www.dmoe.cc/random.php") !important; /* 替换此处链接 */
background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}
.main-box {
border-radius: 15px !important;
}
.chakra-ui-light .main-box {
background-color: #ffffff70 !important; /* 背景透明度，0-1之间调整 */
}
.chakra-ui-light .readme-box {
background-color: white !important;
}
.readme-box {
border-radius: 15px !important;
}
</style>二、布局调整
1. 自定义主体宽度
说明：默认宽度适配大多数场景，如需调整，修改代码中 width: 1300px 数值即可（单位px）。
<!--自定义主体宽度-->
<style>
@media screen and (min-width: 62em) {
.root-box {
width: 1300px !important; /* 可修改宽度数值 */
}
}
</style>2. 隐藏右上角元素
说明：隐藏右上角“复制直链、下载切换布局”等按钮，让界面更简洁。
<!--隐藏右上角复制直链、下载切换布局等-->
<style>
.css-neion{
display:none;
}
</style>三、底部设置（隐藏/添加元素）
1. 去掉底部管理文字
<!--去掉底部管理文字-->
<style>
.footer span,.footer a:nth-of-type(2){
display:none;
}
</style>2. 去掉底部 Powered by Alist
<!--去掉底部Powered by Alist-->
<style>
.footer span,.footer a:nth-of-type(1){
display:none;
}
</style>3. 去掉底部所有文字（管理+Powered by Alist）
<!--去掉底部所有文字（管理+Powered by Alist）-->
<style type="text/css">
.footer {
display: none !important;
}
</style>4. 添加备案信息
说明：替换代码中“鄂ICP备xxxxxx号-x”为自己的备案号，可修改颜色、链接等细节。
<!--备案信息-->
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<div id="customize" style="display:none;text-align:center;">
<br />
<div style="font-size:13px;">
<span class="nav-item">
<a class="nav-link" href="http://lizong.top/" target="_blank">
<i class="fa-solid fa-copyright" style="color:#9932CC" aria-hidden="true"></i>
2022 LIZONG.TOP |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="https://beian.miit.gov.cn/" target="_blank">
<i class="fa fa-balance-scale" style="color:#9932CC;" aria-hidden="true"></i>
鄂ICP备xxxxxx号-x | /* 替换为自己的备案号 */
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
<i class="fa fa-heart" style="color:#9932CC;" aria-hidden="true"></i>
由Alist驱动
</a>
</span>
</div>
<br />
</div>
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
},200);
</script>5. 底部网站运行时间
说明：修改代码中 new Date("04/17/2022 00:00:00") 为自己的网站启用时间，自动计算运行天数。
<!--底部网站运行时间-->
<center>
<br />
<span class="nav-item">
<a class="nav-link" href="https://nodepanels.com/share/server?auth=c3ce0f96aab24a63b88044dede67165d&key=MzkxZjI4OTI0ODJmNDg5MWFjZDFlZDI2ZmUwYTJiYTR8bDEzMTQ0QHFxLmNvbXxqYzhidHd4bmZueDQ=" target="_blank">
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
</a>
</span>
<script language="javascript">
var now = new Date();
function createtime(){
var grt= new Date("04/17/2022 00:00:00");/* 替换为网站启用时间 */
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "⏱️本站已稳定运行"+dnum+"天";
document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
}
setInterval("createtime()",250);
</script>
</center>四、特效与插件
1. 看板娘 - 黑猫
说明：左侧显示黑猫看板娘，支持鼠标互动，可修改位置、大小、透明度。
<!--看板娘 - 黑猫-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json", // 可替换看板娘模型
"scale": 1
},
"display": {
"position": "left", // 位置：left/right
"width": 100, // 宽度
"height": 200, // 高度
"hOffset": 0, // 水平偏移
"vOffset": 0 // 垂直偏移
},
"mobile": {
"show": true, // 移动端是否显示
"scale": 0.5 // 移动端缩放比例
},
"react": {
"opacityDefault": 0.7, // 默认透明度
"opacityOnHover": 0.2 // 鼠标悬浮透明度
}
});
window.onload = function() {
$("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
}
</script>2. 看板娘 - 白猫
说明：右侧显示白猫看板娘，配置与黑猫一致，可根据喜好选择。
<!--看板娘 - 白猫-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/[email protected]/assets/tororo.model.json", // 白猫模型链接
"scale": 1
},
"display": {
"position": "right", // 位置：右侧
"width": 100,
"height": 200,
"hOffset": -20, // 水平偏移（负数向左移动）
"vOffset": -20 // 垂直偏移（负数向上移动）
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 1, // 不透明
"opacityOnHover": 1
}
});
</script>3. 鼠标点击出随机颜色爱心
说明：点击网页任意位置，会弹出随机颜色的爱心特效，增加页面趣味性。
<!--鼠标点击出随机颜色的爱心-->
<script type="text/javascript">
! function (e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart", s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}), t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
setTimeout(e, 1e3 / 60)
}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
}(window, document);
</script>版权声明
原文链接：https://blog.csdn.net/u012514495/article/details/125772285