Alist——网盘聚合神器

发布于 2023-02-15  508 次阅读


Alist官方文档

安装

docker

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

关于初始密码

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

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

自定义样式

搜索框

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

后台

    /* 后台 */
    .hope-c-PJLV-ikaEncD-css,
    .hope-c-PJLV-ilfoGrZ-css,
    .hope-c-PJLV-ijrehjy-css,
    .hope-c-PJLV-ibpoBZc-css {
        background-color: transparent !important;
        backdrop-filter: blur(10px);
    }

文件预览背景

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

背景图

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

右下角菜单

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

markdown区域背景模糊

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

禁止选择

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

登录界面

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

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

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

头像圆角

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

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

导航样式

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

主体框架

<style>
    /* 主体框架 */
    .body {
        min-height: 0% !important;
    }
</style>

隐藏底部信息

<style>
    /* 隐藏底部信息 */
    .footer {
        display: none !important;
    }
</style>

底部盒子

<style>
    /* 底部盒子 */
    .footer-box {
        /* color: blueviolet; */
        border-radius: 10px !important;
        text-align: center !important;
        padding: 10px;
    }
</style>

底部框架

<style>
    /* 底部框架 */
    .footer-body {
        font-size: 13px !important;
    }
</style>

隐藏登录logo

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

白天模式

<style>
    /* ------------------白天模式------------------ */

    /* 背景图片 */
    .hope-ui-light {
        /* 
            樱花:https://www.dmoe.cc
            夏沫:https://cdn.seovx.com
            搏天:https://api.btstu.cn/doc/sjbz.php
            姬长信:https://github.com/insoxin/API
            小歪:https://www.ixiaowai.cn/#works
            保罗:https://api.paugram.com
            墨天逸:https://api.mtyqx.cn
            岁月小筑:https://img.xjh.me
            东方Project:https://img.paulzzh.com
        */
        background-image: url("https://api.mtyqx.cn/api/random.php") !important;
        background-color: rgb(58, 58, 58) !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }
        /* 设置半透明 */
    .hope-ui-light .header-left .hope-image,
    .hope-ui-light .header-right .hope-button,
    .hope-ui-light .left-toolbar,
    .hope-ui-light .nav,
    .hope-ui-light .obj-box,
    .hope-ui-light .hope-c-PJLV-ikSuVsl-html,
    .hope-ui-light .footer-box {
        background-color: rgba(255, 255, 255, .8) !important;
        box-shadow: 0 0 5px 1px rgb(124, 124, 124) !important;
    }
</style>

空白高度块

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

网页鼠标点击特效

<!-- 网页鼠标点击特效 -->
<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).innerstyle = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.htmlText = "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.htmlText = "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>

页面加载相关

<!-- 页面加载相关 -->
<script>
    var start = new Date().getTime();
    function timestamp() {
        let outcome = Math.round(new Date().getTime() / 1000).toString();
        return outcome
    }
    function timer(intDiff) {
        myTimer = window.setInterval(function () {
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (hour <= 9) hour = "0" + hour;
            if (minute <= 9) minute = "0" + minute;
            if (second <= 9) second = "0" + second;

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

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

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

            intDiff++;
        }, 1000);
    }
    var nowtime = timestamp(); // 现行时间戳
    var mytime = 1570681975; // 设置安装时间(安装日期时间戳)
    timer(nowtime - mytime); // 启动循环

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

鼠标特效

<script>
function clickEffect() {
  let balls = [];
  let longPressed = false;
  let longPress;
  let multiplier = 0;
  let width, height;
  let origin;
  let normal;
  let ctx;
  const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
  const pointer = document.createElement("span");
  pointer.classList.add("pointer");
  document.body.appendChild(pointer);

  if (canvas.getContext && window.addEventListener) {
    ctx = canvas.getContext("2d");
    updateSize();
    window.addEventListener('resize', updateSize, false);
    loop();
    window.addEventListener("mousedown", function(e) {
      pushBalls(randBetween(10, 20), e.clientX, e.clientY);
      document.body.classList.add("is-pressed");
      longPress = setTimeout(function(){
        document.body.classList.add("is-longpress");
        longPressed = true;
      }, 500);
    }, false);
    window.addEventListener("mouseup", function(e) {
      clearInterval(longPress);
      if (longPressed == true) {
        document.body.classList.remove("is-longpress");
        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
        longPressed = false;
      }
      document.body.classList.remove("is-pressed");
    }, false);
    window.addEventListener("mousemove", function(e) {
      let x = e.clientX;
      let y = e.clientY;
      pointer.style.top = y + "px";
      pointer.style.left = x + "px";
    }, false);
  } else {
    console.log("canvas or addEventListener is unsupported!");
  }

  function updateSize() {
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    ctx.scale(2, 2);
    width = (canvas.width = window.innerWidth);
    height = (canvas.height = window.innerHeight);
    origin = {
      x: width / 2,
      y: height / 2
    };
    normal = {
      x: width / 2,
      y: height / 2
    };
  }
  class Ball {
    constructor(x = origin.x, y = origin.y) {
      this.x = x;
      this.y = y;
      this.angle = Math.PI * 2 * Math.random();
      if (longPressed == true) {
        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
      } else {
        this.multiplier = randBetween(6, 12);
      }
      this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
      this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
      this.r = randBetween(8, 12) + 3 * Math.random();
      this.color = colours[Math.floor(Math.random() * colours.length)];
    }
    update() {
      this.x += this.vx - normal.x;
      this.y += this.vy - normal.y;
      normal.x = -2 / window.innerWidth * Math.sin(this.angle);
      normal.y = -2 / window.innerHeight * Math.cos(this.angle);
      this.r -= 0.3;
      this.vx *= 0.9;
      this.vy *= 0.9;
    }
  }

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

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

  function loop() {
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.r < 0) continue;
      ctx.fillStyle = b.color;
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
      ctx.fill();
      b.update();
    }
    if (longPressed == true) {
      multiplier += 0.2;
    } else if (!longPressed && multiplier >= 0) {
      multiplier -= 0.4;
    }
    removeBall();
    requestAnimationFrame(loop);
  }

  function removeBall() {
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
        balls.splice(i, 1);
      }
    }
  }
}
clickEffect();//调用特效函数
</script>

相关链接