哪吒 V1 面板调优——自动备份与界面美化

哪吒 V1 面板调优——自动备份与界面美化

🏅 官方资源——需要双域名

项目安装不在本文讨论范围内，可以查看上述官方文档
唯一需要注意的是，agent 通信域名需要使用非 cdn 域名
若该域名未申请 tls 证书，安装时询问是否开启 tls 时选 N

🏅 容器版——只需单域名

适用于 koyeb、northflank 等支持 docker 的容器

推荐 Kiritocyz 大佬的仓库：GitHub - Kiritocyz/Argo-Nezha-Service-Containe

重点事项：

  • 镜像地址：mikehand888/argo-nezha:latest
  • 容器开放端口：8080
  • agent 对接地址：argo域名:443
  • argo 隧道设置：详见 F 佬的教程

该容器版理论上应该也可以部署到 VPS，以下是 compose，但未经测试，有兴趣的同学可以试一下再反馈给我

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
# compose.yml

networks:
  argo-nezha:
    name: argo-nezha

services:
  argo-nezha:
    image: mikehand888/argo-nezha:latest
    pull_policy: always
    container_name: argo-nezha
    restart: always
    networks:
      - argo-nezha
    environment:
      - GH_USER=github用户名
      - GH_EMAIL=github邮箱
      - GH_PAT=github个人访问token
      - GH_BACKUP_USER=github备份仓库用户名
      - GH_REPO=github备份仓库名
      - GH_CLIENTID=github认证ID
      - GH_CLIENTSECRET=github认证秘钥
      - ARGO_AUTH=cf argo token
      - ARGO_DOMAIN=cf argo域名
    volumes:
      - ./data:/dashboard/data
    ports:
      - 8080:8080

⭐ 重点——面板调优

所有代码都在 这里

备份和恢复

代码见 nzbak.sh，将其上传到 vps 的 /root 目录并填写这里的变量

1
2
3
4
5
6
7
#--------------------------------------------
# GITHUB 私有备份仓库配置 (请务必修改为自己的信息)
#--------------------------------------------
GH_BACKUP_USER="your_github_username"
GH_REPO="your_private_repo_name"
GH_PAT="your_github_personal_access_token"
GH_EMAIL="your_github_email@example.com"
  • 执行备份
1
bash nzbak.sh bak

备份脚本会在北京时间 每天凌晨 4 点 将 面板设置 与 数据库 备份到指定的 Github 私有仓库,，并保留最新的 5 个备份

微信截图_20250831112346.png

  • 执行恢复
1
bash nzbak.sh res
  • 定时备份——在宿主机执行以下代码
1
(crontab -l 2>/dev/null | grep -Fq "/root/nzbak.sh bak") || (crontab -l 2>/dev/null; echo '# 每天凌晨4点 (北京时间) 自动执行 Nezha 面板备份任务'; echo '0 20 * * * /bin/bash /root/nzbak.sh bak >/dev/null 2>&1') | crontab -

验证 corn 任务是否添加成功: crontab -l

界面美化——仅适配暗黑模式

image.png

哪吒面板——系统设置——自定义代码，此处填写 以下代码

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<script>
  // 全局变量设置
  window.CustomBackgroundImage = "https://pan.811520.xyz/icon/bg_dark.webp";
  window.ShowNetTransfer = true;
  window.CustomLinks = "[{\"link\":\"/dashboard/profile\",\"name\":\"用户设置\"},{\"link\":\"/dashboard/settings\",\"name\":\"系统设置\"}]";

  // --- 页脚注入逻辑 ---
  const customFooterHtml = `
    <span id="my-custom-footer" style="display: contents;">
      <span class="mx-1">|</span>
      <a href="https://github.com/yutian81/Argo-Nezha-Service-Container" target="_blank" class="flex items-center gap-1"><i class="fab fa-github"></i> GitHub</a>
      <span class="mx-1">|</span>
      <a href="https://blog.811520.xyz/post/2025/08/250831-nezhav1-guanfang/" target="_blank" class="flex items-center gap-1"><i class="fas fa-blog"></i> QingYun Blog</a>
    </span>
  `;

  // 使用 MutationObserver 监视 DOM 变化
  const observer = new MutationObserver((mutationsList, obs) => {
    const targetDiv = document.querySelector('.server-footer-name > div:first-child');
    if (targetDiv && !document.getElementById('my-custom-footer')) {
      targetDiv.insertAdjacentHTML('beforeend', customFooterHtml);
      obs.disconnect(); // 找到并注入后，立刻停止观察，节省资源
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
</script>

<style>
/* --- 顶部按钮图标通用样式 --- */
a[href="/dashboard"]::before,
a[href="/dashboard/profile"]::before,
a[href="/dashboard/settings"]::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: relative;
  top: 1px;
}

/* 顶部按钮独立图标内容 */
a[href="/dashboard"]::before { content: "\f013"; }
a[href="/dashboard/profile"]::before { content: "\f4fe"; }
a[href="/dashboard/settings"]::before { content: "\f085"; }

/* 顶部按钮分隔符 */
a[href="/dashboard/profile"]::after,
a[href="/dashboard/settings"]::after {
  content: "|";
  margin-left: 0.3em;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 概览卡片添加图标 */
/* 1. 服务器总数 */
.server-overview > div:nth-child(1) p.font-medium::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f233"; /* fa-server */
  color: #3b82f6;
  margin-right: 0.5em;
  position: relative;
  top: 1px;
}

/* 2. 在线服务器 */
.server-overview > div:nth-child(2) p.font-medium::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f058"; /* fa-circle-check */
  color: #22c55e;
  margin-right: 0.5em;
  position: relative;
  top: 1px;
}

/* 3. 离线服务器 */
.server-overview > div:nth-child(3) p.font-medium::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f057"; /* fa-circle-xmark */
  color: #ef4444;
  margin-right: 0.5em;
  position: relative;
  top: 1px;
}

/* 4. 网络 */
.server-overview > div:nth-child(4) > div > section > div > p.font-medium::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0ac"; /* fa-globe */
  color: #B079E6;
  margin-right: 0.5em;
  position: relative;
  top: 1px;
}

/* --- 通用链接 hover 效果 --- */
#my-custom-footer a,
.server-footer-name > div:first-child > a[href*="naiba/nezha"],
a[href="/dashboard"],
a[href="/dashboard/settings"],
a[href="/dashboard/profile"] {
  transition: color 0.2s ease-in-out;
}
#my-custom-footer a:hover,
.server-footer-name > div:first-child > a[href*="naiba/nezha"]:hover,
a[href="/dashboard"]:hover,
a[href="/dashboard/settings"]:hover,
a[href="/dashboard/profile"]:hover {
  color: #F59E0B !important;
}

/* --- 移动端适配 --- */
@media (max-width: 480px) {
  .server-footer-name {
    white-space: nowrap;
    font-size: 0.8em;
  }
}
</style>

美化效果

  • 页面顶部增加 用户设置、系统设置 两个快捷入口，并增加图标和 hover 效果

image.png

  • 页面底部增加 外链地址，并配置图标和 hover 效果

image.png

  • 概览卡片标题增加图标

image.png

#美化 #面板 #监控