高颜值的 NAS 应用导航 - Homepage

2024-04-23 01:07:1211点赞127收藏8评论 NAS 上装的应用一旦多了，各种端口记起来很麻烦，虽然加个书签也能解决问题，但是如果要分享给家人或者朋友用，还是不太方便。之前也折腾过这个 Homepage ，但是维护起来并不容易，每个应用都需要单独配置 icon，好处就是自定义程度高，配好了就非常好看。 为了能让大家更简单的使用 Homepage，降低上手成本，你可以根据我这个教程来配置，使用我提供的 Docker 安装模板 （ 如何使用模板? ）和 配置文件 ，十几分钟就可以自定义出专属的 Homepage。

安装应用 ​

将配置文件下载，然后解压，将整个 homepage 目录上传到 docker 的应用数据目录 /mnt/user/appdata 下面。 33tkv4ee.cjn_vNrnD5 通过模板安装 Homepage ，所有的设置都不需要修改，直接点应用安装。 vl5rlwbq.kkx_5MXtes

自定义配置 ​

装好之后，就可以根据下面的说明来配置。 推荐使用 FileBrowser 在浏览器里直接打开编辑 /mnt/user/appdata/homepage/config 里的配置文件，需要改的配置基本都在 services.yaml 和 settings.yaml 里面。

设置 Service ​

打开 services.yaml 文件。 rt0vw24f.xuc_xBvN4E Homepage 页面上每个链接都是一个 Service，每个 Service 既可以是一个 Docker 应用，也可以是一个链接。多个 Service 可以组合成为一个 Group，比如 下载工具 、 文件服务 等等。 可以先把所有的 IP 地址替换为自己的 NAS IP，再来修改 Service。 以 iStoreOS 这个链接为例： - iStoreOS: icon: /images/dashboard_icons/openwrt.png href: http://192.168.2.1 description: [路由器](https://www.smzdm.com/fenlei/luyouqi/) siteMonitor: http://192.168.2.1 icon 代表图标，href 是链接地址，description 是描述，siteMonitor 是 监控 信息，会在右上角显示 ping 延迟。 5XYAcD_1OvRQ8 以 SpeedTest 这个 Docker 应用为例： - SpeedTest: icon: /images/HD-Icons-main/svg/Librespeed_A.svg href: http://192.168.2.2:9000 description: 内网测速工具 container: SpeedTest 和上面的 iStoreOS 有区别的只有 siteMonitor 变成了 container，因为这是个 Docker 应用，可以把 SpeedTest 这个应用的 Docker 应用名字填到 container 后面，就能在 Service 的右上角显示这个应用的状态。 VKWyJd_xbsIhr 如果有不需要的应用，可以使用 # 将整个 Service 都注释掉。 nt5dfbi0.hx2_ytBb00 建议修改的时候，再开一个浏览器窗口并排显示，这样修改并保存后，刷新就可以看到修改的效果，如果有出错的地方，也可以及时修改。 mx1y2gl3.a5f_5KnqLs

Widgets ​

有些 Docker 应用， homepage 单独为其定义了 Widgets，可以用来多展示一部分信息。比如： hgf32azo.4bt_pqyZqT 所需的配置信息可以到 官方文档 查找。 以 immich 为例，相关的配置信息如下： widget: type: immich url: http://immich.host.or.ip key: adminapikeyadminapikeyadminapikey 需要到 immich 后台创建一个 key，把 url 和 key 填到对应的位置，并把整个 widget 填到 Service 下面： - Immich: icon: /images/HD-Icons-main/border-radius/Immich_D.png href: http://192.168.2.2:2283 description: 照片管理 container: immich_server widget: type: immich url: http://192.168.2.2:2283 key: rUMzIjDYbPRJYvxc4LLyNgWP2kqNJnkVYLO6ndXvww

替换背景图 ​

背景图位于 /homepage/public/images 下面，我用的就是这里的 background.jpg ，如果你想换成自己喜欢的，可以把图片上传到这个位置。并在 /homepage/config/settings.yaml 中把对应的 image 路径改为新的路径。

布局 ​

默认的布局是 row，每行 5 列，相关的配置可以在 /homepage/config/settings.yaml 中修改。

使用 icon ​

我提前下载好了两套 icon，位于 /homepage/public/images 下面，涵盖了常用的网站 logo 和应用 icon。如果需要查找 icon，可以在 FileBrowser 里使用关键字搜索。 e1zt15ma.isu_qKKhCX 比如搜索 alist ，就出现了好几个 icon。 rw3jsmu4.ajw_hAb5d1 可以点某个 icon 具体看下，有哪个是自己想要的， 鼠标 右键对应的路径复制下来，比如： http://192.168.2.2:8000/files/appdata/homepage/public/images/HD-Icons-main/border-radius/Alist_B.png 在路径中把 public 后面的都复制一下，这就是 icon 的路径。 /images/HD-Icons-main/border-radius/Alist_B.png 粘贴到 Service 的 icon 后面，刷新 homepage 就可以看到效果。 作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～