AList搭建[附毛玻璃美化]

对于看不懂官方搭建教程的,这里我们采用Docker指令来搭建
演示站点:初一小盏 (vxras.com)

图片[1]-AList搭建[附毛玻璃美化]-初一小盏

搭建教程

首先我们在宝塔面板的应用中心搜索Docker并安装

然后前往终端输入以下指令:

docker run -d --restart=always -v /etc/alist:/opt/alist/data -p 8271:8271 -e PUID=0 -e PGID=0 -e UMASK=022 --name="alist" xhofe/alist:latest

等待指令跑完后再输入以下指令修改密码:

docker exec -it alist ./alist admin set 这里改成你想要设置的密码

到这里,搭建就结束了,现在试试你的IP:8271能不能进入AList,如果进不去,请开放8271端口,你也可以在第一条指令里修改为其他端口

图片[2]-AList搭建[附毛玻璃美化]-初一小盏

f

如果你要使用域名访问,请前往宝塔面板新建一个站点,设置反向代理

  • 代理名称:AList
  • 目标URL:http://你的IP:端口
  • 发送域名:$host

美化教程

进入AList管理面板点击设置——全局——自定义头部,粘贴以下代码:

<style>
.hope-ui-light{background-image: url("https://www.vxras.com/wp-content/uploads/2023/09/hx_bg@1x.png")!important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;}
.hope-ui-dark {background-image: url(https://www.vxras.com/wp-content/uploads/2023/09/hx_bg@1x.png) !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-c-PJLV.hope-c-PJLV-ikSuVsl-css{background-color: rgba(255, 255, 255, 0.5)!important;}
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{background-color:rgb(0 0 0 / 50%)!important;}
.hope-ui-light pre{background-color: rgba(255, 255, 255, 0.1)!important;}
.hope-c-PJLV-ijgzmFG-css{background-color: rgba(255, 255, 255, 0.5)!important;}
.hope-ui-light .hope-c-PJLV-iiBaxsN-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;}
.solid-contextmenu {background-color: rgba(255, 255, 255, 0.5)!important;}
.hope-c-hOYTCS {background-color: rgba(255, 255, 255, 0.5)!important;}
.hope-c-zbPwS {background-color: rgba(255, 255, 255, 0.5)!important;}
.hope-c-ctSAUo {background-color: rgba(255, 255, 255, 0.5)!important;}
.hope-c-PJLV-ifjOQLV-css {background-color: rgba(255, 255, 255, 0.5)!important;}
.hope-c-PJLV-iubUra-css{background-color: rgba(255, 255, 255, 0.5)!important;}
.footer {display: none !important;}]
</style>

前面两行是背景,分别是日间和夜间背景的设置,请自行本地化图片,我的图片有防盗链

然后在自定义内容那里粘贴以下代码:

<div class="hope-stack hope-c-dhzjXW hope-c-PJLV hope-c-PJLV-ihQbspH-css"><div class="hope-stack hope-c-dhzjXW hope-c-PJLV hope-c-PJLV-iekLzst-css"><a class="hope-anchor hope-c-iHuheP hope-c-PJLV hope-c-PJLV-idrWMwW-css" target="_blank" rel="noopener noreferrer" href="https://www.vxras.com/">初一小盏</a><span>|</span><a class="hope-anchor hope-c-iHuheP hope-c-PJLV hope-c-PJLV-idrWMwW-css" href="/@manage">管理</a></div></div>

因为第一个美化代码注释了AList版权,所以这里我们自定义一个进去

教程到这里就结束啦!有什么不懂得请在评论区留言或私信初一

© 版权声明
THE END
点赞14赞赏 分享
评论 共1条

请登录后发表评论