Alist官方文档 #

安装#

docker#

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

关于初始密码

1
# 随机生成一个密码
2
docker exec -it alist ./alist admin random
3
# 手动设置一个密码,`NEW_PASSWORD`是指你需要设置的密码
4
docker exec -it alist ./alist admin set NEW_PASSWORD

其他安装方式请参考官方文档#

自定义样式#

搜索框#

1
/*搜索框透明*/
2
.hope-c-PJLV-ikEIIxw-css {
3
background: transparent !important;
4
}

后台#

1
    /* 后台 */
2
    .hope-c-PJLV-ikaEncD-css,
3
    .hope-c-PJLV-ilfoGrZ-css,
4
    .hope-c-PJLV-ijrehjy-css,
5
    .hope-c-PJLV-ibpoBZc-css {
6
        background-color: transparent !important;
7
        backdrop-filter: blur(10px);
8
    }

文件预览背景#

1
    /* 文件预览背景 */
2
    .markdown-body .highlight pre,
3
    .markdown-body pre {
4
        background-color: transparent !important;
5
        backdrop-filter: blur(10px);
6
    }

背景图#

1
    /*背景图*/
2
    body {
3
        background-image: url("https://imgapi.160621.xyz/index.php") !important;
4
        background-repeat: no-repeat;
5
        background-size: cover;
6
        background-attachment: fixed;
7
        background-position: center center;
8
    }

右下角菜单#

1
    /* 右下角菜单 */
2
    .hope-c-PJLV-ijgzmFG-css {
3
        backdrop-filter: blur(10px);
4
    }

markdown区域背景模糊#

1
/*markdown模糊*/
2
.hope-c-PJLV-iiuDLME-css {
3
    backdrop-filter: blur(10px);
4
}

禁止选择#

1
/*禁止选择文本*/
2
body {user-select: none;}

登录界面#

1
/* 登录界面 */
2
    /* 隐藏默认背景 */
3
    .hope-c-PJLV-ihWgyFw-css {
4
        display: none !important;
5
    }
6

7
    /* 登录模块 */
8
    .hope-c-PJLV-ifjOQLV-css {
9
        background-color: rgba(255, 255, 255, 0.6) !important;
10
        backdrop-filter: blur(10px);
11
    }
12

13
    /* 账号密码输入框 */
14
    .hope-c-PJLV-ibtHApG-css {
15
        background-color: transparent !important;
16
        border: 1px solid white !important;
17
    }
18
/* 登录界面结束 */

头像圆角#

1
<style>
2
    /* 头像圆角 */
3
    .header-left .hope-image {
4
        border-radius: 50px !important;
5
    }
6

7
    /* 导航样式 */
8
    .nav {
9
        border-radius: 10px !important;
10
        padding: 3px 10px;
11
    }
12
</style>

导航样式#

1
<style>
2
    /* 导航样式 */
3
    .nav {
4
        border-radius: 10px !important;
5
        padding: 3px 10px;
6
    }
7
</style>

主体框架#

1
<style>
2
    /* 主体框架 */
3
    .body {
4
        min-height: 0% !important;
5
    }
6
</style>

隐藏底部信息#

1
<style>
2
    /* 隐藏底部信息 */
3
    .footer {
4
        display: none !important;
5
    }
6
</style>

底部盒子#

1
<style>
2
    /* 底部盒子 */
3
    .footer-box {
4
        /* color: blueviolet; */
5
        border-radius: 10px !important;
6
        text-align: center !important;
7
        padding: 10px;
8
    }
9
</style>

底部框架#

1
<style>
2
    /* 底部框架 */
3
    .footer-body {
4
        font-size: 13px !important;
5
    }
6
</style>

隐藏登录logo#

1
<style>
2
    /* 隐藏登录logo */
3
    .hope-center .hope-stack .hope-flex .hope-image {
4
        display: none !important;
5
    }
6
</style>

白天模式#

1
<style>
2
    /* ------------------白天模式------------------ */
3

4
    /* 背景图片 */
5
    .hope-ui-light {
6
        /*
7
            樱花：https://www.dmoe.cc
8
            夏沫：https://cdn.seovx.com
9
            搏天：https://api.btstu.cn/doc/sjbz.php
10
            姬长信：https://github.com/insoxin/API
11
            小歪：https://www.ixiaowai.cn/#works
12
            保罗：https://api.paugram.com
13
            墨天逸：https://api.mtyqx.cn
14
            岁月小筑：https://img.xjh.me
15
            东方Project：https://img.paulzzh.com
16
        */
17
        background-image: url("https://api.mtyqx.cn/api/random.php") !important;
18
        background-color: rgb(58, 58, 58) !important;
19
        background-repeat: no-repeat;
20
        background-size: cover;
21
        background-attachment: fixed;
22
        background-position-x: center;
23
    }
24
        /* 设置半透明 */
25
    .hope-ui-light .header-left .hope-image,
26
    .hope-ui-light .header-right .hope-button,
27
    .hope-ui-light .left-toolbar,
28
    .hope-ui-light .nav,
29
    .hope-ui-light .obj-box,
30
    .hope-ui-light .hope-c-PJLV-ikSuVsl-html,
31
    .hope-ui-light .footer-box {
32
        background-color: rgba(255, 255, 255, .8) !important;
33
        box-shadow: 0 0 5px 1px rgb(124, 124, 124) !important;
34
    }
35
</style>

空白高度块#

1
<!-- 空白高度块 -->
2
<div style="height: 18px;"></div>

网页鼠标点击特效#

1
<!-- 网页鼠标点击特效 -->
2
<script>
3
    (function () {
4
        var a_idx = 0;
5
        window.onclick = function (event) {
6
            var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
7
                "❤敬业❤", "❤诚信❤", "❤友善❤");
8
            var heart = document.createElement("b"); //创建b元素
9
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
10

11
            document.body.appendChild(heart).innerstyle = a[a_idx]; //将b元素添加到页面上
12
            a_idx = (a_idx + 1) % a.length;
13
            heart.style.htmlText = "position: fixed;left:-100%;"; //给p元素设置样式
14

15
            var f = 13, // 字体大小
16
                x = event.clientX - f / 2 - 30, // 横坐标
17
                y = event.clientY - f, // 纵坐标
18
                c = randomColor(), // 随机颜色
19
                a = 1, // 透明度
20
                s = 0.8; // 放大缩小
21

22
            var timer = setInterval(function () { //添加定时器
23
                if (a <= 0) {
24
                    document.body.removeChild(heart);
25
                    clearInterval(timer);
26
                } else {
27
                    heart.style.htmlText = "font-size:16px;cursor: default;position: fixed;color:" +
28
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
29
                        s + ");";
30

31
                    y--;
32
                    a -= 0.016;
33
                    s += 0.002;
34
                }
35
            }, 15)
36
        }
37
        // 随机颜色
38
        function randomColor() {
39
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
40
                .random() * 255)) + ")";
41
        }
42
    }());
43
</script>

页面加载相关#

1
<!-- 页面加载相关 -->
2
<script>
3
    var start = new Date().getTime();
4
    function timestamp() {
5
        let outcome = Math.round(new Date().getTime() / 1000).toString();
6
        return outcome
7
    }
8
    function timer(intDiff) {
9
        myTimer = window.setInterval(function () {
10
            var day = 0,
11
                hour = 0,
12
                minute = 0,
13
                second = 0;//时间默认值
14
            if (intDiff > 0) {
15
                day = Math.floor(intDiff / (60 * 60 * 24));
16
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
17
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
18
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
19
            }
20
            if (hour <= 9) hour = "0" + hour;
21
            if (minute <= 9) minute = "0" + minute;
22
            if (second <= 9) second = "0" + second;
23

24
            $('#day_show').style(day + '天 ' + hour + '时 ' + minute + '分 ' + second + '秒');
25

26
            var now = new Date();
27
            var year = now.getFullYear();   // 得到年份
28
            var month = now.getMonth();     // 得到月份
29
            var date = now.getDate();       // 得到日期
30
            var day = now.getDay();         // 得到周几
31
            var hour = now.getHours();      // 得到小时
32
            var minu = now.getMinutes();    // 得到分钟
33
            var sec = now.getSeconds();     // 得到秒钟
34

35
            if (hour > 0 && hour <= 2) text = "丑时";
36
            else if (hour > 2 && hour <= 4) text = "寅时";
37
            else if (hour > 4 && hour <= 6) text = "卯时";
38
            else if (hour > 6 && hour <= 8) text = "辰时";
39
            else if (hour > 8 && hour <= 10) text = "巳时";
40
            else if (hour > 10 && hour <= 12) text = "午时";
41
            else if (hour > 12 && hour <= 14) text = "未时";
42
            else if (hour > 14 && hour <= 16) text = "申时";
43
            else if (hour > 16 && hour <= 18) text = "酉时";
44
            else if (hour > 18 && hour <= 20) text = "戌时";
45
            else if (hour > 20 && hour <= 22) text = "亥时";
46
            else text = "子时";
47
            $('#time_show').style('<a href="https://www.beijing-time.org/shichen" target="_blank" rel="noopener noreferrer">' + text + '</a>');
48

49
            intDiff++;
50
        }, 1000);
51
    }
52
    var nowtime = timestamp(); // 现行时间戳
53
    var mytime = 1570681975; // 设置安装时间（安装日期时间戳）
54
    timer(nowtime - mytime); // 启动循环
55

56
    // 页面加载完成后执行
57
    $(function () {
58
        // $('.footer-new').hide(); // 隐藏底部
59
        $('.footer-new').show(); // 显示底部
60
        $('#load_show').style((new Date().getTime() - start) + 'ms');
61
    });
62
</script>

鼠标特效#

1
<script>
2
function clickEffect() {
3
  let balls = [];
4
  let longPressed = false;
5
  let longPress;
6
  let multiplier = 0;
7
  let width, height;
8
  let origin;
9
  let normal;
10
  let ctx;
11
  const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
12
  const canvas = document.createElement("canvas");
13
  document.body.appendChild(canvas);
14
  canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
15
  const pointer = document.createElement("span");
16
  pointer.classList.add("pointer");
17
  document.body.appendChild(pointer);
18

19
  if (canvas.getContext && window.addEventListener) {
20
    ctx = canvas.getContext("2d");
21
    updateSize();
22
    window.addEventListener('resize', updateSize, false);
23
    loop();
24
    window.addEventListener("mousedown", function(e) {
25
      pushBalls(randBetween(10, 20), e.clientX, e.clientY);
26
      document.body.classList.add("is-pressed");
27
      longPress = setTimeout(function(){
28
        document.body.classList.add("is-longpress");
29
        longPressed = true;
30
      }, 500);
31
    }, false);
32
    window.addEventListener("mouseup", function(e) {
33
      clearInterval(longPress);
34
      if (longPressed == true) {
35
        document.body.classList.remove("is-longpress");
36
        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
37
        longPressed = false;
38
      }
39
      document.body.classList.remove("is-pressed");
40
    }, false);
41
    window.addEventListener("mousemove", function(e) {
42
      let x = e.clientX;
43
      let y = e.clientY;
44
      pointer.style.top = y + "px";
45
      pointer.style.left = x + "px";
46
    }, false);
47
  } else {
48
    console.log("canvas or addEventListener is unsupported!");
49
  }
50

51
  function updateSize() {
52
    canvas.width = window.innerWidth * 2;
53
    canvas.height = window.innerHeight * 2;
54
    canvas.style.width = window.innerWidth + 'px';
55
    canvas.style.height = window.innerHeight + 'px';
56
    ctx.scale(2, 2);
57
    width = (canvas.width = window.innerWidth);
58
    height = (canvas.height = window.innerHeight);
59
    origin = {
60
      x: width / 2,
61
      y: height / 2
62
    };
63
    normal = {
64
      x: width / 2,
65
      y: height / 2
66
    };
67
  }
68
  class Ball {
69
    constructor(x = origin.x, y = origin.y) {
70
      this.x = x;
71
      this.y = y;
72
      this.angle = Math.PI * 2 * Math.random();
73
      if (longPressed == true) {
74
        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
75
      } else {
76
        this.multiplier = randBetween(6, 12);
77
      }
78
      this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
79
      this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
80
      this.r = randBetween(8, 12) + 3 * Math.random();
81
      this.color = colours[Math.floor(Math.random() * colours.length)];
82
    }
83
    update() {
84
      this.x += this.vx - normal.x;
85
      this.y += this.vy - normal.y;
86
      normal.x = -2 / window.innerWidth * Math.sin(this.angle);
87
      normal.y = -2 / window.innerHeight * Math.cos(this.angle);
88
      this.r -= 0.3;
89
      this.vx *= 0.9;
90
      this.vy *= 0.9;
91
    }
92
  }
93

94
  function pushBalls(count = 1, x = origin.x, y = origin.y) {
95
    for (let i = 0; i < count; i++) {
96
      balls.push(new Ball(x, y));
97
    }
98
  }
99

100
  function randBetween(min, max) {
101
    return Math.floor(Math.random() * max) + min;
102
  }
103

104
  function loop() {
105
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
106
    ctx.clearRect(0, 0, canvas.width, canvas.height);
107
    for (let i = 0; i < balls.length; i++) {
108
      let b = balls[i];
109
      if (b.r < 0) continue;
110
      ctx.fillStyle = b.color;
111
      ctx.beginPath();
112
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
113
      ctx.fill();
114
      b.update();
115
    }
116
    if (longPressed == true) {
117
      multiplier += 0.2;
118
    } else if (!longPressed && multiplier >= 0) {
119
      multiplier -= 0.4;
120
    }
121
    removeBall();
122
    requestAnimationFrame(loop);
123
  }
124

125
  function removeBall() {
126
    for (let i = 0; i < balls.length; i++) {
127
      let b = balls[i];
128
      if (b.x + b.r < 0  b.x - b.r > width  b.y + b.r < 0  b.y - b.r > height  b.r < 0) {
129
        balls.splice(i, 1);
130
      }
131
    }
132
  }
133
}
134
clickEffect();//调用特效函数
135
</script>

Alist官方文档#

安装#

docker#

其他安装方式请参考官方文档#

自定义样式#

搜索框#

后台#

文件预览背景#

背景图#

右下角菜单#

markdown区域背景模糊#

禁止选择#

登录界面#

头像圆角#

导航样式#

主体框架#

隐藏底部信息#

底部盒子#

底部框架#

隐藏登录logo#

白天模式#

空白高度块#

网页鼠标点击特效#

页面加载相关#

鼠标特效#

相关链接#

Alist官方文档 #