🛰️ 哪吒监控（Nezha Monitoring）部署与美化教程

🚧 本文提供的演示站仅供参考，可能会随时间关闭。
登录演示站可查看前端美化效果，但由于权限限制无法查看服务器信息，出现报错属正常现象，并非程序或搭建问题。

🔗 演示站地址：vps.chatgb.dpdns.org

🧱 部署步骤

1️⃣ 域名解析

需准备两个域名并解析至服务器：

• 面板域名：用于访问哪吒监控面板
• 通讯域名：用于探针与面板之间通信

2️⃣ 安装 Nginx 与 Docker，并配置反向代理

脚本：wget -O 1keji.sh "https://www.1keji.net" && chmod +x 1keji.sh && ./1keji.sh

3️⃣ 安装哪吒探针程序

海外用户：curl -L https://raw.githubusercontent.com/nezhahq/scripts/refs/heads/main/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh

大陆用户（使用 Gitee 镜像）：curl -L https://gitee.com/naibahq/scripts/raw/main/install.sh -o nezha.sh && chmod +x nezha.sh && sudo CN=true ./nezha.sh

🎨 前端美化代码

<script>
  window.DisableAnimatedMan = true;
  window.CustomBackgroundImage = "电脑端背景图链接";
  window.CustomMobileBackgroundImage = "手机端背景图链接";
  window.ShowNetTransfer = true;
  window.FixedTopServerName = true;

  const AVIF_URL = "右上角小人";

  const style = document.createElement('style');
  style.innerHTML = `
    .transition-opacity img[src*="dicebear"] {
      display: none !important;
    }
    .custom-avatar {
      position: absolute !important;
      right: -40px !important;
      top: -155px !important;
      z-index: 10 !important;
      width: 160px !important;
      height: auto !important;
    }
  `;
  document.head.appendChild(style);

  const observer = new MutationObserver(() => {
    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) return;
    container.querySelectorAll('img[src*="dicebear"]').forEach(el => el.remove());
    if (!container.querySelector('img.custom-avatar')) {
      const img = document.createElement('img');
      img.src = AVIF_URL;
      img.className = 'custom-avatar';
      container.appendChild(img);
    }
  });

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

📊 仪表板美化代码

<script>
  window.DisableAnimatedMan = true;

  const fontLink = document.createElement('link');
  fontLink.rel = 'stylesheet';
  fontLink.href = 'https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans';
  document.head.appendChild(fontLink);

  const observerAdminTitle = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          const links = node.matches('.transition-opacity') ? [node] : node.querySelectorAll('.transition-opacity');
          links.forEach(link => {
            const textNode = Array.from(link.childNodes).find(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim() === '哪吒监控');
            if (textNode) {
              textNode.textContent = '哪吒探针';
              observerAdminTitle.disconnect();
            }
          });
        }
      });
    });
  });
  observerAdminTitle.observe(document.body, { childList: true, subtree: true });
</script>

css

<style>
  * {
    font-family: 'HarmonyOS Sans', sans-serif !important;
    font-size: 16px;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9);
  }

  html, body {
    height: 100% !important;
    background: url("https://img.003666.xyz/2025/05/24/141a91d4cba94b49001.webp") no-repeat center center fixed !important;
    background-size: cover !important;
  }

  .el-header {
    background-color: transparent !important;
    backdrop-filter: blur(4px);
    box-shadow: none !important;
  }

  img[src*="https://api.dicebear.com/7.x/notionists/svg"] {
    content: url("https://img.003666.xyz/2025/05/24/e6c54e4c9202c540001.avif") !important;
    width: 100px !important;
    height: auto !important;
  }

  img[src*="/dashboard/logo.svg"] {
    content: url("https://img.003666.xyz/2025/05/24/0eb4169981a13265001.webp") !important;
  }

  footer {
    display: none !important;
  }

  .el-container {
    background-color: rgba(255, 255, 255, 0.7) !important;
  }

  .el-card, .el-message-box, .el-dialog {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-text, .el-button, .el-table, .el-form-item__label, .el-form-item__content, .el-menu-item, .el-submenu__title {
    color: #333 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  }

  .el-text-light, .el-button--text, .el-link {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
</style>