NAS导航这样搞才叫酷：Docker部署Sun-Panel + Helper百宝箱美化｜全图文教程

还在忍受默认导航页的单调乏味？或是苦于NAS服务入口过于简陋、缺乏个性？默认导航页的时代已经OUT了！ 如果你是一位追求效率与美学的NAS爱好者，渴望拥有一个既强大实用又赏心悦目的集中管理门户，那么 Sun-Panel 绝对是你的不二之选。

作为NAS导航页项目中的佼佼者（稳居前三阵营！），Sun-Panel 以其极致的简洁设计和超低的资源占用赢得了广泛赞誉。从最初专注于网址导航的核心功能，历经近两年的飞速发展，如今的 Sun-Panel 早已脱胎换骨：它不仅能完美胜任导航页的角色，更集成了智能检测内外网状态、支持多账号独立使用、实时监控系统状态，甚至提供了便捷的Docker容器管理等强大功能，成为管理你家庭服务器/私有云的全能控制中心。

然而，Sun-Panel 原生的“简约美学”虽然经典，但总有一群用户渴望更多——渴望让这个强大的中枢闪耀出独一无二的光芒，摆脱“普通导航页”的刻板印象。正是这种对个性化和视觉体验的不懈追求，催生了一个划时代的辅助工具——Sun-Panel-Helper 应运而生！

本教程将为你带来一份 超详细的 Sun-Panel 核心部署 + Sun-Panel-Helper 极致美化图文实战指南。无论你是初次接触 Sun-Panel 的新手，还是已经使用基础版、渴望升级视觉体验的老用户，都能通过这篇教程，手把手 学会如何从零开始，打造一个功能强大、颜值爆表、真正属于你个人的高逼格 NAS 导航门户。准备好让你的 NAS 入口焕然一新了吗？现在就开始我们的“美学改造”之旅吧！

Sun-Panel-Helper 是什么？

它就是专为 Sun-Panel 量身定制的“美学魔法师”！ 这款强大的可视化美化工具，旨在让你的 Sun-Panel 面板从“好用”跃升到“惊艳”。其核心亮点在于革命性的 “百宝箱”模块，它将各种炫酷的页面增强特效集中管理，让你能像搭积木一样轻松构建理想中的界面：

✨ 一键部署丰富特效： 告别复杂代码！在百宝箱中，你可以轻松启用：
- 精致页脚： 如专业的ICP备案信息、充满设计感的生命线页脚 (Lifeline Footer)。
- 趣味点击反馈： 例如展现社会主义核心价值观的独特鼠标点击动画。
- 沉浸式背景： 如梦幻的动态星空背景，瞬间提升整个页面的格调。
🧰 可视化配置，所见即所得： 所有效果参数均提供直观的配置界面，实时预览调整结果，满意后只需一键应用，美化效果即刻生效，操作体验流畅无比。

🚀 部署教程

演示环境说明

本教程以 群晖 NAS 系统 为例演示安装流程，其他系统（如飞牛、绿联、极空间、Unraid、Debian、iStoreOS、OpenWrt 等）请提前自行安装好 最新版 Docker 和 Docker Compose。

1️⃣ 启用 SSH 并连接 NAS

打开群晖的 SSH 功能，使用终端工具（如 PuTTY、Termius、FinalShell 等）连接 NAS，并切换到 root 权限：

sudo -i

2️⃣ 新建项目文件夹并进入

新建一个项目文件夹（文件夹名随意设置）
右键该文件夹 → 属性 → 常规 → 复制其位置路径备用。

然后在终端中进入该目录（以下为示例路径）：

# 将 /volume1/docker/sun-panel 换成你自己实际的文件夹路径

cd /volume1/docker/sun-panel

3️⃣ 创建子目录结构

执行以下命令，一次性创建部署所需的所有子文件夹：

mkdir -p ./sun-panel/conf ./sun-panel/runtime ./sun-panel/os \
         ./sun-panel/conf/custom \
         ./Sun-Panel-Helper/data ./Sun-Panel-Helper/backups

4️⃣ 授权文件夹读写权限（部分系统必需）

如你的系统是 群晖 NAS 或类似权限收紧的系统，需执行以下命令确保容器能访问挂载的目录：

# 将 /volume1/docker/sun-panel/ 换成你自己实际的文件夹路径

chmod -R 777 /volume1/docker/sun-panel/

5️⃣ 编写 docker-compose 模板

使用如下命令创建并编辑 docker-compose.yml 文件：
```
vi docker-compose.yml
```

按字母i键进入编辑模式，复制并修改下面的配置文件，粘贴到终端，按Esc键退出编辑模式，输入:wq保存并退出。

如终端排版混乱，可先贴到文本工具中修改后再粘贴。

# 如果不需要美化，那就只部署🌞 Sun-Panel 主服务，🌐 Sun-Panel-Helper那一部分删除即可。

version: "3.8"

services:
  ######################################################
  # 🌞 Sun-Panel 主服务
  ######################################################
  sun-panel:
    image: "hslr/sun-panel:latest"
    container_name: sun-panel
    restart: always
    ports:
      - "3002:3002"    # 左侧的3002是Sun-Panel容器访问端口，可自选更改。
    volumes:
      - ./sun-panel/conf:/app/conf            # 配置文件目录
      - ./sun-panel/runtime:/app/runtime      # 日志运行目录
      - ./sun-panel/os:/os                    # 下载器挂载路径
      - /var/run/docker.sock:/var/run/docker.sock  # 挂载 docker.sock，支持容器管理

  ######################################################
  # 🌐 Sun-Panel-Helper - 标准 bridge 网络模式（默认）
  # 👉 如需使用 host 模式，请注释掉ports和environment段，取消注释下方 host 模式段。
  ######################################################
  sun-panel-helper:
    image: madrays/sun-panel-helper:latest
    container_name: sun-panel-helper
    restart: always
    ports:
      - "33002:80"   # 映射前端访问端口（33002 ➜ 容器80端口），左侧的Sun-Panel-Helper美化访问端口33002可修改。
    environment:
      - BACKEND_PORT=3001  # 后端端口（容器内部使用），可修改避免冲突
      # host模式下不生效，可忽略 FRONTEND_PORT
  ######################################################
  # 🛠️ Sun-Panel-Helper - Host 网络模式（用于 IPv6 或更高性能）
  # ⚠️ 注意：启用此模式时，请注释上方 bridge 模式段
  # ⚠️ 不需要 ports: 映射，使用 FRONTEND_PORT 指定外部访问端口
  ######################################################
  #   network_mode: host      # 启用主机网络模式，适合需要 IPv6 支持的环境
  #   environment:
  #     - BACKEND_PORT=3001    # 后端端口（必须设置，容器内部使用），可修改避免冲突
  #     - FRONTEND_PORT=33002  # 前端端口（必须设置，否则页面无法访问，33002 ➜ 容器80端口），左侧的Sun-Panel-Helper美化访问端口33002可修改。
    volumes:
      - ./sun-panel/conf/custom:/app/backend/custom   # 与主服务sun-panel保持一致，custom配置目录
      - ./Sun-Panel-Helper/data:/app/backend/data
      - ./Sun-Panel-Helper/backups:/app/backend/backups

6️⃣ 启动容器服务

运行以下命令创建容器，启动 Sun-Panel 及 Helper：

docker-compose up -d

或

docker compose up -d

7️⃣ 查看容器运行状态

查看容器运行状态：

docker-compose ps

或

docker compose ps

查看容器实时日志（按 Ctrl+C 中断查看）：
```
docker-compose logs -f

或

docker compose logs -f
```

🖥️ 访问 Sun-Panel

打开浏览器，输入 NAS IP + 端口号 访问主面板：
以本机为例：http://172.16.19.200:3002
默认账号：admin@sun.cc
默认密码：12345678

登录后你可以：

添加你常用的导航链接
点击右上角【设置】按钮，个性化你的导航主页
可以编辑各种信息，面板设置一目了然。
点击首页的APP添加，也是非常简单，就不再赘述。

🎨 访问 Sun-Panel-Helper 美化中心

打开浏览器，输入 NAS IP + 端口号 访问主面板：
以本机为例：http://172.16.19.200:33002
默认账号：helper
默认密码：helper123
登录成功
点击 CSS 美化库，你会看到众多样式模板，点击一个即可进入预览与部署界面。
随意点击一个后按需调整，然后点击部署。
显示部署成功
部署成功后刷新 Sun-Panel 页面，美化样式即可生效！
如未生效请按 Ctrl+F5 强制刷新。