目录创建

注意事项:群晖docker共享文件夹目录新建homepage,在homepage文件夹下新建config、images、icon 三个文件夹。具体目录路径如下:

/docker/homepage/images
/docker/homepage/icon
/docker/homepage/config


/config 目录下会生成

bookmarks.yaml
docker.yaml
kubernetes.yaml
services.yaml
widgets.yaml
settings.yaml

所有的导航链接和服务功能、软件状态显示都在这几个文件里配置,具体模版配置见具体配置解释文章。

docker-compose代码如下

version: "3.3"
services:
    homepage:
        image: ghcr.io/gethomepage/homepage:latest
        container_name: homepage
        network_mode: bridge #使用docker网络host模式,bridge改为host,用#号注释掉ports 和 端口,
        ports:
            - 3000:3000
        volumes:
            - /volume1/docker/homepage/images:/app/public/images #图标文件夹
            - /volume1/docker/homepage/config:/app/public/icons
            - /volume1/docker/homepage/config:/app/config #配置文件夹
            - /var/run/docker.sock:/var/run/docker.sock
        environment:
            PUID: 0
            PGID: 0
        restart: always

/volume1/ , /volume2/ , /volume3/

为你群晖的存储空间卷,按实际情况填写docker文件夹所在的存储空间卷

bookmarks.yaml模板内容

- 站点收藏: #这里为分组名称 <br>
  - Baidu: #这是书签名称 <br>
    - abbr: Du #这是书签文字图 <br>
      icon: /images/yan.png #站点icon图 <br>
      href: https://www.baidu.com/ #站点链接 <br>
      description: 站点简要说明 <br>

注意事项:

上面代码中“abbr”在无“icon”项目参数时显示文字Du代替图标,两者同时存在优先使用“ICON”项目参数

/images/yan.png

目录为我们之前DOCKER中映射的

/docker/homepage/images

自定义图标的.png .jpeg 等文件都必须放入该目录才会被调用

效果如下图:

QQ截图20240203183330.png

services.yaml模板内容

- 状态: #分组
    - NAS:
        icon: /images/DSM.png #自定义图标文件
        href: https://10.0.0.10   #链接
        description: 我的群晖 #服务描述
        ping: 10.0.0.10 #这玩意用ping状态检查机器延时
        widget:
          #fields: ["wanted", "queued"] 指定显示的状态,不指定或不写出该项目则显示所有状态项目
          type: diskstation
          url: https://10.0.0.10 #群晖登陆地址
          username: homepage #不建议使用群晖的管理员用户和密码,请新建一个用户如 homepage 权限赋予见文章末尾截图。
          password: homepage

    - EMBY: #服务名
        icon: emby.png #图标
        href: https://10.0.0.10:8096 #服务链接
        ping: 10.0.0.10 #这玩意用ping状态检查机器延时
        description: EMBY音影服务器 #服务描述
        widget: # 服务组件
          type: emby
          url: http://10.0.0.10:8096
          key: emby中新建api复制进来
          enableBlocks: true # 显示媒体库,默认为false 关闭, defaults to false
          enableNowPlaying: false # 显示播放状态,默认为true 开启, defaults to true

    - qBittorrent:
        icon: /images/qb.png
        href: https://10.0.0.10:8080 qb地址
        description: qBittorrent下载器  #服务描述
        ping: 10.0.0.10
        widget:
          type: qbittorrent
          url: http://10.0.0.10:8080
          username: admin
          password: adminadmin

    - transmission:
        #icon: qBittorrent.png
        icon: transmission.png
        href: https://10.0.0.10:9091
        description: transmission下载器  #服务描述
        ping: 10.0.0.10
        widget:
          type: transmission
          url: http://10.0.0.10:9091
          username: admin
          password: adminadmin

    - Download Staion:
        icon: /images/download.png
        href: https://10.0.0.10 #套件连接地址
        description: Download Staion下载套件  #服务描述
        #ping: 10.0.0.10
        ping: 10.0.0.10
        widget:
          type: downloadstation
          url: https://10.0.0.10
          username: homepage  #不建议使用群晖的管理员用户和密码,请新建一个用户如 homepage 权限赋予见文章末尾截图。
          password: homepage

注意事项:

/images/yan.png

目录为我们之前DOCKER中映射的

/docker/homepage/images

自定义图标的.png .jpeg 等文件都必须放入该目录才会被调用

关于widget项目

该项目主要用途为显示各个服务的状态,每个 widget 都会有 type 参数对应模式,具体参见官方开源项目文档。https://gethomepage.dev/latest/widgets/

权限赋予截图:

0.png

1.png

2.png

效果图如下:

00.png

settings.yaml 配置解释

language: zh-CN

# 隐藏版本号
hideVersion: true 
# 网站标题
title: 焱智云|记录所见所得 

# icon图标
favicon: https://www.XXX.cn/myimg/favicon.ico

# 关闭折叠效果
disableCollapse: true

# 新窗口打开方式 include _blank, _self,  _top
target: _blank 

#docker统计信息
showStats: true

# ping状态样式 dot 或者 basic dot为绿点,basic为down或up 显示ping
statusStyle: "dot"

#隐藏错误调试信息
hideErrors: true

##快速启动
##      searchDescriptions:允许您控制搜索中是否包含项目描述。默认情况下,此功能处于关闭状态。启用后,与项目名称匹配的结果将放置在仅与描述匹配的结果之上。
##  hideInternetSearch:禁用自动将当前选择的 Web 搜索(例如从小部件中)作为快速启动选项。默认情况下,这是 false,启用该功能。
##  hideVisitURL:禁用检测并提供打开 URL 的选项。默认情况下,这是 false,启用该功能。
quicklaunch:
  searchDescriptions: true
  hideInternetSearch: false
  hideVisitURL: false

#div等高选项
useEqualHeights: true

##############以下是样式表控制部分##################
layout:
  状态: #对应分类名称
    style: row  #排列方式
    columns: 3  #每排3个

  应用:
    style: row
    columns: 4

  GitHub项目收藏:
    style: row
    columns: 4

  站点收藏:
    style: row
    columns: 6

#############api控制部分,如天气等。##################
#providers:
 # openweathermap: openweathermapapikey
 # weatherapi: weatherapiapikey

完整效果:

001.png

widgets.yaml 配置解释


 - greeting:
     text_size: xl   #站点字体
     text: 你的站点名称

 - resources:
     cpu: true  #CPU占用信息 false为关
     memory: true #内存占用信息 false为关
     disk: /   #磁盘使用情况

 - search:            #搜索引擎配置
     provider: custom
     url: https://www.wuzhuiso.com/s?src=extension_popup&q=
     target: _blank

 - datetime:   #时间配置
     text_size: xl   #字体大小
     format:  
       dateStyle: short   #短格式
       timeStyle: short   #短格式
       hour12: false    # true为12小时模式 false为24小时模式

更多配置信息见股官方地址

https://gethomepage.dev/latest/widgets/info/datetime/