Nas搭建HomePage导航页，超详细教程

该篇教程主要讲解HomePage的安装和简单使用

HomePage：一个现代（完全静态、快速）、安全（完全代理）、高度可定制的应用程序仪表板，集成了超过25种服务和超过15种语言的翻译。通过YAML文件轻松配置（或通过docker标签发现）。

• 主要流程目录：

• 1.安装

• 2.使用

• 2.0.编辑修改

• 2.1.settings.yaml

• 2.2.widgets.yaml

• 2.3.services.yaml

• 2.4.bookmarks.yaml

• 3.效果

1.安装

去到应用商店“应用”，搜索“homepage”

这里默认就行

2.使用

安装完成，目前只有默认内容

可以修改为深色背景

来到映射路径，可以看到好几个文件（需要编辑yml文件才能进行样式修改）

下面不会每个文件，每个功能都会说到，强烈建议打开文件，可以看到顶部都有文档链接，自行参考修改。

2.0.编辑修改

不要用记事本打开直接编辑！！！一定要用编辑器进行修改，比如”Visual Studio Code“，如果没有可以在线进行编辑。

Visual Studio Code

在线yaml编辑器

2.1.settings.yaml

整体设置文件

打开“settings.yaml”

设置语言为中文

language: zh-CN

修改以后（原本应用语言英文变为中文，下面没变是因为文本就是英文）

设置网页名称

title: David Homepage

修改以后

设置背景

必应每日壁纸：https://www.bing.com/th?id=OHR.WatSriSawai_ZH-CN7688908090_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp

二次元风景：https://t.mwm.moe/fj

二次元动漫：https://t.mwm.moe/ycy/

background:

image: https://www.bing.com/th?id=OHR.WatSriSawai_ZH-CN7688908090_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp

blur: sm

saturate: 50

brightness: 50

opacity: 50

修改以后

2.2.widgets.yaml

顶部内容

打开“widgets.yaml”

设置硬盘容量

首先需要编辑映射你需要显示的（需要显示多少个就映射多少个）

设置容量

- resources: disk: /disk1

修改以后

设置搜索栏为百度

- search:

provider: baidu

focus: true

target: _blank

可以看到百度logo（需要回车进行搜索）

设置天气组件，打开Open-Meteo官网，点击获取经纬度

这个就是我的经纬度了

参考修改

- openmeteo:

label: 广州 # optional

latitude: 23.18

longitude: 113.37

timezone: Asia/Shanghai # optional

units: metric # or imperial

cache: 5 # Time in minutes to cache API responses, to stay within limits

修改以后

注意这个顺序也是有影响的（比如天气和搜索栏调换位置）

修改以后

设置时间显示

- datetime:

text_size: xl

format:

timeStyle: short

修改以后

2.3.services.yaml

首先需要修改的是这块内容

打开“widgets.yaml”

设置为图标

- 内网访问:

- Emby:

icon: https://heizicao.gitee.io/my-icon/icon/embyserver.png

href: http://192.168.31.50:8096

description: 影音服务器

修改以后

一些比较特别的应用，这些都有适配的

影音服务（可以看到播放的电影，可以控制暂停和播放）

- Emby:

icon: https://heizicao.gitee.io/my-icon/icon/embyserver.png

href: http://192.168.31.50:8096

description: 影音服务器

widget:

type: emby

url: http://192.168.31.50:8096

key: emby里面的密钥

下载器（可以看到种子数量，上下带宽速度等）

- qBittorrent:

icon: https://heizicao.gitee.io/my-icon/icon/embyserver.png

href: http://192.168.31.50:8083

description: 种子和磁力链接下载工具

widget:

type: qbittorrent

url: http://192.168.31.50:8083

username: admin

password: password

2.4.bookmarks.yaml

底部书签内容

打开“bookmarks.yaml”

这里我将名称改为图标（官网+“/favicon.ico”）

- Github:

- icon: https://www.baidu.com/favicon.ico

href: https://www.baidu.com- Social:

- Reddit:

- icon: https://www.bilibili.com/favicon.ico

href: https://www.bilibili.com/

- Entertainment:

- YouTu:

- abbr: YT

href: https://you.com/

修改以后

3.效果

PC端

移动端

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～