用Alist V3已经几个月了,美化也一直在做,不喜欢那些花里胡哨的美化代码。今天,古哥给大家带来Alist V3比较素雅的美化代码。主要是,隐藏了底部版权信息(由 AList 驱动|登录),添加了备案号,网站名称,管理员后台地址等信息。此外,还有建站时长等。希望可以打给大家一定的参考意义,我是不喜欢别人直接拿着代码复制,不经过任何加工的。
Alist管理界面,设置,全局设置,自定义内容中,插入如下代码:
<div class="copyright" align="center"><div class="about"><p>
<span class="name">© 2020-2023</span><span class="link"><a href="https://iymark.com">冰沫记</a></span><br class="phone"><br class="phone">
<span class="name">粤ICP备</span><span class="link"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener nofollow noopener">2020085709号</a></span><br class="pad"><br class="pad">
<span class="name">管理员</span><span class="link"><a href="https://pan.iymark.com/@manage" target="_blank" rel="noopener">古哥</a></span><br class="phone"><br class="phone">
<span class="name">云存储合作</span><span class="link"><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="noopener nofollow noopener">又拍云</a></span><br class="phone"><br class="phone">
<span class="name">服务器提供</span><span class="link"><a href="https://www.aliyun.com/activity?userCode=wq3yosh9" target="_blank" rel="noopener nofollow noopener">阿里云</a></span>
</p>
<div class="runtime">
<span id="runtime_span"></span>
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("2/24/2023 00:00: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 = "<span class=\"name\">稳定运行" + A + "天</span><span class=\"link\">" + B + "时" + C + "分" + D + "秒</span>"
}
show_runtime();
</script>
</div>
</div>
<div class="state"><p>免责声明:本站为个人网盘,网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的</p></div>
</div>
自定义头部中插入如下代码:
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<style>
.footer {
display: none!important;
}
body:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .3;
z-index: -1;
display: block;
position: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
content: '';
background-image: url(https://oss.iymark.com/2022/09/vback.jpg);
}
.hope-c-PJLV-ikSuVsl-css {
background: none!important;
}
.markdown-body a {
color: #000!important;
}
.hope-ui-dark .markdown-body a {
color: #fff!important;
}
.copyright .link {
padding: 4px;
background: #26517c;
border-radius: 0 8px 8px 0;
}
.copyright .name {
padding: 4px;
background: #fff;
border-radius: 8px 0 0 8px;
color:#000;
}
.copyright {
padding: 50px;
background: #2d3236!important;
}
.copyright a {
color: #fff;
}
br.phone, br.pad{
display:none;
}
@media (max-width: 891px){
br.pad {
display:block;
}
}
@media (max-width: 561px){
br.phone {
display:block;
}
}
.hope-c-PJLV-ieESZju-css {
display: none;
}
img.hope-c-PJLV-ibwASZs-css {
width: auto;
}
.hope-ui-dark .copyright .name {
background: #000;
}
.runtime {
margin-top: 20px;
color: #fff;
text-align: right!important;
}
.about, .state {
width: min(99%, 980px);
text-align: center;
padding-inline: 2%;
}
.state {
margin-top: 20px;
color:#fff;
}
</style>
详细操作过程如下图所示
其中,
- 自定义内容给出了主体功能的实现,具体的样子可以参照我的网盘:https://pan.iymark.com/。
- 自定义头部给出了所有用到的样式表,比如颜色的定义、位置的定义等等。
这里就不解释每个代码的具体意义了,如有不懂下方提问即可。或者,你看上水的网站代码了,发我网站,免费帮你扒到所有代码:包括功能性代码及样式表。
大体上说一下,你必须替换的内容吧:
- 自定义头部
body:before
部分给出了网站背景图,你需要替换成自己的图片地址 - 自定义内容中的前面几行,换成自己的文字及链接
原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/4219.html
评论列表(12条)
你好,可以帮忙扒代码吗?我想弄跟他一样的,进去之前弹窗提示需要输入密码,输入后才能进去
@9508:https://*********/ 这个网页(已有站长修改)
@9508:view-source:网址
浏览器查看源码
全扒了就行
@古哥: 我是小白 不太懂
@9508:浏览器访问刚刚一长串,第5-258行全部复制
@古哥:可以了,真的太感谢了,但是这个评论能删吗,我怕被打,哈哈哈哈哈哈哈
@9508:我可以把链接改掉,马上
登录界面是怎么修改的啊,有代码嘛?
@Phoenix:登录界面没做改动啊
@古哥:就是登录上的LOGO你是按原始分辨率做的?没改大小是吧。默认是登录到ALIST,你是怎么改了名字啊
@古哥:我改了图标大小,但是在登录界面还是显示异常,这个代码哪里改
@Phoenix:后台,站点标题,改了就行了