
免费部署OpenList网盘聚合工具及美化内容
OpenList网盘挂载系统
OpenList网盘是一个由爱好者自发搭建和维护的云存储网站,提供免费的账户注册和上传下载服务,并且支持多种文件格式的在线阅读和预览,比如PDF、Office、视频、音乐等格式。 AList网盘的特点是支持多种设备的访问和管理,可以将你的所有主流网盘挂载到一起,方便统一管理。非常方便和实用。
官方网站安装及使用教程:点我进入
PS:下面是我自己添加美化的代码,在自定义头部找到43和51行把背景图的URL替换成你自己的,在自定义内容找到21,22,23把Waline评论资源换成你自己的。
美化-自定义头部:
<!--Alist V3建议添加的,已经默认添加了,如果你的没有建议加上-->
<!-- <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script> -->
<script src="https://polyfill.alicdn.com/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" />
<!-- 引入 VideoTogether 扩展 -->
<!--<script src="https://al.lqbby.com:1443/d/%E6%9C%AC%E5%9C%B0%E4%BA%91%E7%9B%98/html/yqk.js?sign=df1z6GvvSDnjRTA9GujE5A5Uga2y7o58lZ02jgZRiYY=:0"></script>-->
<!-- 引入 Babel Polyfill -->
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<!-- 引入 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" />
<!-- 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">
<style>
/* 去除通知栏 右上角 X */
.notify-render .hope-close-button {
display: none;
}
/* 此选项两处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(160px, 1fr))
}
.obj-box > div .item-thumbnail{
height: 100px;
}*/
/*白天背景图*/
.hope-ui-light {
background-image: url("https://oortaka.top/upload/12-tuya.jpeg") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}
/*夜间背景图*/
.hope-ui-dark {
background-image: url("https://oortaka.top/upload/12-tuya.jpeg") !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(0, 0, 0, 0.3) !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.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) !important;
border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
.hope-ui-dark .hope-c-PJLV-idaeksS-css {
background-color: rgba(255, 255, 255, 0) !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) !important;
border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
.hope-ui-dark .hope-c-PJLV-icKsjdm-css {
background-color: rgba(255, 255, 255, 0) !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) !important;
border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
.hope-ui-dark .hope-c-hrsMRY {
background-color: rgba(255, 255, 255, 0) !important;
border-radius: var(--hope-radii-xl) !important;
}
/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css {
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px) !important;
}
/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled {
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px) !important;
}
/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css {
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px) !important;
padding: var(--hope-space-1) !important;
}
/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css {
background-color: rgb(0 0 0 / 10%) !important;
backdrop-filter: blur(10px) !important;
}
/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled {
background-color: rgb(0 0 0 / 10%) !important;
backdrop-filter: blur(10px) !important;
}
/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css {
background-color: rgb(0 0 0 / 10%) !important;
backdrop-filter: blur(10px) !important;
padding: var(--hope-space-1) !important;
}
.App {
min-height: 85vh;
}
.table {
margin: auto;
}
/*去掉底部*/
.footer {
display: none !important;
}
/*全局字体*/
* {
font-family: LXGW WenKai;
}
* {
font-weight: bold;
}
body {
font-family: LXGW WenKai;
}
/* UI与文字颜色 */
body {
color: #fff !important;
}
/* 隐藏登陆头像 */
.hope-c-PJLV-ibwASZs-css {
display: none;
}
/* 小屏幕(移动设备)样式调整 */
@media (max-width: 400px) {
.wl-info .wl-text-number {
font-size: 0.60em !important;
}
}
/* 页面主体样式 */
.hope-c-PJLV-iiHckfM-css {
flex-direction: column;
gap: var(--hope-space-4);
align-items: center;
margin-top: var(--hope-space-1);
padding-top: var(--hope-space-2);
padding-bottom: var(--hope-space-2);
padding-inline: 2%;
min-height: 80vh !important;
width: var(--hope-sizes-full);
}
/* 去除通知栏右上角的X按钮(重复声明无妨) */
.notify-render .hope-close-button {
display: none;
}
/* 列表 */
.hope-c-hOYTCS {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.hope-c-cIFneQ {
background-color: rgba(255, 255, 255, 0) !important;
}
/* (可选)如果未来想取消 .dibu 悬浮,解除下面注释即可 */
/*
.dibu {
position: static !important;
bottom: auto !important;
}
*/
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="same-origin">
<meta name="generator" content="AList V3">
<meta name="theme-color" content="#000000">
<meta name="google" content="notranslate">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="AList">
<link rel="apple-touch-icon" href="https://jsd.nn.ci/gh/alist-org/logo@main/logo.png">
<script src="https://g.alicdn.com/IMM/office-js/1.1.5/aliyun-web-office-sdk.min.js" async></script>
<link rel="shortcut icon" type="image/ico">
<!--href="https://oortaka.top/upload/109951167249792628%20(1)-topaz-denoise-enhance-tuya.jpg)">-->
<title>AList</title>
<script>
window.ALIST = {
cdn: '',
monaco_cdn: undefined,
base_path: '/',
api: undefined,
main_color: '#0d6dfc',
}
window.__dynamic_base__ = window.ALIST.cdn || ""
</script>
<script type="module">try{import.meta.url;import("_").catch(()=>1);}catch(e){}window.__vite_is_modern_browser=true;</script>
<script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src= window.__dynamic_base__+e.getAttribute('data-src'),n.onload=function(){System.import( window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
<script>
(function(){
var preloads = [{"parentTagName":"head","tagName":"link","attrs":{"href":"/static/manifest.json","rel":"manifest"}},{"parentTagName":"head","tagName":"script","attrs":{"type":"module","crossorigin":"","src":"/assets/index.1d0237e8.js"}},{"parentTagName":"head","tagName":"link","attrs":{"rel":"stylesheet","href":"/assets/index.15d8d646.css"}}];
function setAttribute(target, attrs) {
for (var key in attrs) {
target.setAttribute(target, attrs[key]);
}
return target;
};
for (var i = 0; i < preloads.length; i++) {
var item = preloads[i]
var childNode = document.createElement(item.tagName);
for (var k in item.attrs) childNode.setAttribute(k, item.attrs[k]);
if (window.__dynamic_base__) {
if (item.tagName == 'link') {
childNode.setAttribute('href', window.__dynamic_base__ + item.attrs.href)
} else if (item.tagName == 'script') {
childNode.setAttribute('src', window.__dynamic_base__ + item.attrs.src)
}
}
document.getElementsByTagName(item.parentTagName)[0].appendChild(childNode);
}
})();
</script>
美化-自定义内容:
<!-- ====== 评论容器(放一言上方) ====== -->
<div id="waline" class="newValine vedit" style="margin-bottom:16px;"></div>
<!-- ====== 评论区样式(简版) ====== -->
<style>
.newValine{
width:min(96%,940px);margin:24px auto;padding:var(--hope-space-2);
border-radius:var(--hope-radii-xl);box-shadow:var(--hope-shadows-lg);
}
.hope-ui-light .newValine{background-color:rgba(255,255,255,.8)!important;}
.hope-ui-dark .newValine{background-color:rgb(0 0 0 / 80%)!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;
}
</style>
<!-- ====== 动态加载 Waline 资源 + 单例挂载 ====== -->
<script>
(function(){
const serverURL = 'https://pl.oortaka.top'; // 你的 Waline 后端(末尾不要/)
const WL_JS = 'https://unpkg.com/@waline/client@2.15.8/dist/waline.js';
const WL_CSS = 'https://unpkg.com/@waline/client@2.15.8/dist/waline.css';
// 只加载一次资源
function loadOnce(id, node){
if(document.getElementById(id)) return Promise.resolve();
return new Promise((res, rej)=>{
node.id=id;
node.onload=res; node.onerror=rej;
document.head.appendChild(node);
});
}
function ensureWalineAssets(){
const css = document.createElement('link');
css.rel='stylesheet'; css.href=WL_CSS;
const js = document.createElement('script');
js.src=WL_JS; js.defer=true;
return loadOnce('waline-css', css).then(()=>loadOnce('waline-js', js));
}
// 单例管理,避免重复
const M = (window.__WALINE_MGR = window.__WALINE_MGR || { app:null, lastPath:'', obs:false });
const pathNow = ()=> location.pathname + location.search + location.hash;
function mountWaline(){
const el = document.getElementById('waline');
if(!el || !window.Waline) return;
const p = pathNow();
if(M.app && M.lastPath === p) return; // 路由没变不重建
M.lastPath = p;
try{ M.app && M.app.destroy && M.app.destroy(); }catch(e){}
el.innerHTML = '';
M.app = Waline.init({
el:'#waline', serverURL, path:p,
dark:'html.hope-ui-dark', comment:true,
locale:{ placeholder:'请留言。(填写邮箱可在被回复时收到邮件提醒)' }
});
}
const debounce = (fn, d=180)=>{ let t; return()=>{ clearTimeout(t); t=setTimeout(fn,d); }; };
const mountDebounced = debounce(mountWaline);
ensureWalineAssets().then(()=>{
window.addEventListener('DOMContentLoaded', mountDebounced);
window.addEventListener('popstate', mountDebounced);
window.addEventListener('hashchange', mountDebounced);
if(!M.obs){
const root = document.getElementById('root');
if(root){
new MutationObserver(mountDebounced).observe(root,{childList:true,subtree:true});
M.obs = true;
}
}
});
})();
</script>
<!-- ====== 下面是你原来的自定义内容(保持不变) ====== -->
<!-- 播放器 -->
<script src="https://myhkw.cn/player/js/jquery.min.js"></script>
<script src="https://myhkw.cn/api/player/165761088297" id="myhk" key="165761088297" m="1"></script>
<!-- 统计 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- 自定义块(含一言/友链/统计/运行时间) -->
<div id="customize" style="display:none;">
<!-- 一言 -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<br>
<center class="dibu">
<div style="line-height:30px;font-size:13pt;font-weight:bold;">
<span id="hitokoto" style="color:#fff;font-weight:bold;">
<a id="hitokoto_text" href="#">"一言API没有请求到啦~~"</a>
</span>
<p style="margin-left:20rem;font-size:13pt;"><small> —— Taka </small></p>
</div>
<div style="font-size:16px;font-weight:bold;">
<span class="nav-item"><a class="nav-link" href="https://alist.oortaka.top" target="_blank">
<i class="fas fa-home" style="color:#409EFF;"></i><span style="color:#54FF9F;">主页</span> |</a></span>
<span class="nav-item"><a class="nav-link" href="https://oortaka.top" target="_blank">
<i class="fas fa-edit" style="color:#409EFF;"></i><span style="color:#54FF9F;">博客</span> |</a></span>
<span class="nav-item"><a class="nav-link" href="https://tc.oortaka.top" target="_blank">
<i class="fa fa-image" style="color:#409EFF;"></i><span style="color:#54FF9F;">图床</span> |</a></span>
<span class="nav-item"><a class="nav-link" href="https://oortaka.top/lyb" target="_blank">
<i class="fas fa-comment-lines" style="color:#409EFF;"></i><span style="color:#54FF9F;">留言</span> |</a></span>
<span class="nav-item"><a class="nav-link" href="/@manage" target="_blank">
<i class="fa fa-folder-gear" style="color:#409EFF;"></i><span style="color:#54FF9F;">管理后台</span> |</a></span>
</div>
<div>
本“<span style="color:#54FF9F;font-weight:bold;"><a href="#">目录</a></span>”访问量
<span id="busuanzi_value_page_pv" style="color:#54FF9F;font-weight:bold;">6159</span> 次
本站总访问量
<span id="busuanzi_value_site_pv" style="color:#54FF9F;font-weight:bold;">7587</span> 次
本站总访客数
<span id="busuanzi_value_site_uv" style="color:#54FF9F;font-weight:bold;">2168</span> 人
</div>
<br>
<span class="nav-item">
<span id="timeDate" style="color:#fff;">载入天数...</span>
<span id="times" style="color:#fff;">载入时分秒...</span>
<script>
var now=new Date();
function createtime(){
var grt=new Date("08/25/2023 00:00:00");
now.setTime(now.getTime()+250);
var d=Math.floor((now-grt)/86400000);
var h=Math.floor((now-grt)/3600000 - 24*d); if(h<10)h="0"+h;
var m=Math.floor((now-grt)/60000 - 24*60*d - 60*parseInt(h)); if(m<10)m="0"+m;
var s=Math.round((now-grt)/1000 - 24*3600*d - 3600*parseInt(h) - 60*parseInt(m)); if(s<10)s="0"+s;
document.getElementById("timeDate").innerHTML="本站已运行 "+d+" 天 ";
document.getElementById("times").innerHTML=h+" 小时 "+m+" 分钟 "+s+" 秒";
}
setInterval(createtime,250);
</script>
</span>
</center>
</div>
<!-- 显示自定义块 -->
<script>
let _int = setInterval(()=>{
if(document.querySelector(".footer")){
document.querySelector("#customize").style.display="";
clearInterval(_int);
}
},200);
</script>
<!-- 点击爱心效果(保持不变) -->
<script>
!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);} .heart:after,.heart:before{content:'';width:inherit;height:inherit;background:inherit;border-radius:50%;position:fixed;} .heart:after{top:-5px;} .heart:before{left:-5px;}"),n(),r()}(window,document);
</script>
<div class="sakana-box"></div>
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果