默认导航页OUT！用Sun-Panel-Helper打造你的专属NAS美学

Sun-Panel相信大家不陌生了，经过了一两年的更新，目前的Sun-Panel可以说算是NAS导航页项目里的第一梯队了，排在前三都不过分。

Sun-Panel从项目一开始发布熊猫就有关注，简洁的界面加上极少的资源占用非常适合用来作为NAS的导航页，初期的Sun-panel功能仅限于网址导航的作用，而经过两年的发展如今的Sun-panel功能越来越强大，除了能作为常规的导航页使用，还能自动检测内外网模式、多账号隔离使用、系统状态查看、Docker管理等等。

当一个项目发展到一定程度的时候一定会出现各种衍生的产物，Sun-Panel也不例外。

虽说默认的界面非常简洁好看，但总会有那么一部分人不满足于简洁的界面，加上Sun-Panel本身终究还是导航页，所以一些民间的第三方大佬就开始想办法了，想让它不那么普通简单，于是Sun-Panel-Helper就诞生了。

项目演示

从知道这个项目开始，熊猫一直使用的就是它，Sun-Panel-Helper熊猫搭建尝试了一下，但因为习惯了之前使用的界面所以也就没有去做大量修改，这里贴一些网友们的成果图。

不得不说NAS玩家是真爱折腾啊，不过看到这些到导航页也让我想起了我刚开始接触Docker和导航页的时候，也是一个界面能折腾一天，图标从圆角调到直角，排列从竖排设成并排，也不知道折腾完有什么用。

Sun-Panel-Helper说直白点就是Sun-Panel的主题编辑器，通过该工具能实现对Sun-Panel界面的直接修改，加上本身还有组件市场的存在，也能为Sun-Panel提供一些扩展性功能，例如上面示例中的天气、敲木鱼以及网页音乐播放器等等。

项目内置了一些CSS美化代码，通过美化库就能实现一键部署实时生效，不需要懂什么代码知识就能使用，同时项目也附带了JS功能库，通过JS能实现给导航页增加音乐播放器、搜索框一言甚至AI助手等等。

组件市场也为Sun-Panel的界面美化增加了不少玩法，加上第三方小组件的存在，Sun-Panel的功能性增加了不少。

项目部署

如果你已经部署了Sun-Panel，那么只部署该项目即可，不过需要注意的是其中的映射路径需要更改一下/app/backend/custom路径为Sun-Panel的custom目录，这个必须要映射好才行，Sun-Panel-Helper原本的compose文件代码如下，根据自己设备情况调整代码即可。

sun-panel-helper:
    image: madrays/sun-panel-helper:latest
    container_name: sun-panel-helper
    environment:
      - BACKEND_PORT=3001  # 后端服务端口,可自定义修改避免冲突
    ports:
      - "33002:80"        # 前端页面访问端口
    volumes:
      - /vol1/@appshare/sunpanel/conf/custom:/app/backend/custom  # Sun-Panel的custom目录
      - /vol1/@appshare/helper/data:/app/backend/data
      - /vol1/@appshare/helper/backups:/app/backend/backups
    restart: always

如果你NAS中原本就没有Sun-Panel，那么也可以使用compose堆栈的方式同时部署两个项目，其中的路径根据自身的NAS环境更改即可。

version: "3.2"
services:
# Sun-Panel 服务
  sun-panel:
    image: "hslr/sun-panel:latest"
    container_name: sun-panel
    volumes:
      - /vol1/@appshare/sunpanel/conf:/app/conf
      - /var/run/docker.sock:/var/run/docker.sock # 挂载docker.sock
      - /vol1:/os # 硬盘挂载点（根据自己需求修改）
    ports:
      - 3002:3002
    restart: always

# Sun-Panel-Helper 服务
  sun-panel-helper:
    image: madrays/sun-panel-helper:latest
    container_name: sun-panel-helper
    environment:
      - BACKEND_PORT=3001  # 后端服务端口,可自定义修改避免冲突
    ports:
      - "33002:80"        # 前端页面访问端口
    volumes:
      - /vol1/@appshare/sunpanel/conf/custom:/app/backend/custom  # Sun-Panel的custom目录
      - /vol1/@appshare/helper/data:/app/backend/data
      - /vol1/@appshare/helper/backups:/app/backend/backups
    restart: always

这里熊猫用的是绿联的NAS，不过极空间最新版本也已经支持compose部署，也算是补全了极空间Docker目前不方便部署堆栈项目的缺点了。

写在最后

都说“美化的尽头是默认”，但其实，适当的美化不仅能让界面更好看，还能为项目本身增添一些功能性。当然了，这背后是需要花点心思去折腾的。如果想直接上手就用，默认配置其实也完全够用了。