扫描二维码关注官方公众号
返回列表 发布新帖

[玩法/技巧] 用Homepage搭建一个好看的群晖应用导航页

4643 15
发表于 2023-11-6 17:09:11 | 显示全部楼层 阅读模式

来吧兄弟,一起玩一起讨论!

您需要 登录 才可以下载或查看,没有账号?注册

×
本帖最后由 gasment 于 2023-11-7 09:40 编辑

私人服务导航页应用有很多,今天介绍一下homepage
先上效果图:
效果图.png
homepage是纯文本配置布局的,没有图形界面配置,所以会有那么一点上手门槛,好在官方文档比较详细,琢磨下还是比较好理解的
官方项目地址:https://gethomepage.dev
先把Docker容器部署起来:
这里用docker compose方式比较简易,dsm7.2也有了图形化的docker compose界面
进入群晖后台,打开container manager ,转到项目,新增如图:
docker-compose.png
docker-compose.yml示例:(内容格式缩进有要求,论坛排版可能有出入,注意修改)
version: "3.3"
services:
     homepage:
     image: ghcr.io/gethomepage/homepage:latest
     container_name: homepage
     ports:
         - 3000:3000
     volumes:
         - /home/docker_data/homepage/config:/app/config # Make sure your local config directory exists
         - /home/docker_data/homepage/logo:/app/public/icons
         - /var/run/docker.sock:/var/run/docker.sock:ro # (optional) For docker integrations
    restart: unless-stopped

稍等片刻,container manager会自动完成镜像拉取和容器部署,之后访问群晖ip+3000端口即可访问
可以看到,新部署的界面还是一片荒芜,接下来就是让他丰富起来
使用群晖的文件共享,打开刚才映射的homepage宿主目录,可以看到多了几个yaml文件
  • settings.yaml
注意yaml内文本格式与缩进有要求,错误的格式将导致homepage页面崩溃,建议使用vscode等编辑软件修改
修改可实时生效,刷新页面可查看效果(新加入的图标图片需要重启容器才能加载)
建议每修改一处,就刷新检查,更容易定位错误
providers:
    openweathermap: openweathermapapikey
    weatherapi: weatherapiapikey            #以上两个是天气组件的api,不作修改

language: zh-CN     #设置语言
headerStyle: clean   #标题样式,改变搜索框样式,有几个可选样式,详情参阅官方文档
title: Priv-Cloud 导航   #页面title,位于页面左上角
fiveColumns: true    #5列模式,开启横向5列布局

layout:        #layout布局,下面每一项就是每列的标题,参考我的效果图

   应用书签:
       style: column         #排列方式有行和列两种
       icon: /icons/app.png   #定义标题图标位置
  
    后端管理:
        style: column
        icon: /icons/server.png

    Docker服务总览:
        style: column
        icon: /icons/docker.png

    Docker应用状态:
        style: column
        icon: /icons/docker-app.png

hideErrors: true   #隐藏错误的显示

background:              
   image: /icons/background.jpg    #设置背景图片
   blur: xl # sm, "", md, xl... see https://tailwindcss.com/docs/backdrop-blur
   saturate: 50 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
   brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
   opacity: 50 # 0-100        #背景模糊参数,后面的网站有详细说明

  • bookmarks.yaml ---根据示例配置即可,bookmarks就是普通的书签,只提供连接跳转,可自定义图标
  • services.yaml
servcies有分带widget和不带widget两类

- 应用书签:                   #这里定格的是一级分类,要与settings.yaml中的layout名称对应
     - FileStation:             #一级分类下的子项
            icon: /icons/filestation.png       #图标配置位置
            href: https://xxxxxx.com:5100/file    #点击后需要跳转到的连接
            description: 群晖文件管理器        #子项描述
            ping: https://xxxxxx.com:5100/file    #链接检测地址,用于显示服务在线、离线状态

上面是简单的不带widget,下面看下带widget的,我们在上面项续写(注意缩进格式):

- 应用书签:
      - FileStation:
           icon: /icons/filestation.png
           href: https://xxxxxx.com:5100/file
           description: 群晖文件管理器
           ping: https://xxxxxx.com:5100/file

     - Jellyfin:
          icon: /icons/jellyfin.png
          href: https:/xxx.com:8920
          description: 多媒体影音库
          ping: https:/xxx.com:8920
          widget:
             type: jellyfin
             url: http://192.168.x.x:8096
             key: 0cf76eb9602941ba922474e3********
             enableBlocks: true # optional, defaults to false
             enableNowPlaying: true # optional, defaults to true

homepage支持很多常用widget,widget参数根据不同的service有所不同,详细设定参阅官方文档

  • docker.yaml
这里配置需要监控的docker主机地址
N1-docker:          #定义docker宿主机名称
    socket: /var/run/docker.sock     #使用socket连接至本地主机
    swarm: true

DSM-docker:
    host: 192.168.x.x  #推荐远程docker宿主机部署dockerproxy来提供连接接口
    port: 2375   #dockerproxy端口

这里贴下远程docker主机部署dockerproxy的compose参数

version: "3.3"
services:
dockerproxy:
    image: ghcr.io/tecnativa/docker-socket-proxy:latest
    container_name: dockerproxy
    environment:
        - CONTAINERS=1 # Allow access to viewing containers
        - SERVICES=1 # Allow access to viewing services (necessary when using Docker Swarm)
        - TASKS=1 # Allow access to viewing tasks (necessary when using Docker Swarm)
        - POST=0 # Disallow any POST operations (effectively read-only)
    ports:
        - 2375:2375
    volumes:
        - /var/run/docker.sock:/var/run/docker.sock:ro # Mounted as read-only
    restart: unless-stopped

监控总体docker容器在线情况,可以在servcies.yaml中配置portainer-ce的子项,配置对应的widget即可
需要监控单个docker容器状态,可以在servcies.yaml中配置对应的子项,如:

    - Mysql 8:
       icon: /icons/mysql.png
       href: http://localhost/     #我这里只做监控,如果需要点击跳转,配置对应地址即可
       description: mysql 8 数据库服务
       server: DSM-docker    #这里server就是docker宿主机,必须与docker.yaml中定义的一样,容器在哪个宿主就填哪个
       container: mysql-8   #容器名称,必须与容器实际名称一致
       showStats: true    #展示容器详情

  • widgets.yaml

- search:   #设置搜索引擎参数
    provider: [bing, google, baidu] # google, duckduckgo, bing, baidu, brave or custom
    focus: true # Optional, will set focus to the search bar on page load
    target: _blank # One of _self, _blank, _parent or _top

- openmeteo:    #配置地理位置信息用于天气检索
    label: 地名 # optional
    latitude: xxx   #维度
    longitude: xxxx  #经度
    timezone: Asia/Shanghai # optional
    units: metric # or imperial
    cache: 5 # Time in minutes to cache API responses, to stay within limits

- logo:
    icon: /icons/logo.jpg    #页面左上角logo

- greeting:
    text_size: xl
    text: Priv-Cloud 导航   #页面左上角标题

- resources:
    label: 系统状态
    cpu: true     #显示CPU使用率
    memory: true  #显示内存使用率

- resources:
    label: 系统盘
    disk: /volume1   #显示磁盘使用率

大体配置就是这样了,还有很多玩法,官方文档很详细,这里不做过多介绍了
这里提醒下,由于homepage目前还没有密码登录的功能,就这样放上去外网就一丝不挂了
我们可以使用nginx proxy反向代理功能,添加一个Basic认证来解决登录问题(如图)
login.png
至于怎么配置反代,我这里推荐一个非常方便快捷的工具【Lucky (lucky666.cn)】,大家有兴趣的我可以再开一贴介绍下

最后附上我自己做的一些图标,图标大家可以自己找图片素材,用在线抠图工具制作即可
游客,如果您要查看本帖隐藏内容请回复





评论15

lanmao09Lv.3 发表于 2023-11-7 21:06:24 | 显示全部楼层

感谢分享!
回复 点赞

使用道具 举报

gbn0102Lv.8 发表于 2023-11-7 23:26:46 | 显示全部楼层
感谢分享。。。
回复 点赞

使用道具 举报

slaiyanLv.7 发表于 2023-11-9 09:17:34 | 显示全部楼层
我学习学习
回复 点赞

使用道具 举报

meteorkongLv.3 发表于 2023-11-13 10:17:14 | 显示全部楼层
楼主发贴辛苦了,谢谢楼主分享!
回复 点赞

使用道具 举报

lerserLv.10 发表于 2023-11-16 21:46:37 | 显示全部楼层
多谢分享
回复 点赞

使用道具 举报

点滴记忆Lv.8 发表于 2023-11-20 10:32:50 | 显示全部楼层
楼主发贴辛苦了,谢谢楼主分享!
回复 点赞

使用道具 举报

750777717Lv.2 发表于 2023-12-4 12:11:16 | 显示全部楼层
好东西呀
回复 点赞

使用道具 举报

aronyfhjLv.5 发表于 2023-12-8 12:18:10 | 显示全部楼层
看看怎么样
回复 点赞

使用道具 举报

314376898Lv.4 发表于 2023-12-13 08:31:25 | 显示全部楼层
看看怎么做的
回复 点赞

使用道具 举报

sus262VIPLv.3 发表于 2024-2-7 23:00:15 | 显示全部楼层
这是好东西。
回复 点赞

使用道具 举报

qq52516955Lv.3 发表于 2024-3-7 09:17:00 | 显示全部楼层
感谢分享!

回复 点赞

使用道具 举报

DamonCYVIPLv.10 发表于 2024-3-26 09:58:55 | 显示全部楼层
感谢分享!
回复 点赞

使用道具 举报

云起Lv.2互助团队 发表于 2024-4-30 12:13:15 | 显示全部楼层
谢谢大佬分享
回复 点赞

使用道具 举报

ais9009Lv.3 发表于 2024-5-13 20:20:35 | 显示全部楼层
已经很详细了 跟着做就能做好了 谢谢兄弟
回复 点赞

使用道具 举报

svenlone126Lv.2 发表于 2024-5-14 22:54:34 | 显示全部楼层
谢谢分享
回复 点赞

使用道具 举报

回复

懒得打字嘛,点击右侧快捷回复 【本站酷狼4T,750元】
您需要登录后才可以回帖 登录 | 注册

本版积分规则

投诉/建议联系

support@gebi1.cn

未经授权禁止转载,复制和建立镜像,
如有违反,追究法律责任
  • 关注公众号
  • 添加微信客服
Copyright © 2001-2024 隔壁网 版权所有 All Rights Reserved. 粤ICP备14056481号-1
关灯 在本版发帖
扫一扫添加微信客服
返回顶部
快速回复 返回顶部 返回列表