【HomePage】 - 实用的个人主页（二）

Carolcoral

【HomePage】 - 实用的个人主页（二）

前面【HomePage】 - 实用的个人主页（一）我们已经讲解了HomePage的部署和基础配置使用，这里我们将要讲解如何通过配置对站点可用性的检测、分类的图标设置、容器实时状态的监控等内容

效果图

使用

⚠️ 注意

如果配置以下内容最好更新HomePage版本大于等于v0.8.2
此外在v0.8.2版本修复了Calibre-web 的异常，我们可以正确获取到书籍数量、作者数量等信息进行展示了

Docker Compose

因为我们需要对容器进行监控，虽然HomePage提供通过 <IP>:<PORT> 方式进行数据信息获取，但是并不是每一个容器都能提供对应的API接口，所以采用该方式你会发现大部分的服务会显示 404 错误提示

此外，也不建议使用容器的自动发现主动注册容器到 HomePage 中，当容器意外中断或重复启动后，会无限、重复多次注册相同容器

因此，我们这里采用的最稳定的 docker.sock 方式进行容器监控

⚠️注意

如果你的当前用户没有docker.sock的读写权限（通常NAS上只有root用户才有权限）请修改配置文件中的PUID、PGID为root用户对应值

version: "3.3"
services:
  homepage:
    image: ghcr.io/gethomepage/homepage:v0.8.2
    container_name: homepage
    ports:
      - 3002:3000/TCP
    deploy:
      resources:
        limits:
          memory: 1G
    volumes:
      - ./config:/app/config
      - ./logs:/logs
      - ./icons:/app/p(๐•ᴗ•๐)lic/icons
      - ./images:/app/p(๐•ᴗ•๐)lic/images
      - /var/run/docker.sock:/var/run/docker.sock:ro
    environment:
      - PUID=0
      - PGID=0
    restart: always
    network_mode: "bridge"
                    if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
                    }

配置

分类图标

想要给分类前加上好看的图标只需要修改 config/settings.yaml 文件即可

添加图标图片文件红需要重启容器，如果图片文件名相同的更新添加则不需要

layout
- Monitor：分类名（自定义，需要和services.yaml 中保持一致）
- icon：图标，可以在iconfont中下载 .png 文件也可以直接使用官方提供的图标icons
- iconStyle：图标样式
- style：排列方式（竖排、横排）
- columns：单行标签数量

showStats: false

statusStyle: "dot"

instanceName: p(๐•ᴗ•๐)lic

layout:
  Monitor:
    icon: /icons/monitor.png
    iconStyle: theme # optional, defaults to gradient
    style: row
    columns: 2
                    if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
                    }

状态监控

修改 config/settings.yaml 中内容即可

showStats：容器监控信息是否默认展开显示
statusStyle：状态显示样式（dot、basic、default）
instanceName：多主页情况下容器自动注册的名称

showStats: false

statusStyle: "dot"

instanceName: p(๐•ᴗ•๐)lic
                    if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
                    }

站点状态

修改 config/services.yaml 中的配置内容

siteMonitor：站点监控地址（鼠标移动上去会显示站点返回状态码及延迟时间）

- Monitor:
    - Carol 小屋:
        icon: /images/cnkj.png
        href: "https://blog.cnkj.site/"
        siteMonitor: https://blog.cnkj.site/
        server: halo2
        container: halo2
                    if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
                    }

容器监控

需要修改两个文件分别是 config/docker.yaml 和 config/services.yaml

config/docker.yaml 中配置容器的相关信息，内容指标名需要和实际容器名称一致

halo2：实际容器名

halo2:
  socket: /var/run/docker.sock
                    if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
                    }

config/services.yaml 中相关配置内容需要和 docker.yaml 中的配置内容一致

server：docker.yaml 中配置的名称
container：docker.yaml 中配置的名称

- Monitor:
    - Carol 小屋:
        icon: /images/cnkj.png
        href: "https://blog.cnkj.site/"
        siteMonitor: https://blog.cnkj.site/
        server: halo2
        container: halo2
                    if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
                    }