您好,欢迎访问本站博客!登录后台查看权限
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 网站所有资源均来自网络,如有侵权请联系站长删除!
  • 了解seo技术,运营知识,营销策略,,MU MU ZHONG CHENG——沐目忠诚
  • 忠告:无论她(他)怎么对你,你都不能伤害她、她有她得难!

Nas搭建HomePage导航页,配置教程

nas 沐目忠诚 2025-04-24 393 次浏览 0个评论
网站分享代码

该篇教程主要讲解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导航页,超详细教程


已有 393 位网友参与,快来吐槽:

发表评论