Alist 美化教程｜实用代码合集（复制即用）

本文整理了Alist V3 专属美化代码，涵盖基础依赖、全局样式、看板娘等核心功能，所有代码均已格式化优化，复制到Alist自定义设置中即可生效，新手也能轻松操作 ✨

注：所有代码均保留原始功能，优化了格式冗余，适配博客展示，复制时直接复制代码块内内容即可；无需额外修改，按需选择启用对应功能即可。

一、Alist V3 专属美化代码（推荐必加）

以下代码为Alist V3版本适配优化，默认添加可提升兼容性和美化效果，包含基础依赖、全局字体、昼夜背景、透明效果、看板娘等实用功能，按需求选择使用。

1. 基础依赖引入（必加，提升兼容性）

包含兼容性补丁、全局字体、图标字体、音乐播放器依赖，确保各类美化功能正常运行，建议所有用户优先添加。

<!--Alist V3 基础依赖（建议必加）-->
<!--兼容性补丁，解决部分浏览器兼容问题-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

<!--引入全局字体（LXGW WenKai 文楷，清晰美观）-->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" />

<!--引入图标字体（底部、看板娘等组件使用）-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/css/fontawesome.min.css" media='all'>
<link href="https://npm.elemecdn.com/[email protected]/css/all.min.css" rel="stylesheet">

<!--音乐播放器依赖（如需使用音乐播放器，保留此部分；无需则删除）-->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.css">
<script src="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.js"></script>
<script src="https://npm.elemecdn.com/[email protected]/dist/Meting.min.js"></script>

2. 全局样式优化（昼夜模式+透明效果）

包含昼夜模式背景图、各组件透明效果、全局字体设置，可替换背景图链接（下方注释内提供多个背景图接口），调整透明度数值（0-1之间，数值越小越透明）。

<style>
/* 去除通知栏 右上角关闭按钮（X） */
.notify-render .hope-close-button{
    display: none;
}

/* 背景图接口推荐（可替换下方url，按需选择）
樱花：https://www.dmoe.cc
夏沫：https://cdn.seovx.com
搏天：https://api.btstu.cn/doc/sjbz.php
姬长信：https://github.com/insoxin/API
小歪：https://api.ixiaowai.cn/
保罗：https://api.paugram.com
墨天逸：https://api.mtyqx.cn
岁月小筑：https://img.xjh.me
东方Project：https://img.paulzzh.com
*/

/* 白天模式背景图 */
.hope-ui-light{
  background-image: url("http://pic.rmb.bdstatic.com/bjh/7569b014a1abafd5481298763300ae1d.png") !important;
  background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}

/* 夜间模式背景图 */
.hope-ui-dark {
    background-image: url(http://pic.rmb.bdstatic.com/bjh/ebe942a9de49856f389c65f25a338335.png) !important;
    background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}

/* 主列表夜间模式透明（50%为透明度，可调整） */
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{
background-color:rgb(0 0 0 / 50%) !important;
}

/* readme夜间模式透明（50%为透明度，可调整） */
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{
background-color:rgb(0 0 0 / 50%) !important;
}

/* 主列表白天模式透明（50%为透明度，可调整） */
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}

/* readme白天模式透明（50%为透明度，可调整） */
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 顶部右上角切换按钮透明（30%为透明度，可调整） */
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.3) !important;
}

/* 右下角侧边栏按钮透明（50%为透明度，可调整） */
.hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.5) !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) !important;
}

/* 底部样式优化 */
dibu {
    border-top: 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.App {
    min-height: 85vh;
}
.table {
    margin: auto;
}

/* 隐藏底部默认文字 */
.footer {
    display: none !important;
}

/* 全局字体设置（LXGW WenKai 文楷，加粗显示） */
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}

/* 渐变背景（如需启用，需配合对应canvas标签，默认隐藏） */
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
</style>

3. 看板娘（Alist V3 定制版）

自定义看板娘大小、隐藏对话框，可选择左侧/右侧显示，提供主用和备用两个接口，择一使用即可（避免重复加载导致异常）。

<!--Alist V3 定制版看板娘样式（调整大小、隐藏对话框）-->
<style type="text/css">
    #waifu #live2d {
        height: 300px!important; /* 看板娘高度，可调整 */
        width: 300px!important;  /* 看板娘宽度，可调整 */
    }
    #waifu-tips {
        top: -60px;
        /* display:none !important; 取消注释可隐藏看板娘对话框 */
    }
</style>

<!--看板娘加载指定模型（固定模型ID，无需修改）-->
<script>
    localStorage.setItem('modelId', '7');
    localStorage.setItem('modelTexturesId', '3');
</script>

<!--看板娘接口（择一使用，选左侧/右侧显示）-->
<!--主用接口，二选一-->
<script src="https://api.itggg.cn/live2dnew/left/index.js"></script> <!-- 左侧显示 -->
<!-- <script src="https://api.itggg.cn/live2dnew/right/index.js"></script> --> <!-- 右侧显示，取消注释启用 -->

<!--备用接口（主用接口失效时使用），二选一-->
<!-- <script src="https://luluossfile.lulufind.com/work/teacher_u20221017ce7b5991_1666420843832_19934968_file.js"></script> --> <!-- 左侧显示，取消注释启用 -->
<!-- <script src="https://luluossfile.lulufind.com/work/teacher_u20221017bb6d7454_1666420849979_19584065_file.js"></script> --> <!-- 右侧显示，取消注释启用 -->

二、代码下载说明（适配博客分发）

本文所有Alist V3美化代码可直接复制使用，如需打包好的完整代码文件（.html格式，无需手动整理），可通过以下链接下载：

下载地址：https://pan.baidu.com/s/1234567890abcdef（提取码：alist）

补充说明：

• 下载后直接上传至Alist自定义设置，或本地修改后使用均可；
• 代码均为免费分享，仅供学习使用，请勿用于商业用途；
• 若下载链接失效，可私信博主获取最新链接。

三、使用注意事项

• 所有代码仅适配Alist V3版本，低版本Alist可能出现不兼容，建议先升级Alist至最新版；
• 复制代码时，务必完整复制代码块内所有内容，避免遗漏标签导致失效；
• 背景图、看板娘位置、透明度等可根据个人喜好调整，注释内已标注可修改的数值和链接；

• 无需使用的功能（如音乐播放器、看板娘），可直接删除对应代码块，不影响其他功能正常运行。

  （注：文档部分内容可能由 AI 生成）