Alist使用指南

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

优点

使用简单

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

多种存储

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

支持 WebDAV

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

黑暗模式

自由切换明暗模式

受保护的路由

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

文件预览

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

打包下载/批量下载

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

单点登录

使用单点登录快速登录AList

自动注册AList帐号

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

离线下载

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

保险箱加密/解密文件

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

更多新功能

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

使用指南

https://alist.nn.ci/zh/guide/install/script.html

配置

配置文件

https://alist.nn.ci/zh/config/configuration.html

网站设置:

https://alist.nn.ci/zh/config/site.html

样式设置

https://alist.nn.ci/zh/config/style.html

预览设置

https://alist.nn.ci/zh/config/preview.html

全局设置

https://alist.nn.ci/zh/config/global.html

其他设置

https://alist.nn.ci/zh/config/other.html

常见问题

https://alist.nn.ci/zh/faq/why.html

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: '4DsLsf6NlpxMScMXdigbBp42-gzGzoHsz',
				appKey: 'OOfZbqkcPiU4usy4W913LCwe',
				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>