HomeServer仪表盘新欢——Glance

HomeServer仪表盘新欢——Glance

Home-Server
May 9, 2025

用了很多年的 Dashy 作为HomeServer的仪表盘，已经快习惯它丑丑的面板了，但移动端的适配不够好，信息密度低，让我一直寻找替代品， homepage ， homarr ， Heimdall 也一直不尽如人意。最终找到了 Glance ，一个2024年4月才上线的项目，目前star数已经超过上面所有项目，可见其审美是非常在线的。项目主页有配置示例，都是依赖外部api的，拿来即用，可以直观地试用功能。

我的主页 我的主页

Glance界面是三栏布局，跟我的博客一样hhh。顶部可定义多标签页，组件还可以堆叠放置。在移动端，底部有导航条切换栏目，非常便捷。经过一番折腾和widget小组件定制，非常满意，把相关的技术事项记录如下。

移动端 移动端

安装 #

我将glance装在了宿主机上，以便宿主机状态的读取和数据的交互。

git clone https://github.com/glanceapp/glance.git
cd glance
GOOS=linux GOARCH=amd64 go build -o build/glance . # Buildce
sudo cp ./build/glance /usr/bin/
  • 守护进程
sudo vim /lib/systemd/system/glance.service

[Unit]
Description=glance
After=network.target

[Service]
Type=simple
ExecStart=/usr/bin/glance --config /path/to/glance.yml
Restart=always

[Install]
WantedBy=multi-user.target

sudo systemctl daemon-reload
sudo systemctl start glance
sudo systemctl enable glance

更换字体 #

2025.07.22 已修订。

glance默认字体为JetBrainsMono-Regular，只包含英文，而中文默认为等线字体，比较丑。我选择了一个样式相近的包含中文的字体 Maple Mono 。

MapleMonoNormal-CN-Regular.ttf放入assets文件夹，编辑custom-css-file:

@font-face {
    font-family: 'Maple Mono Normal CN';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/MapleMonoNormal-CN-Regular.ttf') format('truetype');
}

body {
    font-family: 'Maple Mono Normal CN';
}

注意，font-family为字体预览界面的字体名称，与字体文件名可能不同，注意区分。

折叠内容已过时

glance默认字体为JetBrainsMono-Regular，只包含英文，而中文默认为等线字体，比较丑。我选择了一个样式相近的包含中文的字体 Maple Mono 。更换字体需要重新编译：

  • Import font./internal/glance/static/fonts/MapleMonoNormal-CN-Regular.ttf.
  • In ./internal/glance/static/main.css:
@font-face {
    font-family: 'MapleMonoNormal-CN-Regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/MapleMonoNormal-CN-Regular.ttf') format('truetype');
}

body {
    font-size: 1.3rem;
    font-family: 'MapleMonoNormal-CN-Regular';
    font-variant-ligatures: none;
    line-height: 1.6;
    color: var(--color-text-base);
    background-color: var(--color-background);
    overflow-y: scroll;
}

GOOS=linux GOARCH=amd64 go build -o build/glance . # Build
sudo cp ./build/glance /usr/bin/

身份认证 #

Glance v0.8.0版本已添加身份认证，此项无需再配置。

glance目前没有认证系统，如果暴露在公网，所有知道页面路径的人都能访问。由于我通过Nginx反代后访问glance，可以简单地使用Nginx来加一层认证。

  • 安装 htpasswd
sudo apt-get install apache2-utils # Ubuntu/Debian
sudo yum install httpd-tools # CentOS/RHEL
  • 创建密码文件，系统会提示你输入并确认密码。
sudo htpasswd -c /etc/nginx/.htpasswd username
  • 在 Nginx 配置文件中（nginx.conf），添加以下内容到需要保护的 location 块：
location / {
	auth_basic "closed site";
	auth_basic_user_file /etc/nginx/.htpasswd; 
	# 其他配置...
}
  • 重启nginx

自定义Widget #

相比Dashy，目前glance的小组件不算多，但提供了custom-api，只需填写api并编写模板即可。定制起来还是很方便的。除了官方的 community-widgets 仓库，我也根据自己的需求写了一些Widget，有需要的读者可以前往 osnsyc/glance-widgets 查看。

我自己的Widget有如下几个，其中custom-api依赖公共api，开箱即用；extension则需要自己爬取加工数据，并形成api供glance调用，链路比较长。

custom-api

extension

近期阅读卡片 近期阅读卡片

以Recent-MoonReader为例，提供一个思路。这是一个显示最近阅读的小组件。通过读取静读天下(MoonReader)的缓存并从Calibre抓取封面来显示数据，这是一个纯Self-Hosted的链路，完全不依赖外部api，稳定性和时效性都很强。虽然涉及的应用比较多，但做的额外工作很少（相较于两年前我写的一篇{}文章，简单介绍了我的HomeServer上部署的服务），用 MrLokans/MoonReader_tools 写了一个脚本读取最新的阅读记录，并通过本地的Calibre sqlite数据库文件metadata.db匹配并导出封面，最后用n8n将这些流程串联起来了，并生成一个接口供glance调用。接口输出示例：

{
  "title": "没有人给他写信的上校",
  "percentage": 53.9,
  "last_modified": "05-08 12:36",
  "last_note": {
    "text": "“自从实行新闻审查以来，报纸上就只谈欧洲了，”他说，“最好欧洲人都到我们这里来，我们都到欧洲去。这样大家就都能知道各自的国家在发生些什么事了。”",
    "note": "",
    "created": "2025-05-06T23:37:31",
    "style": "SELECTED",
    "color": "#99ccff"
  },
  "author_sort": "加西亚·马尔克斯"
}

图表 #

目前glance还没有现成的自定义图表组件。这里我直接将之前用在Dashy里的Grafana iframe小组件嵌入了，可谓零成本迁移了。在Grafana中，推荐安装 Business Charts 插件，嵌入了Apache ECharts，丰富了图表的可能性。以下示例是路由的实时流量图(netdata in openwrt)、家里植物的旭日图(from self-hosted baserow)、少数派阅读统计(from python crawler)。

实时带宽图 made by grafana&business-charts 实时带宽图 made by grafana&business-charts

可交互旭日图 made by grafana&business-charts 可交互旭日图 made by grafana&business-charts

可交互折线图 made by grafana&business-charts 可交互折线图 made by grafana&business-charts

前一篇 铝型材结构设计指南 随机阅读 用Grafana... 后一篇