Alist V3/OpenList V3页面元素修改
通过 Alist V3 或 OpenList V3 构建网盘管理网站，很多人想修改页面元素的样式，比如网页背景、字体，去除底部版权申明（不建议）、按钮等。
本文会列举一些修改方法，方法来自网络，我略有修改，来源见文章底部。
可以通过 CSS 隐藏页面底部的“由 AList 驱动和管理”文字。
在自定义头部输入框添加以下内容：
<style>
/* 隐藏页面底部的由 AList 驱动和管理 */
.footer .hope-stack { display: none; }
</style>登录链接隐藏了，仍然可以通过 http://ip:5244/@manage 或 http://ip:5244/@login 进入 AList 管理页面。
也可以通过添加页面元素显示登录链接，在自定义底部输入框添加以下内容：
<div style="width:100%;text-align: center;"><a href="http://ip:5244/@login ">登录</a></div>更多样式修改
<style>
/* 自定义背景图片 */
body {background: url("图片地址") 0 0/cover;}
/* 文件列表的不透明度，根据需要调整 */
.obj-box.hope-stack { opacity: 0.8; }
/* 去除通知栏 右上角 X */
.notify-render .hope-close-button {display: none;}
/*白天背景图*/
.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.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;
}
/*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;
}
/*顶部右上角切换按钮透明 第一个是白天 第二个是夜间*/
.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;
}
/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
.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;
}
/*白天模式代码块透明*/
.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;
}
/*底部CSS，.App .table这三个一起的*/
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;
}
/*全局字体*/
* {font-family:LXGW WenKai}
* {font-weight:bold}
body {font-family: LXGW WenKai;}
/*渐变背景CSS*/
#canvas-basic {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -999;
}
/* 隐藏右侧操作按钮 */
/* 隐藏 本地设置 */
svg[tips="local_settings"] { display: none; }
/* 隐藏 开关复选框 */
svg[tips="toggle_checkbox"] { display: none; }
/* 隐藏 离线下载 */
svg[tips="offline_download"] { display: none; }
/* 隐藏 上传 */
svg[tips="upload"] { display: none; }
/* 隐藏 批量重命名 */
svg[tips="batch_rename"] { display: none; }
/* 隐藏 移除空的子目录 */
svg[tips="remove_empty_directory"] { display: none; }
/* 隐藏 聚合移动 */
svg[tips="recursive_move"] { display: none; }
/* 隐藏 新建目录 */
svg[tips="mkdir"] { display: none; }
/* 隐藏 新建文件 */
svg[tips="new_file"] { display: none; }
/* 隐藏 刷新 */
svg[tips="refresh"] { display: none; }
/*看板娘，自定义大小，隐藏对话框和对话框高度*/
#waifu #live2d {
height: 350px!important;
width: 350px!important;
}
#waifu-tips {
top: -60px;
/*display:none !important;隐藏对话框*/
}
</style>也可以引入其他脚本和文件
<!--看板娘加载指定模型-->
<script>
localStorage.setItem('modelId', '7');
localStorage.setItem('modelTexturesId', '3');
</script>
<script src="https://api.itggg.cn/live2dnew/left/index.js"></script>
<!--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" />
<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css" media='all'>
<link href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css" rel="stylesheet">
<!-- 网页鼠标点击特效 - 核心价值观关键字-->
<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>本文转载自：https://miyalian.com/index.php/archives/29.html
上述示例引入的文件，请自行判断安全性。
