Glance 分栏布局怎么用 split-column 拼出 3 列、4 列与 masonry 版式？-平芜编程栈

Glance 分栏布局怎么用 split-column 拼出 3 列、4 列与 masonry 版式？

【免费下载链接】glanceA self-hosted dashboard that puts all your feeds in one place项目地址: https://gitcode.com/GitHub_Trending/gla/glance

Glance 的页面默认按“页 → 列 → 组件”三层组织，每页最多 3 列。当你想把一整个full列横向切分成 3 列、4 列甚至瀑布流式的多列时，靠的正是split-column组件：它把一整个full列切开，让多个组件水平并排。本文基于 docs/configuration.md 中的 Split Column 章节，给出 2 列并排、3 列等宽、4 列等宽和 masonry 版式的具体glance.yml配置写法，以及如何验证配置生效。

前提是你已经有一份能启动的 Glance 配置（glance.yml），知道页和列的基本结构：页面通过顶层pages定义，列通过每页的columns定义，列宽分full和small两种。

先理解 split-column 的默认行为

split-column把一整个full列平分为两半，让组件左右并排显示；在移动设备上、或可用宽度不足时，它会自动回退为单列。内部的组件通过widgets属性定义，写法和页面列里的widgets完全一致。

两个组件并排放在一个full列中的基础示例（节选自文档，# ...表示省略的上下文）：

# ... - size: full widgets: - type: split-column widgets: - type: hacker-news collapse-after: 3 - type: lobsters collapse-after: 3 - type: videos # ...

文档给出的对应效果预览：

并排数量由max-columns控制。文档给出的几种完整页面版式如下。

3 列等宽版式：max-columns: 3

页面只放一个full列，其中放入max-columns: 3的split-column，再挂 3 个组件，即可得到 3 列等宽布局：

pages: - name: Home columns: - size: full widgets: - type: split-column max-columns: 3 widgets: - type: reddit subreddit: selfhosted collapse-after: 15 - type: reddit subreddit: homelab collapse-after: 15 - type: reddit subreddit: sysadmin collapse-after: 15

文档示例效果（文档示例）：

4 列等宽版式：max-columns: 4 加 width: wide

4 列需要更大的页面宽度。文档中的做法是在页面级别把width设为wide，同时split-column设max-columns: 4：

pages: - name: Home width: wide columns: - size: full widgets: - type: split-column max-columns: 4 widgets: - type: reddit subreddit: selfhosted collapse-after: 15 - type: reddit subreddit: homelab collapse-after: 15 - type: reddit subreddit: linux collapse-after: 15 - type: reddit subreddit: sysadmin collapse-after: 15

width是页面的桌面端最大宽度，取值为default（1600px）、slim（1100px）、wide（1920px）。4 列示例的效果（文档示例）：

masonry 版式：更多组件加 YAML 锚点

masonry 版式同样是width: wide加max-columns（文档示例用 5），区别在于split-column内放的数量明显多于列数，组件按列依次填充，形成瀑布流效果。组件较多时，文档建议用 YAML 锚点复用公共属性：

define: - &subreddit-settings type: reddit collapse-after: 5 pages: - name: Home width: wide columns: - size: full widgets: - type: split-column max-columns: 5 widgets: - subreddit: selfhosted <<: *subreddit-settings - subreddit: homelab <<: *subreddit-settings - subreddit: linux <<: *subreddit-settings - subreddit: sysadmin <<: *subreddit-settings - subreddit: DevOps <<: *subreddit-settings - subreddit: Networking <<: *subreddit-settings - subreddit: DataHoarding <<: *subreddit-settings - subreddit: OpenSource <<: *subreddit-settings - subreddit: Privacy <<: *subreddit-settings - subreddit: FreeSoftware <<: *subreddit-settings

文档示例效果（文档示例）：

验证配置是否生效

自动重载：Glance 支持配置热重载，保存glance.yml后无需重启容器/服务即可生效，直接在浏览器里刷新页面查看版式即可。
重载失败不会中断服务：如果启动时配置非法，Glance 会直接报错退出；如果是运行中改出错误，控制台会打印该错误，Glance 继续用旧配置运行，修好后再保存才会加载新配置。
排查 YAML 解析问题：如果配置用了$include或写得比较复杂，出现解析错误时报告的行号可能不准。文档给出的核对命令是打印解析后的完整配置：

glance --config /path/to/glance.yml config:print | less -N

Docker 环境下则（假设配置在当前目录且名为glance.yml）：

docker run --rm -v ./glance.yml:/app/config/glance.yml glanceapp/glance config:print | less -N

输出中确认split-column、max-columns、width的层级和缩进与你预期一致，即可回到浏览器验证版式。

嵌套限制与边界

和group组件一样，split-column里可以放任意类型的组件，也允许在split-column内再放group，但不能把split-column放进group。
页面width用slim时，该页最多只允许 2 列，因此 4 列及以上版式不要配slim，文档示例统一使用wide。
列宽不足或移动端访问时，split-column会回退为单列，这不是配置错误，属于预期行为。