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

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

  • 主要流程目录：

    1. 安装
    1. 使用

  • 2.0. 编辑修改

  • 2.1.settings.yaml

  • 2.2.widgets.yaml

  • 2.3.services.yaml

  • 2.4.bookmarks.yaml

    1. 效果

  1. 安装

  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”）

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

关注 品牌 粉丝：

  • 商品百科

  • 好价

  • 社区文章

it:

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

  • Entertainment:

  • YouTu:

  • abbr: YT

href: https://you.com/

修改以后

  1. 效果

PC 端

移动端

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