#热门
Nas搭建HomePage导航页,超详细教程

2023-12-23 0 966

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

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

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

  • 主要流程目录:
  • 1.安装
  • 2.使用
  • 2.0.编辑修改
  • 2.1.settings.yaml
  • 2.2.widgets.yaml
  • 2.3.services.yaml
  • 2.4.bookmarks.yaml
  • 3.效果

1.安装

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

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

这里默认就行

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

2.使用

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

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

可以修改为深色背景

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

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

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

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

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

2.0.编辑修改

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

Visual Studio Code

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

在线yaml编辑器

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

2.1.settings.yaml

整体设置文件

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

打开“settings.yaml”

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

设置语言为中文

language: zh-CN

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

修改以后(原本应用语言英文变为中文,下面没变是因为文本就是英文)

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

设置网页名称

title: David Homepage

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

修改以后

Nas搭建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

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

修改以后

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

2.2.widgets.yaml

顶部内容

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

打开“widgets.yaml”

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

设置硬盘容量

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

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

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

设置容量

– resources: disk: /disk1

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

修改以后

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

设置搜索栏为百度

– search:

provider: baidu

focus: true

target: _blank

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

可以看到百度logo(需要回车进行搜索)

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

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

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

这个就是我的经纬度了

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

参考修改

– 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

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

修改以后
Nas搭建HomePage导航页,超详细教程

注意这个顺序也是有影响的(比如天气和搜索栏调换位置)
Nas搭建HomePage导航页,超详细教程

修改以后

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

设置时间显示

– datetime:

text_size: xl

format:

timeStyle: short

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

修改以后

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

2.3.services.yaml

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

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

打开“widgets.yaml”
Nas搭建HomePage导航页,超详细教程

设置为图标

– 内网访问:

– Emby:

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

href: http://192.168.31.50:8096

description: 影音服务器

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

修改以后

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

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

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

影音服务(可以看到播放的电影,可以控制暂停和播放)

– 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里面的密钥

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

下载器(可以看到种子数量,上下带宽速度等)

– 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

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

2.4.bookmarks.yaml

底部书签内容

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

打开“bookmarks.yaml”

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

这里我将名称改为图标(官网+“/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/

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

修改以后

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

3.效果

PC端

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

移动

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!