官方文档：https://github.com/alist-org/alist
演示网站：https://pan.cddone.com
部署
1、创建容器工作目录
mkdir alist && cd alist2、创建容器yaml文件
- 指定镜像名称
- 设置容器名称
- 设置容器自启动
- 映射端口
- 映射配置文件路径
- 映射共享文件路径
version: '3.3'
services:
alist:
container_name: alist
image: 'xhofe/alist:latest'
restart: always
ports:
- '5244:5244'
volumes:
- '/home/docker/alist/conf.d:/opt/alist/data'
- '/data:/mnt'
environment:
- PUID=0
- PGID=0
- UMASK=0223、运行容器
docker-compose up -d4、查看容器信息
docker psCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
d8842a49b84a xhofe/alist:latest "/entrypoint.sh" 2 days ago Up 24 hours 0.0.0.0:5244->5244/tcp, :::5244->5244/tcp, 5245/tcp alist
5、初始化登录密码为admin
docker exec -it alist ./alist admin set admin6、访问ip+端口测试
http://ip:52447、设置nginx反向代理
server {
listen 443 ssl;
server_name pan.cddone.com;
location / {
proxy_redirect off;
proxy_pass http://localhost:5244;
proxy_set_header Host $http_host;
proxy_set_header Range $http_range;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header If-Range $http_if_range;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 20000m;
}
}8、界面美化
- 自定义头部（字体和透明度）
<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<!--引入字体，全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" />
<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/css/fontawesome.min.css" media='all'>
<link href="https://npm.elemecdn.com/[email protected]/css/all.min.css" rel="stylesheet">
<style>
/*白天背景图*/
.hope-ui-light{
background-image: url(https://pan.cddone.com/d/picture/cloud.png) !important;
background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}
/*夜间背景图*/
.hope-ui-dark {
background-image: url(https://dh.cddone.com/wp-content/uploads/2023/08/alist-sight.png) !important;
background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}
/*主列表夜间模式透明，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.5) !important;
}
/*readme透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*顶部右上角切换按钮透明*/
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.3) !important;
}
/*右下角侧边栏按钮透明*/
.hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.5) !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;
}
/*底部CSS，.APP .tanle这三个一起的*/
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;}
/*渐变背景CSS*/
#canvas-basic {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -999;
}
</style>- 自定义内容（皮肤加鼠标特效）
<div id="customize" style="display: none;">
<div>
<!--音乐播放器-->
<meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="https://cddone.com/wp-content/uploads/2023/08/Under-_-Over.m4a"></meting-js>
<br />
<center class="dibu">
<br />
<br />
<div style="font-size: 15px; font-weight: bold;">
<span class="nav-item">
<a class="nav-link" href="https://cddone.com" target="_blank">
<i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
</i>
cddone
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&menu=yes"
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="https://github.com/Xhofe/alist" target="_blank">
<i class="fas fa-comment-lines" style="color:#409EFF;" aria-hidden="true">
</i>
Alist驱动 |
</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>
<br />
<br />
</div>
</center>
</div>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
</script>
<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script>
(function () {
var a_idx = 0;
window.onclick = function (event) {
var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
var heart = document.createElement("b"); //创建b元素
heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
a_idx = (a_idx + 1) % a.length;
heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
var f = 13, // 字体大小
x = event.clientX - f / 2 - 30, // 横坐标
y = event.clientY - f, // 纵坐标
c = randomColor(), // 随机颜色
a = 1, // 透明度
s = 0.8; // 放大缩小
var timer = setInterval(function () { //添加定时器
if (a <= 0) {
document.body.removeChild(heart);
clearInterval(timer);
} else {
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
s + ");";
y--;
a -= 0.016;
s += 0.002;
}
}, 15)
}
// 随机颜色
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
.random() * 255)) + ")";
}
}());
</script>© 版权声明
文章版权归作者所有，转载请注明。
暂无评论...
