Alist 美化合集

请自行修改下面的代码

下面的图片部分请使用自己的图床，本文中原有链接将开启防盗链

比如PICUI - PICUI图床 聚合图床 - 免费无限图片上传
或者使用对象存储自建图床，比如使用Cloudflare R2，可以参考我在知乎写的 Typora+PicGo 搭建博客图床的步骤是什么？ - 知乎
如果需要配置国内CDN加速，可以参考使用腾讯云CDN加速Cloudflare-R2

自定义头部

/* 显示站点运行时间的代码，请自行修改建站日期 */
<script>
	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(); // 初始化时间显示
</script>
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.3.0/css/fontawesome.min.css" media='all'>
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<link href="https://npm.elemecdn.com/font6pro@6.3.0/css/all.min.css" rel="stylesheet">
/* 获取访客ip */
<script src="https://cdn.jsdmirror.cn/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("这里改成你的背景图链接") !important;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center;
}
/*夜间背景图*/
 .hope-ui-dark {
    background-image: url("这里改成你的背景图链接") !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

<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>

自定义内容

<!--延迟加载-->
<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代码为

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代码为

fetch('https://api.vore.top/api/IPdata')
    .then(response => response.json())
    .then(data => {
        const ip = data.ipinfo.text;
        const province = data.ipdata.info1;
        const city = data.ipdata.info2;
        const isp = data.ipdata.isp;
        const area_code = data.ipinfo.cnip;
        const nation = data.ipdata.info1;
        let welcomeMessage;
        if (area_code) {
            welcomeMessage = `欢迎${province}${city}${isp} (IP: ${ip}) 的小伙伴访问本站`;
        } else {
            welcomeMessage = `欢迎${nation}${isp} (IP: ${ip}) 的小伙伴访问本站`;
        }
        document.getElementById('welcome').textContent = welcomeMessage;
    })
    .catch(error => console.error(error));

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

我将引用的部分放在了自定义头部

其他优化

修改AList静态资源CDN

以脚本直接安装为例

nano /opt/alist/data/config.json

修改CDN字段如下

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

然后重启AList使配置生效

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

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

修改音频封面为

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