Alist 美化指南
以下为 V3 指南, V2在最底下
窗口透明
<style>
.hope-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;
}
.obj-box {
border-radius: 15px !important;
}
.hope-ui-light .obj-box {
background-color: #ffffff70 !important;
}
.hope-c-PJLV .hope-c-PJLV-ikSuVsl-css {
border-radius: 15px !important;
background-color: #ffffff70 !important;
}
.hope-c-PJLV .hope-c-PJLV-ibtHApG-css {
border-radius: 15px !important;
background-color: #ffffff70 !important;
}
</style>
看板娘
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!-- 看板娘 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
鼠标点击效果
<!--鼠标点击效果-->
<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/maodian.js"></script>
Aplayer、Meting
<!-- aplayer、meting -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<!-- 不显示歌词 -->
<script>
function removelrc() {
//检测是否存在歌词按钮
if (!document.querySelector(".aplayer-icon-lrc"))
return;
else
{
//触发以后立刻移除监听
document.removeEventListener("DOMNodeInserted",removelrc);
//稍作延时保证触发函数时存在按钮
setTimeout(function() {
//以触发按钮的方式隐藏歌词，防止在点击显示歌词按钮时需要点击两次才能出现的问题
document.querySelector(".aplayer-icon-lrc").click();
}, 1);
console.log("success");
return;
}
}
document.addEventListener('DOMNodeInserted', removelrc)
</script>
Meting Body部分
<meting-js
server="netease"
type="playlist"
id="7292043675"
fixed = true
>
</meting-js>
<!-- 吸附边缘 css -->
<style>
.aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow,
.aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow .aplayer-body {
left: -66px !important;
}
.aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow:hover .aplayer-body {
left: 0 !important;
}
</style>
Nnplayer
<script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>
备案信息 及 图标颜色
<!--备案信息-->
</style>
<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:15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
<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>
<span class="nav-item" style="margin-bottom: 5px;">
<a class="nav-link" href="https://cloud1.waite.wang/@manage" target="_blank">
<i class="fa fa-gear" style="color:#9932CC;" aria-hidden="true"></i>
管理后台
</a>
</span> <br/>
<span class="nav-item">
<a class="nav-link" href="https://waite.wang/" target="_blank">
<i class="fa-solid fa-copyright" style="color:#9932CC" aria-hidden="true"></i>
2022 WAITE.WANG |
</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 备 2022028437 号
</a>
</span>
</div>
<br />
</div>
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
</script>
</font>
<style type="text/css">
.footer {
display: none !important;
}
.hope-c-ivMHWx-dvmlqS-cv {
color: #9932CC !important;
}
.hope-c-PJLV-igVoCQk-css {
color: #9932CC !important;
}
.hope-c-PJLV-ilcHcHe-css {
color: #9932CC !important;
}
.hope-c-PJLV-ieavQQG-css {
color: #9932CC !important;
}
</style>
运行时间
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("8/24/2022 10:28:00");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();
</script>
<span id="runtime_span"></span>
网站访问量
<!-- 访问量 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
自用一手设置
</style>
<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:15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
<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>
<span class="nav-item" style="margin-bottom: 5px;">
<a class="nav-link" href=@manage target="_blank">
<i class="fa fa-gear" style="color:#9932CC;" aria-hidden="true"></i>
管理后台
</a>
</span>
<br/>
<span class="nav-item">
<a class="nav-link" href="https://waite.wang/" target="_blank">
<i class="fa-solid fa-copyright" style="color:#9932CC" aria-hidden="true"></i>
2022 WAITE.WANG |
</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 备 2022028437 号
</a>
</span>
<br/>
<span class="nav-item" style="margin-bottom: 5px;">
<i class="fa fa-camera-retro" style="color:#9932CC;" aria-hidden="true"></i>
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次 |
</a>
</span>
<span class="nav-item">
<i class="fa fa-clock" style="color:#9932CC" aria-hidden="true"></i>
<span id="runtime_span"></span>
</span>
</div>
<br />
<meting-js
list-folded="true"
server="netease"
type="playlist"
id="7292043675"
fixed = true
>
</meting-js>
</div>
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
function removelrc() {
//检测是否存在歌词按钮
if (!document.querySelector(".aplayer-icon-lrc"))
return;
else
{
//触发以后立刻移除监听
document.removeEventListener("DOMNodeInserted",removelrc);
//稍作延时保证触发函数时存在按钮
setTimeout(function() {
//以触发按钮的方式隐藏歌词，防止在点击显示歌词按钮时需要点击两次才能出现的问题
document.querySelector(".aplayer-icon-lrc").click();
}, 1);
console.log("success");
return;
}
}
document.addEventListener('DOMNodeInserted', removelrc)
</script>
<!-- 访问量 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("8/24/2022 10:28:00");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();
</script>
<!-- aplayer、meting -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<!--鼠标点击效果-->
<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/maodian.js"></script>
<!-- nplayer -->
<script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>
</font>
<style type="text/css">
.footer {
display: none !important;
}
.hope-c-ivMHWx-dvmlqS-cv {
color: #9932CC !important;
}
.hope-c-PJLV-igVoCQk-css {
color: #9932CC !important;
}
.hope-c-PJLV-ilcHcHe-css {
color: #9932CC !important;
}
.hope-c-PJLV-ieavQQG-css {
color: #9932CC !important;
}
.hope-ui-light {
background-image: url("https://img.waite.wang/images/2022/11/05/Artic-Sunset-small.png") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}
.obj-box {
border-radius: 15px !important;
}
.hope-ui-light .obj-box {
background-color: #ffffff70 !important;
}
.hope-c-PJLV .hope-c-PJLV-ikSuVsl-css {
border-radius: 15px !important;
background-color: #ffffff70 !important;
}
.hope-c-PJLV .hope-c-PJLV-ibtHApG-css {
border-radius: 15px !important;
background-color: #ffffff70 !important;
}
.hope-c-ivMHWx-dvmlqS-cv{
border-radius: 15px !important;
background-color: #ffffff70 !important;
}
.left-toolbar.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ijgzmFG-css {
border-radius: 15px !important;
background-color: #ffffff70 !important;
}
.aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow,
.aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow .aplayer-body {
left: -66px !important;
}
.aplayer.aplayer-withlist.aplayer-fixed.aplayer-narrow:hover .aplayer-body {
left: 0 !important;
}
</style>
Body
<meting-js
auto = "https://y.qq.com/n/ryqq/playlist/2970622459.html"
fixed = true
>
</meting-js>
本文是原创文章，采用 CC BY-NC-ND 4.0 协议，完整转载请注明来自 Waite
阅读建议
评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
