3分钟打造高颜值NAS个人专属导航页 彻底告别Docker应用端口混乱的开源神器
当你在NAS部署很多服务应用，端口号记不住，收藏夹杂乱无章，浏览器默认起始页不支持分组，本期视频教你搭建高颜值个人专属导航页，飞牛os、群晖、绿联nas、极空间、威联通都能使用，内外网访问一键切换，还能设置为浏览器起始页和新标签页，图标统一大小，无需开通收费版本，不用写代码，不喜欢太简洁还能借助Sun-Panel-Helper可视化美化工具打造更加炫酷的界面。
Sun-Panel-Helper演示站： http://demo.cocoyoo.cn/dashboard Sun-Panel演示站： http://home.cocoyoo.cn
Sun-Panel 安装教程
首先我们需要为Sun-Panel和Sun-Panel-Helper建立文件夹，大家跟着我的操作来，如果你在飞牛应用中心安装过Sun-Panel也没关系，后面会教你怎么设置目录。
sun-panel
├database
├uploads
├conf
├custom
sun-panel-helper
├data
├backups
├conf
进入文件管理
进入docker目录
新建目录【sun-panel】
再点击进去新建3个目录【database】【backups】【conf】
再进入conf目录新建【custom】
接下来我们新建Sun-Panel-Helper需要的目录
新建目录【Sun-Panel-Helper】
点击进去新建3个目录【data】【backups】【conf】
开始部署Sun-Panel
启动docker 进入Compose页面 新增项目
名称sun-panel
路径设置为sun-panel目录下的conf
创建docker-compose.yml
复制代码进来
services: sun-panel: image: docker.cnb.cool/srebro/pidin/sun-panel:latest container_name: sun-panel volumes: - ./conf:/app/conf - ./uploads:/app/uploads - ./database:/app/database # - ./runtime:/app/runtime ports: - 3002:3002 restart: always
现在设置目录映射
找到刚刚新建的sun-panel目录
先找到conf目录 选中 鼠标右键 详细信息
复制原始路径
- ./conf:/app/conf
替换掉/app/conf冒号前面的路径
另外2个目录也按此方法操作
勾选 创建项目后立即启动
开始创建项目
等待Sun-Panel项目部署完成
下面我们再来部署Sun-Panel-Helper
部署方法跟Sun-Panel差不多
就是第3个目录custom需要注意一下
复制compose代码进来
services: sun-panel-helper: image: madrays/sun-panel-helper:latest container_name: sun-panel-helper environment: - BACKEND_PORT=3001 # 后端服务端口,可自定义修改避免冲突 ports: - "33002:80" # 前端页面访问端口,可自定义修改避免冲突 volumes: - ./data:/app/backend/data # 必须挂载：Helper的数据目录 - ./backups:/app/backend/backups # 必须挂载：Helper的备份目录 - /path/to/sunpanel/conf/custom:/app/backend/custom # 必须挂载：Sun-Panel的custom目录 应用中心安装的Sun-Panel这里不用管 直接用 restart: unless-stopped
设置前两个目录映射
data和backups对应刚刚sun-panel-helper目录下新建的同名目录
custom需要映射前面应用【sun-panel】【conf】目录下的【custom】
如果是官方应用商店安装的Sun-Panel可以不用管 用默认的就好
替换掉冒号前的路径
等待部署成功 并确认2个应用都成功运行
Sun-Panel使用教程
进入Sun-Panel登录页面
输入账号密码登录
账号：admin@sun.cc 密码：12345678
点击右上角菜单
进入分组管理
新建一个分组用于演示两种展示方式
卡片风格选择小图标
为了保证图标一致和美观
我们需要到HQ ICON平台上下载高清应用图标
https://icon.yukonga.top
好处就是所有图标不论是大小、圆角、尺寸都已经是标准的
不用自己一个个制作和收集了
搜索你需要的平台名称
找到图片另存到电脑
新增项目 填写资料并上传图标
替换背景图片
背景图片下载地址：
https://pan.baidu.com/s/11xFPf5ztAlZ4peDeEvRYiQ?pwd=xkzw
这个就是Sun-Panel简单美化以后的效果
其他功能你都可以设置一下
其中Pro为收费版本功能 暂时用不到就不用管(开发者开源不易 喜欢的可以支持一下)
Sun-Panel-Helper使用教程
进入Sun-Panel-Helper登录页面
输入账号密码登录
默认账号：helper 密码：helper123
主要功能有CSS美化、JS功能、组件市场、固定组件、自由组件、百宝箱和备份恢复
右上角还有使用文档 每个页面也有相应的使用说明
我们简单设置2个美化功能做演示
选中功能以后 点击右上角部署
然后返回面板 刷新就可以看到效果
如果没有就Ctrl+F5强制刷新
根据你的需求使用相应的美化功能
浏览器起始页设置
我们可以将浏览器的开始页和新标签页都设置为Sun-Panel导航
浏览器设置界面 将打开主页设置为你的导航IP:端口号即可
将下载好的Sun-Panel浏览器插件Sun-Panel BE 0.1.6-beta.crx直接拖进去即可安装
插件下载地址：
https://pan.baidu.com/s/11xFPf5ztAlZ4peDeEvRYiQ?pwd=xkzw
新打开一个标签页 点击左下角设置图标
将导航IP:端口号设置成主要地址
如果不想用了 将Sun-Panel浏览器插件删除或卸载就可以了
