Alist 配置和美化

听风347

已于 2024-03-15 14:57:07 修改

阅读量2.3k

点赞数 6

文章标签：网络 css html5 css3 html

于 2024-02-01 12:53:45 首次发布

本文链接：https://blog.csdn.net/weixin_72700161/article/details/135971567

版权

Alist 一个支持多种存储的文件列表程序，使用 Gin 和 Solidjs。

优点

使用简单

AList 从一开始就设计为易于安装，并且可以在所有平台上使用。

多种存储

AList 支持多个存储提供商，包括本地存储、阿里云盘、OneDrive、Google Drive 等，且易于拓展。

支持 WebDAV

AList 支持所有 WebDAV 存储，这是一种用于访问文件的标准。

黑暗模式

自由切换明暗模式

受保护的路由

为特定路径添加密码保护和身份验证

文件预览

支持视频、音频、文档、PDF、图片预览等，甚至支持 ipa 安装

打包下载/批量下载

使用浏览器的 stream api 支持打包下载，无需使用服务器 / 使用Aria2进行批量下载支持文件夹

单点登录

使用单点登录快速登录AList

自动注册AList帐号

使用单点登录自动注册为AList帐号快速注册

离线下载

将种子内容离线下载到指定的目录內,需要苛刻的网络环境

保险箱加密/解密文件

任何人都可以安全地将加密数据存储在远程存储提供商上。数据存储在保险箱中，提供商只能看到保险箱，看不到您的数据。

更多新功能

包括文本编辑器、README/HTML 渲染、文件永久链接、Cloudflare Workers 代理等

使用指南

一键脚本 | AList文档

配置

常见问题

为什么 | AList文档

DIY样式

自定义头部

<!--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;
}


/*主列表夜间模式透明，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>

听风347

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
Alist 配置和美化

alist搭建与美化指南
复制链接

扫一扫

Alist 配置和美化

优点

使用指南

配置

配置文件

网站设置:

样式设置

预览设置

全局设置

其他设置

常见问题

DIY样式

“相关推荐”对你有帮助么？