alist美化1 自定义头部<!--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" /> <!--评论系统使用的js--> <script src='https://unpkg.com/valine/dist/Valine.min.js'></script> <style> /* 去除通知栏 右上角 X */ .notify-render .hope-close-button{ display: none; } /*渐变背景CSS*/ #canvas-basic { position: fixed; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -999; backdrop-filter: blur(10px)!important; } /*顶部*/ #root > .header { background: rgba(255, 255, 255, 0); } /*导航条*/ /*白天模式*/ .hope-ui-light .body > .nav { background-color: rgba(255, 255, 255, 0.2); border-radius: var(--hope-radii-xl); } /*夜间模式*/ .hope-ui-dark .body > .nav { background-color: rgb(0 0 0 / 50%); border-radius: var(--hope-radii-xl); } /*隐藏导航条遮罩*/ .body > .nav::after { display: none; } /*主列表夜间模式透明，50%这数值是控制透明度大小的*/ .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{ background-color:rgb(0 0 0 / 50%) !important; } /*readme夜间模式透明，50%这数值是控制透明度大小的*/ .hope-c-PJLV.hope-c-PJLV-iiuDLME-css{ background-color:rgb(0 0 0 / 50%) !important; } /*主列表透明*/ .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css { background-color: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(10px)!important; } /*readme透明*/ .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{ background-color: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(10px)!important; } /*顶部右上角切换按钮透明*/ .hope-c-ivMHWx-hZistB-cv.hope-icon-button{ background-color: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(10px)!important; } /*右下角侧边栏按钮透明*/ .hope-c-PJLV-ijgzmFG-css{ background-color: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(10px)!important; } /*白天模式代码块透明*/ .hope-ui-light pre{ background-color: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(10px)!important; } /*夜间模式代码块透明*/ .hope-ui-dark pre { background-color: rgba(255, 255, 255, 0) !important; backdrop-filter: blur(10px)!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.2)!important; backdrop-filter: blur(10px)!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; backdrop-filter: blur(10px)!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;} /*以下为评论系统专用*/ /*适配大小契合度*/ .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.2) !important; border-width:0px; backdrop-filter: blur(10px)!important; } /*评论区 - 夜间模式透明度*/ .hope-ui-dark .newValine{ background-color:rgb(0 0 0 / 80%) !important; border-width:0px; backdrop-filter: blur(10px)!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.5s ease-in-out 0s; } textarea#comment-textarea:focus{ background-position-y:120px; transition:all 0.5s ease-in-out 0s; } </style>自定义内容<!--延迟加载--> <!--如果要写自定义内容建议都加到这个延迟加载的范围内--> <div id="customize" style="display: none;"> <div> <!--评论模块还有下面的script也是--> <center> <div class="newValine" id="vcomments"></div> </center> <script> new Valine({ visitor: true, el: '#vcomments', avatar: 'wavatar', appId: '这里填入appId', appKey: '这里填入appKey', placeholder: "有什么问题欢迎评论区留言" }) </script> <br /> <center class="dibu"> <div style=" line-height: 20px;font-size: 9pt;font-weight: bold;"> <span> " <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto"> <a href="#" id="hitokoto_text"> "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人." </a> </span> " </span> <p style="margin-left: 10rem;font-size: 8pt;"> <small> —— Anwen's Cloud </small> </p> </div> <div style="font-size: 13px; font-weight: bold;"> <span class="nav-item"> <a class="nav-link" href="https://im.qq.com/index/" target="_blank"> <i class="fab fa-qq" style="color:#409EFF" aria-hidden="true"> </i> QQ | </a> </span> <span class="nav-item"> <a class="nav-link" href="mailto:xxxxx@foxmail.com" target="_blank"> <i class="fa-duotone fa-envelope-open" style="color:#409EFF" aria-hidden="true"> </i> 邮箱 | </a> </a> </span> <span class="nav-item"> <a class="nav-link" href="http://192.168.1.12:5244/" target="_blank"> <i class="fa fa-cloud-download" style="color:#409EFF;" aria-hidden="true"> </i> 云盘 | </a> </span> <!--后台入口--> <span class="nav-item"> <a class="nav-link" href="/@manage" target="_blank"> <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true"> </i> 管理 | </a> </span> <!--版权，请尊重作者--> <span class="nav-item"> <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank"> <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true"> </i> Alist </a> </span> </div> </center> <br /> <br /> </div> <!--一言API--> <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script> <!--延迟加载范围到这里结束--> </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> <!-- 渐变背景初始化,如果要使用渐变背景把下面的那一行注释去掉即可--> <!-- 下面的几行都是渐变的一套,自定义头部内还有一个关联的自定义CSS --> <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>