Alist美化
Docker

Alist美化

美化一下丑丑的Alist主页吧

自定义头部

<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

<!--引入字体，全局字体使用-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap" rel="stylesheet">

<!--评论系统使用的js-->
<script src='https://unpkg.com/valine/dist/Valine.min.js'></script>

<!--不蒜子计数器-->
<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>

<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.3.0/css/fontawesome.min.css" media='all'>
<link href="https://npm.elemecdn.com/font6pro@6.3.0/css/all.min.css" rel="stylesheet">

<!--音乐播放器所用的文件-->
<!-- require APlayer -->
<link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://npm.elemecdn.com/meting2@0.0.1/js/Meting.min.js"></script>

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

/*鼠标*/
body {
    cursor: url(https://raw.githubusercontent.com/mocchen/cssmeihua/mochen/a.cur), default;
}

/* 此选项两处CSS 在v3.31.0中已优化 滚动显示 和 右下角设置网格模式尺寸大小 */
/* 文字超长自动换行 */
/*.name-box .name {
    white-space: unset !important;
    overflow: unset !important;
}*/
/* 缩略图图片变大 代码中的160px 自己改 现在是注释状态若需要自行解除注释 */
.obj-box > div {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
.obj-box > div .item-thumbnail{
  height: 100px;
}*/
 
/*
  图片API用法点进去都会有食用说明的,API来自网络不保证实效性稳定性自己测试
  https://api.hanximeng.com/ranimg/api.php
  https://cdn.seovx.com/d/?mom=302
  https://github.com/insoxin/API
  https://api.paugram.com
  https://img.xjh.me
  https://api.vvhan.com/api/wallpaper/acg
  */
 
/*白天背景图*/
 .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;
}
/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}
/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}
/*白天模式 搜索按钮*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background: rgba(255,255,255,0)!important;
}
/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}
/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}
/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!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-c-hrsMRY.hope-c-PJLV.hope-c-PJLV-idaeksS-css{
background-color: rgba(255, 255, 255, 0) !important;
}
/*顶部右上角切换按钮透明*/
 .hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color:rgb(0 0 0 / 50%) !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;
}
/*左侧侧边栏目录*/
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-ieGWMbI-css {
    background: rgba(255, 255, 255, 0.5) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
    background-color:rgb(0 0 0 / 50%) !important;
}
/* 返回顶部 */
 .hope-c-PJLV-ihVEsOa-css {
    background: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
    background-color:rgb(0 0 0 / 50%) !important;
}
/*正常情况未使用吸附功能*/
/*顶部*/
 .hope-c-PJLV-ikaMhsQ-css {
    background: rgba(255, 255, 255, 0) !important;
}
/*导航条*/ 
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-idaeksS-css {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-idaeksS-css {
    background-color:rgb(0 0 0 / 50%) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/* 吸附到页面顶部 */
/*顶部*/
 .hope-c-PJLV-icWrYmg-css {
    background: rgba(255, 255, 255, 0) !important;
}
/*导航条*/
 .hope-c-PJLV-icKsjdm-css::after {
    background: rgba(255, 255, 255, 0) !important;
}
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-icKsjdm-css {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-icKsjdm-css {
    background-color:rgb(0 0 0 / 50%) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*仅吸附导航栏*/
/*导航条*/
 .hope-c-PJLV-ifdXShc-css::after {
    background: rgba(255, 255, 255, 0) !important;
}
/*白天模式*/
 .hope-ui-light .hope-c-hrsMRY {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-hrsMRY {
    background-color:rgb(0 0 0 / 50%) !important;
    border-radius: var(--hope-radii-xl) !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;
}
/*以下为评论系统专用*/
/*适配大小契合度*/
 .newValine {
    width: min(96%, 940px);
    flex-direction: column;
    row-gap: var(--hope-space-2);
    border-radius: var(--hope-radii-xl);
    padding: var(--hope-space-2);
    box-shadow: var(--hope-shadows-lg);
}
/*评论区 - 白天模式透明度*/
 .hope-ui-light .newValine {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
/*评论区 - 夜间模式透明度*/
 .hope-ui-dark .newValine {
    background-color:rgb(0 0 0 / 50%) !important;
}
/*输入栏里面跳舞的小人背景图*/
 .vedit {
    background-image:url("https://cdn.jsdelivr.net/gh/anwen-anyi/imgAnwen/images/OuNiJiang.gif");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:right bottom;
    transition:all 0.25s ease-in-out 0s;
}
textarea#comment-textarea:focus {
    background-position-y:120px;
    transition:all 0.25s ease-in-out 0s;
}

/*渐变背景CSS*/
 #canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
</style>

<!--live2d--> 
<script src="https://cdn.jsdelivr.net/npm/greensock@1.20.2/dist/TweenLite.js"></script>
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.js"></script>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio_sdk4.js"></script>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/load.js"></script>

自定义内容

<!-- 免责声明 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script>
swal({
  title: "免责申明",
  text: "本站所展示内容均收集于网络\n\n仅供本人学习研究及收藏存档\n\n如有侵犯权益敬请联系我删除",
  html: "true",
  icon: "warning",
  dangerMode: true,
  closeOnEsc: false,
  closeOnClickOutside: false,
  button: {
    text: "OK",
  },
})
</script>

<!--评论模块-->
<!--前往https://gravatar.com设置头像-->
<!--前往https://console.leancloud.cn获取APPID%KEY-->
<center>
<div class="newValine" id="vcomments"></div>
</center>
<script>
new Valine({
visitor: true,
el: '#vcomments',
avatar: '',
appId: '',
appKey: '',
placeholder: "有什么问题欢迎评论区留言~"
}) 
</script>

<!-- 渐变背景 -->
<canvas id="canvas-basic"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/2.0.0/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>

<!--开站时间-->   
<center>
<br />
</span>
<span class="nav-item">
<div style="text-align: center; color: black; font-size: 12px;">
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> <script language="javascript"> 
var now = new Date();
function createtime(){
    var grt= new Date("09/20/2023 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 = "📆本站已稳定运行"+dnum+"天";
    document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
}
setInterval("createtime()",250); 
</script> 

<!--禁止右键和F12-->
<script>
  // 禁用鼠标右键
document.oncontextmenu = function () { return false; };
  // 鼠标左键选择文本功能
document.onselectstart = function () { return false; };
document.onkeydown = function (e) {
  // 禁用Shift键
  if (e.eshiftKey) {
    e.preventDefault();
    return false;
  }
  // 禁用F12键
  if (window.event && window.event.keyCode == 123) {
    event.keyCode = 0;
    event.returnValue = false;
    return false;
  }
};
</script>

<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<!--一言句子-->
<div id="customize" style="display: none; text-align: center; color: black; font-size: 12px;">
<script src="//api.dzzui.com/api/yiyan?format=js"></script>
</div>

<!--备案信息-->
<div style="text-align: center; color: black; font-size: 11px;">
<a class="Bth" href="/@manage" one-link-mark="yes"  target="_blank">Copyright © alist Inc. KLein® <a style="font:10px SimHei;">2023-2024 </a>
<!-- 访问量 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
已有 <span id="busuanzi_value_site_pv"></span> 人浏览过本站  <a class="Bth" href="https://icp.gov.moe/?keyword=20240337"  target="_blank">萌ICP备20240337号</a>
</div>

<!--延迟加载范围到这里结束-->

<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</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>

<!-- 默哀模式 -->
<body>
<script type="text/javascript">
    var date = new Date()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var message = "";
    if (month == 5 && day == 12) {
        message = "五一二汶川大地震悼念日，逝者安息";
    } else if (month == 4 && day == 4) {
        message = "新冠疫情国家哀悼日，致敬抗疫英雄";
    } else if (month == 7 && day == 7) {
        message = "卢沟桥事变纪念日，勿忘国耻！！！";
    } else if (month == 9 && day == 18) {
        message = "九一八事件纪念日，勿忘国耻！！！";
    } else if (month == 12 && day == 13) {
        message = "南京大屠杀国家公祭日，勿忘国耻！";
    }
    if (message !== "") {
        document.documentElement.setAttribute("theme-mode", "gray");
        var messageDiv = document.createElement("div");
        messageDiv.style.position = "fixed";
        messageDiv.style.left = "50%";
        messageDiv.style.top = "30%";
        messageDiv.style.transform = "translate(-50%, -50%)";
        messageDiv.style.padding = "30px";
        messageDiv.style.zIndex = "1000";
        messageDiv.style.opacity = "1";  // 透明度
        messageDiv.style.fontFamily = "Microsoft YaHei";
        messageDiv.style.fontSize = "48px";
        messageDiv.innerText = message;
        document.body.appendChild(messageDiv);

        // 设置三秒后移除 div
        setTimeout(function() {
            document.body.removeChild(messageDiv);
        }, 12000);
    }
</script>
<style type="text/css">
    html[theme-mode="gray"] {
        /*webkit*/
        -webkit-filter: grayscale(100%);
        /*firefox*/
        -moz-filter: grayscale(100%);
        /*ie9*/
        -ms-filter: grayscale(100%);
        /*opera*/
        -o-filter: grayscale(100%);
        /*ie*/
        filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
</style>
</body>

添加一个嘉然看板娘

上面代码里的live2d有时候会非常卡无法正常加载，遂有了自己重新部署一个的想法。

把下面代码插入至自定义内容内即可

<!--嘉然live2d--> 
<script src="https://*.cn/live2d/TweenLite.js"></script>
<script src="https://*.cn/live2d/live2dcubismcore.min.js"></script>
<script src="https://*.cn/live2d/pixi.min.js"></script>
<script src="https://*.cn/live2d/cubism4.min.js"></script>
<link href="https://*.cn/live2d/pio.css" rel="stylesheet" type="text/css"/>
<script src="https://*.cn/live2d/pio.js"></script>
<script src="https://*.cn/live2d/pio_sdk4.js"></script>
<script src="https://*.cn/live2d/load.js"></script>

# 使用CF免费R2存储桶提供的存储，把源码文件上传至存储桶设置一下跨域访问就行。

源码文件下载：live2d源码文件.zip

教程
LICENSED UNDER CC BY-NC-SA 4.0
Comment