前言

NAS 上的应用部署多了之后，不同的服务对应的端口很难记住，在内网中使用，一般也不会绑定域名。

此时就需要有一个导航页将 NAS 上部署的所有服务都罗列出来，方便我们直接点击访问对应的服务。

今天给大家介绍的 Homepage 就是一款外观简约，但功能丰富的导航页应用，除了能够展示常规的书签以外，还可以展示天气、系统状况、Docker 容器状态等信息。

默认样式

安装

Homepage 的安装非常简单，可以直接通过官网提供的 Docker Compose 进行启动，不过需要修改以下几点：

• 作为导航页，建议把映射的端口修改为 80 或者使用 Nginx 反向代理一下，这样访问时不需要加上端口，方便一些

• 其中的 /path/to/config 是存放配置文件的路径，建议设置为常用路径，后面配置页面时需要经常使用

• 如果需要用到本地 icon 的话，还需要映射 /path/to/icons:/app/public/icons 目录

version: "3.3" services:  homepage:    image: ghcr.io/gethomepage/homepage:latest    container_name: homepage    ports:      - 3000:3000    volumes:      - /path/to/config:/app/config # Make sure your local config directory exists      - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations

配置

由于 Homepage 的页面布局依赖 yaml 文件，因此安装完成后，会自动在映射的路径中生成各类配置文件

• settings.yaml：设置

• bookmarks.yaml：书签

• services.yaml：服务

• widgets.yaml：小组件

• custom.css：自定义 CSS

• custom.js: 自定义 JavaScript

设置

settings.yaml 是 Homepage 的设置，可以修改语言、标题、主题布局等，完整的设置可以参考官方文档 Settings

首先对 Homepage 的默认配置做一点点修改，让它看起来更加简洁

页面的布局也是在 settings.yaml 中进行修改，不过为了展示修改前后的区别，将放到最后介绍如何进行配置

language: zh-CN # 中文 theme: light # 白色主题 color: gray # 设置颜色并禁用调色盘 hideVersion: true # 隐藏版本号

服务

services.yaml 用于配置服务以及服务组件，服务可以分为多个组，一个组中也可以包含多个服务

每一个服务可以通过 icon hreaf description 来设置服务的 Logo 链接以及描述

icon 如果是本地图片，需要将目录映射到 /app/public/icons ，在配置时填写图片名即可

服务

- 搜索引擎:    - Google:        icon: google.png        href: https://google.com        description: 一个好用的搜索引擎    - 百度:        icon: baidu.svg        href: https://baidu.com        description: 一个可能好用的搜索引擎 - 网盘:    - 百度网盘:        icon: baidudrive.png        href: https://pan.baidu.com    - 阿里云盘:        icon: alidrive.png        href: https://www.alipan.com    - 123云盘:        icon: 123pan.png        href: https://www.123pan.com/

此外，通过服务组件，还可以展示其他应用的状态，以 Uptime Kuma 为例，通过添加 widget 后，可以展示出 Uptime Kuma 中的相关信息，支持的应用可以参考官方文档 Service Widgets

服务组件

- 服务:    - Uptime Kuma:        icon: uptime-kuma.svg        href: http://ip:3001        widget:          type: uptimekuma          url: http://ip:3001          slug: statuspageslug

书签

bookmarks.yaml 用于配置书签，书签像是低配版的服务，功能比服务少一些，配置起来也比较相似

书签

- 书签:    - Google:        - abbr: GG          href: https://google.com    - YouTube:        - abbr: YT          href: https://youtube.com/    - Github:        - abbr: GH          href: https://github.com/

小组件

widgets.yaml 文件是用于配置上方的小组件的，例如默认的系统资源占用率、搜索引擎，除此之外，还可以配置日期、时间、欢迎语、Logo 等等功能，具体可以参考官方文档 Information Widgets 部分，需要的组件直接复制添加到 widgets.yaml 中即可

小组件

布局

布局可以在 settings.yaml 中通过 layout 进行配置，默认布局是纵向排列。

默认布局

通过 style 与 columns 可以将其改为横向排列，并且指定列数，更多的配置参考官方文档 Layout 部分

修改布局后

layout:  服务:    style: row    columns: 4  搜索引擎:    style: row    columns: 4  网盘:    style: row    columns: 4  书签:    style: row    columns: 8

极简模式

如果你恰巧和我一样，喜欢极简的导航页，可以使用我仿照 Homepage 样式写的纯 HTML CSS 导航页 homepage-lite ，不过不支持修改布局以及服务组件

需要用到这些功能的可以直接使用 Homepage 通过 custom.css 自定义样式，让页面显得更加的清爽

极简模式

/* service */ .service .service-card {  margin-bottom: 0.75rem; } .service .service-icon {  padding: 10px;  width: initial; } .service .service-icon img {  height: 64px !important;  width: 64px !important; } .service .service-name {  font-size: 1.25rem;  line-height: 1.25rem; } /* bookmark */ .bookmark a {  height: 2.75rem; } .bookmark .bookmark-icon, .bookmark .bookmark-description {  display: none; } .bookmark .bookmark-name {  font-size: 1rem;  text-align: center;  line-height: 2.75rem;  padding: 0; }