AList 网盘存储列表美化记录
开源项目 AList 疑似被卖给商业公司，请各位谨慎更新版本及考虑继续使用！！！
AList 是一个支持多存储的文件列表程序，我的 AList 站点基于 Docker 部署在 NAS 中，由 AList V3.30.0 提供强力驱动。本文将详细介绍我的 AList 站点美化方案，同时，由于我的站点仅供内部使用，所以未添加音乐播放器、猫娘、计数器和评论等功能。
一、自定义头部
食用方法：找到 管理 -> 设置 -> 全局 -> 自定义头部 修改添加下面代码即可，由于自定义头部代码大部分为 CSS 代码，因此 CSS 代码需要按照下面方式添加到自定义头部中：
<!-- Alist V3建议添加的，已经默认添加了，如果你的没有建议加上 -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<!-- 引入字体，全局字体使用 -->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<!-- 创建一个style标签，把所有CSS样式放入即可 -->
<style>
/* 在这里添加 CSS 样式 */
</style>如果添加音乐播放器、猫娘、计数器和评论等功能，可能需要引入更多的 js 文件，请自行设置。
1.移除搜索中的快捷键
移除搜索中的快捷键
/* 移除搜索中的快捷键 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {
display: none !important;
}2.移除整个搜索按钮
移除整个搜索按钮
/* 移除整个搜索按钮 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikEIIxw-css {
display: none !important;
}3.搜索按钮改透明效果
搜索按钮改透明 - 毛玻璃效果
/* 搜索按钮改透明毛玻璃效果-亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
background: rgba(255, 255, 255, 0.2)!important;
backdrop-filter: blur(10px)!important;
}
/* 搜索按钮改透明毛玻璃效果-暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
background: rgb(0 0 0 / 10%)!important;
backdrop-filter: blur(10px)!important;
}搜索按钮改透明 - 非毛玻璃效果
/* 搜索按钮改透明非毛玻璃效果-亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
background: rgba(255, 255, 255, 0.2)!important;
}
/* 搜索按钮改透明非毛玻璃效果-暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
background: rgb(0 0 0 / 10%)!important;
}4.搜索栏透明美化效果
搜索栏透明美化 - 毛玻璃效果
/* 搜索主体透明毛玻璃效果 - 亮色 */
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
background-color: rgba(255,255,255,0.2)!important;
backdrop-filter: blur(10px)!important;
}
/* 搜索栏输入框透明毛玻璃效果 - 亮色 */
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
background-color: rgba(255,255,255,0.2)!important;
backdrop-filter: blur(10px)!important;
}
/* 搜索按钮透明毛玻璃效果 - 亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
background-color: rgba(255,255,255,0.2)!important;
backdrop-filter: blur(10px)!important;
padding: var(--hope-space-1)!important;
}
/* 搜索主体透明毛玻璃效果 - 暗色 */
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
background-color: rgb(0 0 0 / 10%)!important;
backdrop-filter: blur(10px)!important;
}
/* 搜索栏输入框透明毛玻璃效果 - 暗色 */
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
background-color: rgb(0 0 0 / 10%)!important;
backdrop-filter: blur(10px)!important;
}
/* 搜索按钮透明毛玻璃效果 - 暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
background-color: rgb(0 0 0 / 10%)!important;
backdrop-filter: blur(10px)!important;
padding: var(--hope-space-1)!important;
}
搜索栏透明美化 - 非毛玻璃效果
/* 搜索主体透明非毛玻璃效果 - 亮色 */
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
background-color: rgba(255,255,255,0.2)!important;
}
/* 搜索栏输入框透明非毛玻璃效果 - 亮色 */
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
background-color: rgba(255,255,255,0.2)!important;
}
/* 搜索按钮透明非毛玻璃效果 - 亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
background-color: rgba(255,255,255,0.2)!important;
padding: var(--hope-space-1)!important;
}
/* 搜索主体透明非毛玻璃效果 - 暗色 */
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
background-color: rgb(0 0 0 / 10%)!important;
}
/* 搜索栏透明非毛玻璃效果 - 暗色 */
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
background-color: rgb(0 0 0 / 10%)!important;
}
/* 搜索按钮透明非毛玻璃效果 - 暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
background-color: rgb(0 0 0 / 10%)!important;
padding: var(--hope-space-1)!important;
}5.视图切换按钮改透明
视图切换按钮改透明
/* 视图切换按钮改透明-亮色 */
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
background-color: rgba(255, 255, 255, 0.3)!important;
}
/* 视图切换按钮改透明-暗色 */
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
background-color:rgb(0 0 0 / 10%)!important;
}6.移除网站图标与搜索/切换按钮
移除网站图标与搜索/切换按钮
/* 移除网站图标与搜索/切换按钮 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css {
display: none!important;
}7.移除站点公告关闭按钮
移除站点公告关闭按钮
/* 移除站点公告关闭按钮 */
.notify-render .hope-close-button{
display: none;
}8.文字超长自动换行
文字超长自动换行
/* 文字超长自动换行 */
.name-box .name {
white-space: unset !important;
overflow: unset !important;
}9.自定义网站背景图
自定义网站背景图
/* 自定义网站背景图-亮色-GIF可用 */
.hope-ui-light {
background-image: url("https://s3.bmp.ovh/imgs/2024/02/12/5700b0ceb8cc8c39.jpeg") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}
/* 自定义网站背景图-暗色-GIF可用 */
.hope-ui-dark {
background-image: url("https://s3.bmp.ovh/imgs/2024/02/12/e137914b0749d93d.jpg") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}10.主列表透明
主列表透明
/* 主列表透明-亮色 */
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.5)!important;
}
/* 主列表透明-暗色 */
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
background-color: rgb(0 0 0 / 50%)!important;
}11.README 透明
README 透明
/* README 透明-亮色 */
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
background-color: rgba(255, 255, 255, 0.5)!important;
}
/* README 透明-暗色 */
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
background-color: rgb(0 0 0 / 50%)!important;
}12.侧边栏按钮透明
侧边栏按钮透明
/* 侧边栏按钮透明-亮色 */
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
background-color: rgba(255, 255, 255, 0.5)!important;
}
/* 侧边栏按钮透明-暗色 */
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
background-color: rgb(0 0 0 / 50%)!important;
}13.代码块透明
代码块透明
/* 代码块透明-亮色 */
.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;
}14.移除底部信息
移除底部信息
/* 移除底部信息 */
.footer {
display: none !important;
}15.设置全局字体
设置全局字体
/* 设置全局字体 */
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}16.隐藏登陆 LOGO 图标
隐藏登陆 LOGO 图标
/* 隐藏登陆 LOGO 图标 */
.hope-c-PJLV-ibwASZs-css{
display: none;
}17.自定义鼠标样式
自定义鼠标样式
<!-- 较为个性化的鼠标指针样式，可结合个人需要自行修改 -->
<style>
body {
cursor: url(http://xxx/teacher_u20221021b3a89013_1666841028833_10660845_file.cur), default;
}
select{
cursor: url(http://xxx/teacher_u2021090299b56677_1666842679271_10490748_file.cur), pointer;
}
button,a:hover{
cursor: url(http://xxx/teacher_u20221017ac9f1124_1666842626270_11086578_file.cur), pointer;
}
input{
cursor:url(http://xxx/teacher_u2021090299b56677_1666842633386_14976764_file.cur), text;
}
textarea,input:focus{
cursor:url(http://xxx/teacher_u202210176ba36766_1666842640146_15845280_file.cur), text;
}
code{
cursor: url(http://xxx/teacher_u20221021b3a89013_1666842646779_15864973_file.cur), default;
}
pre>code{
cursor: url(http://xxx/teacher_u202210176ba36766_1666842653500_10010236_file.cur), default;
}
</style>二、自定义内容
食用方法：找到 管理 -> 设置 -> 全局 -> 自定义内容 修改添加下面代码即可
1.延迟加载
延迟加载
<!-- 延迟加载 -->
<div id="customize" style="display: none;">
<!-- 如果要写自定义内容建议都加到这个延迟加载的范围内 -->
</div>
<!-- 延迟加载范围到这里结束 -->
<!-- 延迟加载配套使用 JS -->
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
</script>2.网页鼠标点击特效
网页鼠标点击特效 - 核心价值观关键字
<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script>
(function() {
var a_idx = 0;
window.onclick = function(event) {
var a = new Array("🎉富强🎉", "🐳民主🐳", "⛅文明⛅", "🤖和谐🤖",
"🎉自由🎉", "🐳平等🐳", "⛅公正⛅", "🤖法治🤖",
"🎉爱国🎉", "🐳敬业🐳", "⛅诚信⛅", "🤖友善🤖");
var heart = document.createElement("b"); //创建 b 元素
heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
document.body.appendChild(heart).innerHTML = a[a_idx]; //将 b 元素添加到页面上
a_idx = (a_idx + 1) % a.length;
heart.style.cssText = "position: fixed;left:-100%;"; //给 p 元素设置样式
var f = 13,
// 字体大小
x = event.clientX - f / 2 - 30,
// 横坐标
y = event.clientY - f,
// 纵坐标
c = randomColor(),
// 随机颜色
a = 1,
// 透明度
s = 0.8; // 放大缩小
var timer = setInterval(function() { //添加定时器
if (a <= 0) {
document.body.removeChild(heart);
clearInterval(timer);
} else {
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";
y--;
a -= 0.016;
s += 0.002;
}
},
15)
}
// 随机颜色
function randomColor() {
return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";
}
} ());
</script>网页鼠标点击特效 - 爱心
<!-- 网页鼠标点击特效 - 爱心 -->
<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>3.添加站点运行时间
添加站点运行时间
注意将其放在延迟加载中，同时由于本站的底部内容全部隐藏，所以在运行时间前面的图标上加了个跳转后台管理的超链接。
<!--开站时间开始-->
<center><br/>
<span class="nav-item"></span>
<span id="timeDate">🤖 载入天数...</span>
<span id="times">✨载入时间...</span>
<script language="javascript">
var now = new Date();
function createtime(){
var grt = new Date("02/05/2024 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 = "<a href='/@manage' class='link'>🤖</a> 本站已稳定运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
</script>
</center>4.渐变背景
渐变背景
① 添加自定义头部
/* 渐变背景 CSS */
#canvas-basic {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -999;
}② 添加自定义内容
<!-- 渐变背景初始化，如果要使用渐变背景把下面的那一行注释去掉即可-->
<!--<canvas id="canvas-basic"></canvas> -->
<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
<script>
var granimInstance = new Granim({
element: '#canvas-basic',
direction: 'left-right',
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#a18cd1', '#fbc2eb'],
['#fff1eb', '#ace0f9'],
['#d4fc79', '#96e6a1'],
['#a1c4fd', '#c2e9fb'],
['#a8edea', '#fed6e3'],
['#9890e3', '#b1f4cf'],
['#a1c4fd', '#c2e9fb'],
['#fff1eb', '#ace0f9']
]
}
}
});
</script>