为 Sun-Panel 添加视频背景

1.9k words

效果

更新日志

  • 2024-06-21 修复浅色模式不生效问题
  • 2024-06-18 适配登录页
  • 2024-06-17 初始版本

教程

Pro(开了会员的)用户,请打开 Sun-Panel 的 ‘设置’ - ‘全局设置’ ,拉到最下面,找到 ‘ JS (./conf/custom/index.js) ‘ 下方的输入框,然后跳至本教程的第二部分。

第一部分

  1. 若根据官方文档使用docker创建的容器,请打开 ~/docker_data/sun-panel/conf 目录。若是直接运行,也请找到这个目录。
  2. 在该目录下新建一个名为 ‘custom’ 的文件夹。
  3. 进入’custom’ 文件夹,新建名为 ‘index.js’ 的文件。

第二部分

  1. 打开 ‘index.js’ 文件。(高贵的 Pro 用户请忽略这一步)
  2. 复制以下内容,粘贴进去。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    // 预留视频地址变量
    const videoUrl = 'https://t.alcy.cc/acg'; // 这里使用了栗子的随机视频接口,你可以更换为自己的视频链接。

    // 处理背景元素的函数
    function handleBackgroundElements() {
    // 查找具有 class="cover wallpaper" 或 class="background" 的元素
    const selectors = ['.cover.wallpaper', '.background'];
    selectors.forEach(selector => {
    const elements = document.querySelectorAll(selector);

    elements.forEach(element => {
    // 移除背景图片
    element.style.backgroundImage = 'none';

    // 检查是否已经有视频元素,避免重复添加
    if (!element.querySelector('video')) {
    // 创建视频元素
    const videoElement = document.createElement('video');

    // 设置视频属性
    videoElement.src = videoUrl;
    videoElement.autoplay = true; // 自动播放
    videoElement.loop = true; // 循环播放
    videoElement.muted = true; // 静音播放
    videoElement.style.top = '0';
    videoElement.style.left = '0';
    videoElement.style.width = '100%';
    videoElement.style.height = '100%';
    videoElement.style.objectFit = 'cover';
    videoElement.style.zIndex = '-1'; // 确保视频在背景层

    // 将视频元素添加到当前元素中
    element.appendChild(videoElement);
    }
    });
    });
    }

    // 创建一个 MutationObserver 实例
    const observer = new MutationObserver((mutations, observer) => {
    handleBackgroundElements();
    });

    // 配置观察选项
    const config = {
    childList: true,
    subtree: true
    };

    // 开始观察 document.body
    observer.observe(document.body, config);

    // 初始调用处理背景元素
    document.addEventListener('DOMContentLoaded', handleBackgroundElements);
  3. 保存。