自定义内容内代码

<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->

<div id="customize" style="display: none;">
    <div>
        <center class="dibu">
            <div style="font-size: 13px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="https://t.me/iOSjdy_bot"
                        target="_blank">
                        <i class="fab fa-telegram" style="color:#409EFF" aria-hidden="true">
                        </i>
                        TG |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="[email protected]" target="_blank">
                        <i class="fa-duotone fa-envelope-open" style="color:#409EFF" aria-hidden="true">
                        </i>
                        邮箱 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://tool.ios1.top" target="_blank">
                        <i class="fas fa-suitcase" style="color:#409EFF" aria-hidden="true">
                        </i>
                        工具 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://ios1.top" target="_blank">
                        <i class="fas fa-home" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        主页 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="" target="_blank">
                        <i class="fa fa-cloud-download" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        云盘 |
                    </a>
                </span>
                <!--后台入口-->
                <span class="nav-item">
                    <a class="nav-link" href="/@login" target="_blank">
                        <i class="fa fa-sign-in" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        登录 |
                    </a>
                </span>
                <!--版权，请尊重作者-->
                <span class="nav-item">
                    <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
                        <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        Alist
                    </a>
                </span>
                <br />
                <!--添加备案信息-->
                <span class="nav-item">
                    <a class="nav-link" href="https://ios1.top" target="_blank">
                        Copyright <i class="fa fa-copyright" style="color:#409EFF;" aria-hidden="true"> 
                        </i>
                        2025 by 简单网盘
                    </a>
                </span>
            </div>
        </center>
    </div>

<font color="#00FF00">
</style>
  </body>

<div style="display: flex; justify-content: center; align-items: center;">
    <span>此站稳定运行</span>
    <span id="timeid1" style="font-size:35px"></span>天
    <span id="timeid2" style="font-size:35px"></span>小时
    <span id="timeid3" style="font-size:35px"></span>分
    <span id="timeid4" style="font-size:35px"></span>秒
   </div>
   <!-- 网站时间记录建设 -->
   <script type="text/javascript">
    function loveTime() {
    var the=new Date(2024,2,03) 
    var date = new Date() - the
    var days = Math.floor(date / 1000 / 60 / 60 / 24) 
    var daysmod = date - days * 24 *60 * 60 * 1000 
    var hours = Math.floor(daysmod / 1000 / 60 / 60) 
    var hoursmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) 
    var minutes = Math.floor(hoursmod / 1000 / 60)
    var minutesmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)
    var seconds = Math.floor(minutesmod / 1000) 
    var daysshow = document.getElementById("timdid1");
    var ds = document.getElementById("timeid1");
    var hs = document.getElementById("timeid2");
    var ms = document.getElementById("timeid3");
    var ss = document.getElementById("timeid4");
    ds.innerHTML = days;
    hs.innerHTML = hours;
    ms.innerHTML = minutes;
    ss.innerHTML = seconds;
    }
    setInterval("loveTime();",1000);
   </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>

<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js">
</script>
<script>
    swal({
        title: "❤️简单网盘公告❤️",
        text: "1.资源不定期更新，有问题联系盘主\n2.建议加入TG频道，避免找不到网盘\n3.请认真阅读免责声明，进入则代表同意声明\n4.目前证书特价中，如有需要请联系盘主购买 \n\n🌟简单官方网址🌟\n简单主页：https://ios1.top/\n简单网盘：https://pan.ios1.top/ \n简单博客：https://blog.ios1.top/\n加入TG频道：https://t.me/jiandanyuan\n❤️盘主TG：@iOSjdy_bot❤️",
        icon: "success",
        button: "同意并进入网盘",
    });
</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>


爱心❤ 

<!-- 网页鼠标点击特效 - 爱心 -->
<script type="text/javascript">
         ! function (e, t, a) {
            function r() {
                for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                        e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                    "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }
            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(), o(e)
                }
            }
 
            function o(e) {
                var a = t.createElement("div");
                a.className = "heart", s.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: c()
                }), t.body.appendChild(a)
            }
 
            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }
 
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                    .random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
                .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                    setTimeout(e, 1e3 / 60)
                }, i(
                    ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
                ), n(), r()
        }(window, document);
    
</script>

音乐播放器添加说明

音乐播放器 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.css">
    <script src="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.js"></script>
    <!-- 新的，添加 require MetingJS -->
    <script src="https://npm.elemecdn.com/[email protected]/js/Meting.min.js"></script>
    <title>音乐</title>
</head>

<body>
    <!--音乐播放器-->
    <!--网易云音乐-->
    <meting-js fixed="false" autoplay="false" theme="#409EFF" list-folded="false" server="netease" type="playlist"
            id="2195404116"></meting-js>
    <!--QQ音乐-->
    <!--<meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="https://y.qq.com/n/yqq/playlist/7927599544.html"></meting-js>-->
</body>

</html>

可选CSS，需要 fixed="true" 时使用

<style>
  /* 以下为音乐播放器额外配置 */
  /* 如果你想要音乐播放器不是很靠底部可以自己设置一下数值 0是靠最底部 */
  .aplayer .aplayer-body,
  .aplayer.aplayer-withlist {
    bottom: 0rem !important;
  }
  /*音乐播放器进一步进行隐藏*/
  /* 需要就加不需要就不用加 */
  .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important;
  }
  .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0 !important;
  }
</style>

核心代码（引用头部内）

<meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="https://y.qq.com/n/yqq/playlist/7927599544.html"></meting-js>

腾讯QQ音乐

我使用的是上面这个链接，链接获取方法如下

  1. 打开https://y.qq.com/n/ryqq/profile/create
  2. 选择歌单

qq

  1. 点击歌单后我们能看到链接是 ：https://y.qq.com/n/ryqq/playlist/7927599544
  2. 然后我们复制最后的那一串数字 7927599544
  3. 然后回到 https://y.qq.com/n/yqq/playlist/7927599544.html 这个链接里面把里面的数字ID替换成你的即可使用

网易云音乐

音乐播放器需要如下三个参数

<meting-js 
  server="netease" 
  type="playlist" 
  id="60198">
</meting-js>

进入网易云音乐，选择歌单，复制顶部链接地址栏里面的ID，填进代码里面
网易
可以参下除了最下面三个需要加的参数，还添加了跟QQ音乐一样的几个参数

<meting-js 
    fixed="true" 
    autoplay="false" 
    theme="#409EFF" 
    list-folded="true" 
    server="netease" 
    type="playlist" 
    id="2195404116">
  </meting-js>

一键复制拿去用即可

<meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" server="netease" type="playlist" id="2195404116"></meting-js>

其他音乐

<meting-js
    name="rainymood"
    artist="rainymood"
    url="https://rainymood.com/audio1110/0.m4a"
    cover="https://rainymood.com/i/badge.jpg">
</meting-js>

url：添加的音乐链接
cover：封面

加上歌词

<meting-js
    name="rainymood"
    artist="rainymood"
    url="https://rainymood.com/audio1110/0.m4a"
    cover="https://rainymood.com/i/badge.jpg"
    fixed="true">
    <pre hidden>
        [00:00.00]This
        [00:04.01]is
        [00:08.02]lyric
    </pre>
</meting-js>

pre hidden 里面的格式就是歌词 这样就能看到歌词啦，自己掐好时间点

音乐的一些其他参数

机翻的，凑合看吧

选项默认描述
ID要求歌曲ID/播放列表ID/专辑ID/搜索关键字
服务器要求音乐平台：netease, tencent, kugou, xiami,baidu
类型要求song, playlist, album, search,artist
汽车选项音乐链接，支持：netease,,,tencentxiami
固定的false启用固定模式
小型的false开启迷你模式
自动播放false音频自动播放
主题#2980b9主色
环形all播放器循环播放，值：'all'、'one'、'none'
命令list播放器播放顺序，值：'list'，'random'
预载auto值：“无”、“元数据”、“自动”
体积0.7默认音量，注意播放器会记住用户设置，用户自己设置音量后默认音量将失效
互斥体true防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器
lrc 型0抒情类型
列表折叠false指示列表是否应首先折叠
列表最大高度340px列出最大高度
存储名称metingjs存储播放器设置的 localStorage 键

英文原版

optiondefaultdescription
idrequiresong id / playlist id / album id / search keyword
serverrequiremusic platform: netease, tencent, kugou, xiami, baidu
typerequiresong, playlist, album, search, artist
autooptionsmusic link, support: netease, tencent, xiami
fixedfalseenable fixed mode
minifalseenable mini mode
autoplayfalseaudio autoplay
theme#2980b9main color
loopallplayer loop play, values: 'all', 'one', 'none'
orderlistplayer play order, values: 'list', 'random'
preloadautovalues: 'none', 'metadata', 'auto'
volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutextrueprevent to play multiple player at the same time, pause other players when this player start play
lrc-type0lyric type
list-foldedfalseindicate whether list should folded at first
list-max-height340pxlist max height
storage-namemetingjslocalStorage key that store player setting

卜蒜子(计数器)

来自：https://busuanzi.9420.ltd
Api：https://busuanzi.apifox.cn
GitHub：https://github.com/soxft/busuanzi
如果丢数据或者觉的不稳定可自建卜蒜子计数器，支持 Windows、Linux、Docker，使用 Golang + Redis 实现
搭建方法：https://busuanzi.apifox.cn/doc-5083724

详细搭建方法

这里以Windows为例
首先得安装了 Redis，安装好后启动 redis-server.exe 就可以，可以看到和下面的一样的，就是启动了Redis 数据库

Redis Server
把之前 BuSuanZi GitHub 下载好的配置文件进行修改（如果不想显示这个黑窗口，可以使用脚步启动隐藏黑窗口）
分别下载源代码和二进制启动程序（主要是config.yaml和dist文件夹）都在一个目录里面才可以启动

分别修改（看需求），默认不需要修改可以直接运行

  • config.yaml
  • dist/busuanzi.js

如果你修改了 config.yaml 的端口号 那就也需要修改 dist/busuanzi.js 的配置，如果不修改可以直接启动

Web:
  Address: 0.0.0.0:8080 # 监听地址
  Cors: "https://xsot.cn,https://google.com" # 跨域访问
  Debug: false # 是否开启debug模式
  Log: true # 是否开启日志
Redis:
  Address: redis:6379 # redis地址
  Password:
  Database: 0
  TLS: false      # 是否使用TLS连接redis
  Prefix: bsz     # redis前缀
  MaxIdle: 25     # 最大空闲连接数
  MaxActive: 100  # 最大连接数
  MinIdle: 25     # 最小空闲连接数
  MaxRetries: 3   # 最大重试次数
Bsz:
  Expire: 0        # 统计数据过期时间 单位秒, 请输入整数 (无任何访问, 超过这个时间后, 统计数据将被清空, 0为不过期)
  Secret: "bsz"    # JWT签名密钥 // 请设置为任意长度的随机值
  Encrypt: "MD516" # 加密算法 (MD516 / MD532) 老版本请使用 MD532
  PathStyle: true  # 路径样式 (false: url&path, true: path) 老版本请使用 false,  true 更便于数据迁移


# TIPS, 所有 config 内的设置, 均可使用 环境变量 覆盖
# Ex BSZ_SECRET=123 将覆盖 config.yaml 中的 Bsz.Secret

dist/busuanzi.js这个js文件进行了格式化，默认是一行代码显示的，这里为了方便查看进行了格式化操作
如果在公网进行部署，建议修改成绑定的域名信息

! function () {
    var t = ["site_pv", "site_uv", "page_pv", "page_uv"],
        e = document.currentScript,
        a = e.hasAttribute("pjax"),
        n = e.getAttribute("data-api") || "http://127.0.0.1:8080/api", 
        n = e.getAttribute("data-api") || "https://bsz.explorer.com/api", 
        i = e.getAttribute("data-prefix") || "busuanzi",
        r = "bsz-id",
        s = function () {
            var e = new XMLHttpRequest;
            e.open("POST", n, !0);
            var a = localStorage.getItem(r);
            null != a && e.setRequestHeader("Authorization", "Bearer " + a), e.setRequestHeader("x-bsz-referer", window
                .location.href), e.onreadystatechange = function () {
                if (4 === e.readyState && 200 === e.status) {
                    var a = JSON.parse(e.responseText);
                    if (!0 === a.success) {
                        t.map((function (t) {
                            var e = document.getElementById("".concat(i, "_").concat(t));
                            null != e && (e.innerHTML = a.data[t]);
                            var n = document.getElementById("".concat(i, "_container_").concat(t));
                            null != n && (n.style.display = "inline")
                        }));
                        var n = e.getResponseHeader("Set-Bsz-Identity");
                        null != n && "" != n && localStorage.setItem(r, n)
                    }
                }
            }, e.send()
        };
    if (s(), a) {
        var o = window.history.pushState;
        window.history.pushState = function () {
            o.apply(this, arguments), s()
        }, window.addEventListener("popstate", (function (t) {
            s()
        }), !1)
    }
}();

具体导入网站使用方法 https://busuanzi.apifox.cn/doc-5083722

查看 Redis 链接访问的数据，我们可以使用可视化 Redis 管理工具 AnotherRedisDesktopManager
下载好后连接 Redis，地址我在本地搭建的就写 127.0.0.1，端口号如果默认没改过就是 6379
Redis Manage
连接好后如果我们要修改数据，可以参考下面的示例
Redis busuanzi

美化自定义头部

自定义内容的相关美化到此结束，自定义头部的美化放在了下面的文章：

Alist 美化教程 - 美化自定义头部

自定义头部代码其他音乐播放器链接如果上面那个自带的失效了，可以试试下面提供的，下面三个随机几个都可以<!--...

精品ipa应用&交流群

简单网盘

https://pan.ios1.top/

有偿代搭网盘

  • 联系微信：lyy66788zzz
  • 私聊TG的双向Bot：@iOSjdy_bot

添加交流群组


参考地址：AnWen's Docs

END
本文作者： 文章标题：Alist 美化教程 - 美化自定义内容
 本文地址：https://blog.ios1.top/archives/28.html
 版权说明：若无注明，本文皆简单博客原创，转载请保留文章出处。
最后修改：2025 年 01 月 24 日
© 允许规范转载
赞赏支持，更有情怀