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

七夏发表于 4 天前

Sun-Panel相信大家不陌生了，经过了一两年的更新，目前的Sun-Panel可以说算是NAS导航页项目里的第一梯队了，排在前三都不过分。
<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rwI22OxOfStWiaQynyicBu6BOt8Xa3GJKhCbiadPQGibJlhTOSxhsEI2dnw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="Sun-Panel" />
Sun-Panel从项目一开始发布熊猫就有关注，简洁的界面加上极少的资源占用非常适合用来作为NAS的导航页，初期的Sun-panel功能仅限于网址导航的作用，而经过两年的发展如今的Sun-panel功能越来越强大，除了能作为常规的导航页使用，还能自动检测内外网模式、多账号隔离使用、系统状态查看、Docker管理等等。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rKf58ibh1TqqS7C7MKermJzBic5t20uictlibhIXvluV8MfkZsGAfDH09Cg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="特性" />
当一个项目发展到一定程度的时候一定会出现各种衍生的产物，Sun-Panel也不例外。
虽说默认的界面非常简洁好看，但总会有那么一部分人不满足于简洁的界面，加上Sun-Panel本身终究还是导航页，所以一些民间的第三方大佬就开始想办法了，想让它不那么普通简单，于是Sun-Panel-Helper就诞生了。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rO45K2Kk9TiaickstoOSE28qm9HrkKlZiaY4cCtPq5doVUogKnBZw7lbDg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="助手" />
<h1>项目演示</h1>
<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rTcjWL8V6cFyGemYJ8jrLBxKK3B6Qtw75cjWEWuzgicibZbW3HzSetGKQ/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" />
从知道这个项目开始，熊猫一直使用的就是它，Sun-Panel-Helper熊猫搭建尝试了一下，但因为习惯了之前使用的界面所以也就没有去做大量修改，这里贴一些网友们的成果图。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0ruOjGHXSKfwdfQeUdsQWZzh38pUs1DNhfmfUT5Vibfq0GsHqJfkwPwCA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="示例" /><img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rUrFuKoefVE6mrHHXYWJ1XEABjCWadHhuCWN7HyWiaPmddJP7Nn8xniaw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="示例" /><img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0ryVwialIVOVLibe5UoyWicPHmicKgqSWCorWkuBFXHy5TnK6whCnX4f5YsA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="示例3" />
不得不说NAS玩家是真爱折腾啊，不过看到这些到导航页也让我想起了我刚开始接触Docker和导航页的时候，也是一个界面能折腾一天，图标从圆角调到直角，排列从竖排设成并排，也不知道折腾完有什么用。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rn5ur0BL8b0QZ1fzYFKs7PBwicbJSFq7I28S60k53UkLISZubUibv6O4w/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="Sun-Panel-Helper" />
Sun-Panel-Helper说直白点就是Sun-Panel的主题编辑器，通过该工具能实现对Sun-Panel界面的直接修改，加上本身还有组件市场的存在，也能为Sun-Panel提供一些扩展性功能，例如上面示例中的天气、敲木鱼以及网页音乐播放器等等。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0ra5UrteFIQFfMiaH0up2FWvib58D0uB5cvLvtuVibyQB1uNc39hW1rMC5w/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="美化库" />
项目内置了一些CSS美化代码，通过美化库就能实现一键部署实时生效，不需要懂什么代码知识就能使用，同时项目也附带了JS功能库，通过JS能实现给导航页增加音乐播放器、搜索框一言甚至AI助手等等。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rCulVjSxV0smDZIzJFK7Ra6ZsNgHLFF52Wox8pHYTllBH0kpjoZCh5w/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="JS功能库" />
组件市场也为Sun-Panel的界面美化增加了不少玩法，加上第三方小组件的存在，Sun-Panel的功能性增加了不少。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0rmTCJDyPrEP1lAyXumz2DXVa40w1nwWzvFN4VeMkstlIU4prwL6fyKg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="组件市场" />
<h1>项目部署</h1>
如果你已经部署了Sun-Panel，那么只部署该项目即可，不过需要注意的是其中的映射路径需要更改一下/app/backend/custom路径为Sun-Panel的custom目录，这个必须要映射好才行，Sun-Panel-Helper原本的compose文件代码如下，根据自己设备情况调整代码即可。
<pre><code>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
</code></pre>
如果你NAS中原本就没有Sun-Panel，那么也可以使用compose堆栈的方式同时部署两个项目，其中的路径根据自身的NAS环境更改即可。
<pre><code>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
</code></pre>
这里熊猫用的是绿联的NAS，不过极空间最新版本也已经支持compose部署，也算是补全了极空间Docker目前不方便部署堆栈项目的缺点了。<img src="https://www.niumabbs.com/NM-DIY/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/tmLMf1cy8bHZicIK9rKlDXXJPuNGVBB0r3F8DnOI3R4PiaKBydaRG6ia1gW7S8zCEY5fCq8EwfO0xdNZKHmFtnCfA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="极空间compose" />
<h1>写在最后</h1>
都说“美化的尽头是默认”，但其实，适当的美化不仅能让界面更好看，还能为项目本身增添一些功能性。当然了，这背后是需要花点心思去折腾的。如果想直接上手就用，默认配置其实也完全够用了。

页: [1]

3BBS's Archiver

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