首页
/ Glance 预配置页面实战：快速搭建 Startpage、Markets 与 Gaming 页面的完整配置指南

Glance 预配置页面实战：快速搭建 Startpage、Markets 与 Gaming 页面的完整配置指南

2026-09-05 21:34:55作者：庞眉杨Will
glance
A self-hosted dashboard that puts all your feeds in one place
项目地址：https://gitcode.com/GitHub_Trending/gla/glance

Glance 提供了三套开箱即用的预配置页面（Startpage、Markets、Gaming），你只需复制现成 YAML 配置并替换为自己的服务地址，就能立即拥有一个结构合理的自托管仪表盘页面。本文完整收录这三个页面的全部配置项，并结合 config.go 中的页面校验逻辑与 configuration.md 的字段说明，讲清每个页面级参数（width、center-vertically、hide-desktop-navigation、列宽规则等）的真实作用与取值约束，读完即可直接复用、裁剪并扩展这些页面。

预配置页面是什么

对于不想从零开始排版的人，官方文档 preconfigured-pages.md 的思路很直接：把下面现成页面的配置整段复制到你的 glance.yml 中即可使用。文档同时欢迎社区提交 Pull Request 贡献新的页面配置。

一个前置要求：所有页面必须定义在顶层 pages: 键下。configuration.md 中约定了这一点：第一个定义的页面成为首页，所有页面会按定义顺序自动加入导航栏：

pages:
  - name: Home
    columns: ...

  - name: Videos
    columns: ...

  - name: Homelab
    columns: ...

从源码结构看，顶层 pages 直接映射到 config.go 中的 Pages []page yaml:"pages"，每个页面对应 page 结构体，其完整字段定义在 config.go：

type page struct {
    Title                  string  `yaml:"name"`
    Slug                   string  `yaml:"slug"`
    Width                  string  `yaml:"width"`
    DesktopNavigationWidth string  `yaml:"desktop-navigation-width"`
    ShowMobileHeader       bool    `yaml:"show-mobile-header"`
    HideDesktopNavigation  bool    `yaml:"hide-desktop-navigation"`
    CenterVertically       bool    `yaml:"center-vertically"`
    HeadWidgets            widgets `yaml:"head-widgets"`
    Columns                []struct {
        Size    string  `yaml:"size"`
        Widgets widgets `yaml:"widgets"`
    } `yaml:"columns"`
    ...
}

后文三个预配置页面用到的 name、width、hide-desktop-navigation、center-vertically、columns 均出自该结构体，配置中出现未定义字段会被解析忽略，写错字段名不会报错，这一点在复制配置后自行修改时需要留意。

页面与列的布局规则（配置前必读）

三个预配置页面都采用了 small + full + small 或单 full 列的布局，理解以下规则能帮你安全地裁剪这些页面：

  • 每个页面最多 3 列，且必须包含 1 或 2 个 full 列；
  • small 列固定占 300px 宽度，full 列占据剩余全部宽度；
  • width 取值为 default / slim / wide，对应最大页面宽度 1600px / 1100px / 1920px；
  • 当页面 width 设为 slim 时，最多只能放 2 列。

这些约束并非文档约定，而是启动时的硬性校验。config.go 中的 isConfigStateValid 会逐页检查：

if page.Width == "slim" {
    if len(page.Columns) > 2 {
        return fmt.Errorf("page %d is slim and cannot have more than 2 columns", i+1)
    }
} else {
    if len(page.Columns) > 3 {
        return fmt.Errorf("page %d has more than 3 columns", i+1)
    }
}
// ...
if column.Size != "small" && column.Size != "full" {
    return fmt.Errorf("column %d of page %d: size can only be either small or full", j+1, i+1)
}
if full > 2 || full == 0 {
    return fmt.Errorf("page %d must have either 1 or 2 full width columns", i+1)
}

也就是说，把 Startpage 的 width: slim 保留却给它加第三列、或者把 Markets 页改成一个纯 small 列布局，Glance 会在启动配置解析阶段直接报错退出，这其实对排错非常友好。

configuration.md 还给出了页面属性的完整清单，供复制配置后微调时参考：

属性 类型 必填 默认值
name string 是
slug string 否
width string 否
desktop-navigation-width string 否
center-vertically boolean 否 false
hide-desktop-navigation boolean 否 false
show-mobile-header boolean 否 false
head-widgets array 否
columns array 是

其中 slug 决定页面 URL（未设置时由标题自动生成），head-widgets 会在列上方渲染横跨整页宽度的组件，desktop-navigation-width 则用于让导航栏宽度在不同 width 的页面之间保持一致，避免跳转时布局跳变。

Startpage：自托管服务入口 + 搜索起始页

Glance 预配置页面实战：快速搭建 Startpage、Markets 与 Gaming 页面的完整配置指南

适用于把 Glance 当作浏览器起始页（requires Glance v0.6.0 or higher）：窄页布局、搜索框自动聚焦、服务健康监控 + 书签分组。

- name: Startpage
  width: slim
  hide-desktop-navigation: true
  center-vertically: true
  columns:
    - size: full
      widgets:
        - type: search
          autofocus: true

        - type: monitor
          cache: 1m
          title: Services
          sites:
            - title: Jellyfin
              url: https://yourdomain.com/
              icon: si:jellyfin
            - title: Gitea
              url: https://yourdomain.com/
              icon: si:gitea
            - title: qBittorrent # only for Linux ISOs, of course
              url: https://yourdomain.com/
              icon: si:qbittorrent
            - title: Immich
              url: https://yourdomain.com/
              icon: si:immich
            - title: AdGuard Home
              url: https://yourdomain.com/
              icon: si:adguard
            - title: Vaultwarden
              url: https://yourdomain.com/
              icon: si:vaultwarden

        - type: bookmarks
          groups:
            - title: General
              links:
                - title: Gmail
                  url: https://mail.google.com/mail/u/0/
                - title: Amazon
                  url: https://www.amazon.com/
                - title: Github
                  url: https://github.com/
            - title: Entertainment
              links:
                - title: YouTube
                  url: https://www.youtube.com/
                - title: Prime Video
                  url: https://www.primevideo.com/
                - title: Disney+
                  url: https://www.disneyplus.com/
            - title: Social
              links:
                - title: Reddit
                  url: https://www.reddit.com/
                - title: Twitter
                  url: https://twitter.com/
                - title: Instagram
                  url: https://www.instagram.com/

页面级参数与源码的对应关系：

  • hide-desktop-navigation: true：桌面端不渲染顶部导航。page.html 中通过 {{ if not .Page.HideDesktopNavigation }} 条件整体包裹导航栏，因此单页起始页去掉它后视觉更干净（官方默认示例 glance.yml 中也注释提示了这一点）。
  • center-vertically: true：内容在视口内垂直居中。page.html 会据此给 <main class="page"> 追加 center-vertically class，样式定义在 site.css；内容高度超过视口时该设置自动失效。
  • width: slim：把页面最大宽度收窄到 1100px，配合上面的居中效果形成"聚焦式"起始页布局，且此宽度下列数不得超过 2（上文的启动校验会强制保证）。

组件层面值得注意的几处：

  • search 组件的 autofocus: true 让页面加载后搜索框直接获得焦点，配合起始页定位使用；
  • monitor 组件的 cache: 1m 控制健康检查刷新间隔（分钟），icon: si:jellyfin 这类 si: 前缀的值为 Simple Icons 图标名，可直接替换成你实际部署的服务；
  • bookmarks 用 groups 把链接按 General / Entertainment / Social 分组，复制后按自己的收藏习惯增删即可。

Markets：市场行情 + 财经资讯仪表盘

Glance 预配置页面实战：快速搭建 Startpage、Markets 与 Gaming 页面的完整配置指南

适用于盯盘场景（requires Glance v0.6.0 or higher）：左列放指数、加密货币、个股三个 markets 组件，中间主列放财经 RSS、Reddit 讨论组和 YouTube 频道网格，右列再补一路新闻流。

- name: Markets
  columns:
    - size: small
      widgets:
        - type: markets
          title: Indices
          markets:
            - symbol: SPY
              name: S&P 500
            - symbol: DX-Y.NYB
              name: Dollar Index

        - type: markets
          title: Crypto
          markets:
            - symbol: BTC-USD
              name: Bitcoin
            - symbol: ETH-USD
              name: Ethereum

        - type: markets
          title: Stocks
          sort-by: absolute-change
          markets:
            - symbol: NVDA
              name: NVIDIA
            - symbol: AAPL
              name: Apple
            - symbol: MSFT
              name: Microsoft
            - symbol: GOOGL
              name: Google
            - symbol: AMD
              name: AMD
            - symbol: RDDT
              name: Reddit
            - symbol: AMZN
              name: Amazon
            - symbol: TSLA
              name: Tesla
            - symbol: INTC
              name: Intel
            - symbol: META
              name: Meta

    - size: full
      widgets:
        - type: rss
          title: News
          style: horizontal-cards
          feeds:
            - url: https://feeds.bloomberg.com/markets/news.rss
              title: Bloomberg
            - url: https://moxie.foxbusiness.com/google-publisher/markets.xml
              title: Fox Business
            - url: https://moxie.foxbusiness.com/google-publisher/technology.xml
              title: Fox Business

        - type: group
          widgets:
            - type: reddit
              show-thumbnails: true
              subreddit: technology
            - type: reddit
              show-thumbnails: true
              subreddit: wallstreetbets

        - type: videos
          style: grid-cards
          collapse-after-rows: 3
          channels:
            - UCvSXMi2LebwJEM1s4bz5IBA # New Money
            - UCV6KDgJskWaEckne5aPA0aQ # Graham Stephan
            - UCAzhpt9DmG6PnHXjmJTvRGQ # Federal Reserve

    - size: small
      widgets:
        - type: rss
          title: News
          limit: 30
          collapse-after: 13
          feeds:
            - url: https://www.ft.com/technology?format=rss
              title: Financial Times
            - url: https://feeds.a.dj.com/rss/RSSMarketsMain.xml
              title: Wall Street Journal

结构上这是一个典型的 small + full + small 三列页面（符合"最多 3 列且含 1 或 2 个 full 列"的校验规则），组件组合覆盖了行情、新闻、社区、视频四类信息源：

  • markets 组件重复使用三次，分别承载 Indices / Crypto / Stocks。股票列表中额外的 sort-by: absolute-change 表示按涨跌幅绝对值排序，便于快速发现波动最大的持仓；symbol 使用 Yahoo Finance 符号（如 DX-Y.NYB 美元指数、BTC-USD 比特币），替换为你关注的具体标的即可；
  • 中间列的 rss 用 style: horizontal-cards 横向卡片样式聚合多路财经源，与 configuration.md 中"horizontal-cards 样式适合宽幅展示"的建议一致；
  • group 组件把 r/technology 与 r/wallstreetbets 两个 Reddit 讨论组合并为一个可切换的区块，show-thumbnails: true 开启缩略图；
  • videos 组件用 grid-cards 网格展示 YouTube 频道，collapse-after-rows: 3 表示展示 3 行后折叠，避免首屏信息过载；channels 填频道 ID（配置注释里标注了对应频道名）。

Gaming：游戏资讯聚合页

Glance 预配置页面实战：快速搭建 Startpage、Markets 与 Gaming 页面的完整配置指南

面向玩家的信息流页面（requires Glance v0.6.0 or higher）：热门游戏直播榜 + Reddit 讨论 + 游戏频道视频 + 游戏新闻卡片。

- name: Gaming
  columns:
    - size: small
      widgets:
        - type: twitch-top-games
          limit: 20
          collapse-after: 13
          exclude:
            - just-chatting
            - pools-hot-tubs-and-beaches
            - music
            - art
            - asmr

    - size: full
      widgets:
        - type: group
          widgets:
            - type: reddit
              show-thumbnails: true
              subreddit: pcgaming
            - type: reddit
              subreddit: games

        - type: videos
          style: grid-cards
          collapse-after-rows: 3
          channels:
            - UCNvzD7Z-g64bPXxGzaQaa4g # gameranx
            - UCZ7AeeVbyslLM_8-nVy2B8Q # Skill Up
            - UCHDxYLv8iovIbhrfl16CNyg # GameLinked
            - UC9PBzalIcEQCsiIkq36PyUA # Digital Foundry

    - size: small
      widgets:
        - type: reddit
          subreddit: gamingnews
          limit: 7
          style: vertical-cards

各组件的取舍点：

  • twitch-top-games 拉取 Twitch 热门游戏榜，limit: 20 控制条数、collapse-after: 13 指定超过 13 条后折叠；exclude 列表用来过滤 just-chatting、music 这类"非游戏"分类的开播游戏，是保持榜单"游戏味"的关键参数；
  • 中间列复用 Markets 页同样的 group + reddit 与 videos 组合模式，只是把讨论组换成 r/pcgaming、r/games，频道换成游戏向 YouTube 频道；
  • 右列 reddit 用 style: vertical-cards 纵向卡片样式并限制 limit: 7，在窄列里呈现更紧凑。

基于预配置页面做二次定制

三个页面都是"起点"而非模板终点，定制时建议遵循以下做法：

  1. 按列结构增删组件：每个 size: small / full 列内的 widgets 列表可自由增删，但列本身受前文校验规则约束（slim 页面最多 2 列，每页必须有 1 或 2 个 full 列）。
  2. 用变量替代硬编码域名：config.go 中的 parseConfigVariables 会在 YAML 解析前做变量替换，Startpage 里的 https://yourdomain.com/ 等占位地址可改写为环境变量引用，例如 ${JELLYFIN_URL}（取同名环境变量）、${secret:api_key}（从 /run/secrets/api_key 读取），避免把内网地址直接写死在配置里。
  3. 控制页面宽度与导航：如果起始页想更宽，把 width: slim 改为 default 或删掉（1600px），同时记得列数上限从 2 放宽到 3；hide-desktop-navigation 只在"Glance 是单页使用"时才建议保留，多页面共存时应让导航可见。
  4. 新页面欢迎社区共建：原文档明确欢迎提交包含你自己页面配置的 Pull Request，如果你把某套预配置页面改造出了通用形态，提交回去本身就是对本文所引配置体系的补充。

最后提醒版本前提：三套预配置页面均要求 Glance v0.6.0 或更高版本。如果你从更早版本升级而来，可先查看仓库中的升级说明 v0.7.0-upgrade.md 了解迁移注意事项，再粘贴上述配置。

glance
A self-hosted dashboard that puts all your feeds in one place
项目地址：https://gitcode.com/GitHub_Trending/gla/glance
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
33
18
ops-transformerops-transformer
本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。
C++
1.12 K
2.72 K
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
528
588
ops-nnops-nn
本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。
C++
906
1.83 K
pytorchpytorch
作为 Ascend for PyTorch 社区的核心组件，TorchNPU 是昇腾专为 PyTorch 打造的深度学习适配插件，使 PyTorch 框架能够直接调用昇腾 NPU，为开发者提供昇腾 AI 处理器的超强算力。
Python
854
1.34 K
docsdocs
暂无描述
Markdown
891
5.79 K
jiuwenswarmjiuwenswarm
JiuwenSwarm 是一款基于openJiuwen开发的智能AI Agent，它能够将大语言模型的强大能力，通过你日常使用的各类通讯应用，直接延伸至你的指尖。
Python
3.53 K
1.01 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
1.34 K
1.45 K
cann-learning-hubcann-learning-hub
CANN 学习中心仓，支持在线互动运行、边学边练，提供教程、示例与优化方案，一站式助力昇腾开发者快速上手。
Jupyter Notebook
988
506
AscendNPU-IRAscendNPU-IR
AscendNPU-IR是基于MLIR（Multi-Level Intermediate Representation）构建的，面向昇腾亲和算子编译时使用的中间表示，提供昇腾完备表达能力，通过编译优化提升昇腾AI处理器计算效率，支持通过生态框架使能昇腾AI处理器与深度调优
C++
540
384