介绍一款漂亮强大的导航应用，初次使用HomePage

小码农薛尧

发布于 2026-01-22 10:14:33

1080

文章被收录于专栏：小码农薛尧小码农薛尧

家里的小主机安装了许多服务，每个服务都有一个网页地址，为了能够快速打开对应地址，在网上找了许多个性化导航应用，

目前常用的Heimdall、Sun-Panel等，我在飞牛的应用中心看到了一款HomePage应用，此款应用可以测试服务的通断，还提供一些插件的使用，我弄的页面是这个样子。

上面包含的CPU、内存、磁盘、天气组件。

我来介绍一下如何使用，我是用Docker安装这个服务，有其它问题，你可以查看它们官网的文档。

Docker Compose脚本如下：

services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    restart: always
    ports:
      - 13000:3000
    volumes:
      - ./config:/app/config # Make sure your local config directory exists
      - ./icons:/app/public/icons        #图标挂载路径
      - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations, see alternative methods
    environment:
      HOMEPAGE_ALLOWED_HOSTS: localhost:13000,192.168.3.209:13000 # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
      PUID: 1000
      PGID: 1000

我们需要把服务的配置文件夹挂载到本地目录中，还有挂载一个图标的目录，来保存应用的图标和图片。

运行构建服务后，我的目录是这样子的

下面来介绍一下config目录下的文件

我的配置也是从别人那里复制过来修改的，主要涉及的文件包含如下：

widgets.yaml

---
- logo:
    icon: https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/I_Love_New_York.svg/1101px-I_Love_New_York.svg.png # optional



- resources:
    label: 资源监控
    cpu: true
    memory: true

- resources:
    label: 存储  
    expanded: true
    disk:
      - /

- search:
    provider: bing
    focus: true
    target: _blank

- datetime:
    text_size: md
    format:
      dateStyle: short
      timeStyle: short
      hourCycle: h23

# 地图插件
- openweathermap:
    label: 苏州                 #城市名称
    latitude: 31.30              #经纬度
    longitude: 120.59             #经纬度
    units: metric  
    apiKey: ******                #注册并获取API密钥，访问OpenWeatherMap，注册一个账户并创建一个API
    cache: 5

settings.yaml

---
# For configuration options and examples, please see:
# https://gethomepage.dev/configs/settings

title: Home      #自定义标题
#hideVersion: true     #隐藏页面系统版本
background: /icons/background-two.png   #页面背景
language: zh-CN
layout:               #行版布局
  笔记:
    style: row
    columns: 4
  服务:
    style: row
    columns: 5
  下载:
    style: row
    columns: 3
  标签:
    #icon: bq.png       #可以加图标
    style: row
    columns: 7

providers:
  openweathermap: openweathermapapikey
  weatherapi: weatherapiapikey

定义了背景图片、布局、天气服务等配置。

其它服务我都写在services.yaml

---
# For configuration options and examples, please see:
# https://gethomepage.dev/configs/services

- 笔记:
    - Affine:
        icon: /icons/qmohf9.png
        href: http://192.168.3.209:3010
        description: All In One KnowledgeOS
        siteMonitor: http://192.168.3.209:3010

    - Trilium:
        icon: /icons/qnfnmm.png
        href: http://192.168.3.209:8080
        description: 开源笔记
        siteMonitor: http://192.168.3.209:8080
        widget:
          type: trilium
          url: http://192.168.3.209:8080
          key: ****

    - 思源笔记:
        icon: /icons/qnssn8.png
        href: http://192.168.3.209:6806
        description: 开源笔记
        siteMonitor: http://192.168.3.209:6806

    - Memos:
        icon: /icons/pr70fm.webp
        href: http://192.168.3.209:5230
        description: 随手记
        siteMonitor: http://192.168.3.209:5230

- 服务:
    - FnOS:
        icon: /icons/qi19gz.ico
        href: http://192.168.3.209:5666
        description: 飞牛Nas
        siteMonitor: http://192.168.3.209:5666

    - 图床:
        icon: /icons/qj5tll.png
        href: http://192.168.3.209:8081
        description: 简单的本地图床
        siteMonitor: http://192.168.3.209:8081

    - 文件快递柜:
        icon: /icons/qlzgfp.png
        href: http://192.168.3.209:12345
        description: 取文件像取快递一样
        siteMonitor: http://192.168.3.209:12345

    - Komga:
        icon: /icons/komga.png
        href: http://192.168.3.209:25600
        description: 快来看漫画
        siteMonitor: http://192.168.3.209:25600
        widget:
          type: komga
          url: http://192.168.3.209:25600
          username: ***
          password: ***
          key: *** # optional

我只加了这些服务，