哪吒V1探针前台界面美化

事先声明

美化代码主要是在官方文档的基础上进行了特殊部位的优化，仅呈现简单的静态效果。
如需复杂的动态效果及其他效果，请自行编写代码。
官方美化自定义代码地址：https://nezhadash-docs.buycoffee.top/custom-code
美化效果展示：https://nzdb.faiz.us.kg/

代码展示

根据自身的需求，修改有注释的地方即可，其他地方懂的人可以随便动，不懂的话就别乱动了。

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
<script>
  // 自定义设置
  window.CustomBackgroundImage = 'https://abc123.com';  // 自定义电脑端背景图
  window.CustomMobileBackgroundImage = 'https://abc123.com';  // 自定义手机背景图
  window.CustomLogo = 'https://abc123.com';  // 自定义LOGO
  window.CustomDesc = '欢迎来到我的哪吒监控';  // 自定义描述
  window.ShowNetTransfer = true;  // 卡片显示上下行流量
  window.ForceCardInline = false;  // 是否单行显示
  window.DisableAnimatedMan = true;  // 关掉人物动画
  window.FixedTopServerName = false;  // 开启则会默认上面名称下面信息
  window.CustomLinks = JSON.stringify([
    { link: "https://abc123.com", name: "☕️博客" },
    { link: "https://abc123.com", name: "⌛️节点保活" },
    { link: "https://abc123.com", name: "📦GitHub" }
  ]); // 自定义外链，注意标点符号
  window.ForceTheme = '';  // 强制主题为light or dark，不填默认随系统变化
  window.CustomIllustration = 'https://abc123.com';  // 自定义插图

  // 插图插入逻辑
  const observer = new MutationObserver(function (mutationsList, observer) {
    const xpath = "/html/body/div/div/main/div[2]/section[1]/div[4]/div";
    const container = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

    if (container) {
      observer.disconnect();

      const existingImg = container.querySelector("img");
      if (existingImg) {
        container.removeChild(existingImg);
      }

      const imgElement = document.createElement("img");
      imgElement.src = window.CustomIllustration;
      imgElement.style.position = "absolute";
      imgElement.style.right = "-100px";  //插图右边距
      imgElement.style.top = "-150px";  //插图上边距
      imgElement.style.zIndex = "10";  //确保插图在最上层
      imgElement.style.width = "180px";  //插图等比例缩放大小

      container.appendChild(imgElement);
    }
  });

  const config = { childList: true, subtree: true };
  observer.observe(document.body, config);
</script>

  • 详细参数的含义参考下方的图释：

  • 将上述修改好的代码，粘贴至以下区域，最后点击最底下的确认，即可完成前台界面的美化。

为了避免网站加载的问题，请把相应的背景图片进行压缩，尽量保持在小于等于1mb。