Glance 分栏布局怎么用 split-column 拼出 3 列、4 列与 masonry 版式【免费下载链接】glanceA self-hosted dashboard that puts all your feeds in one place项目地址: https://gitcode.com/GitHub_Trending/gla/glanceGlance 的页面默认按“页 → 列 → 组件”三层组织每页最多 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: wide4 列需要更大的页面宽度。文档中的做法是在页面级别把width设为wide同时split-column设max-columns: 4pages: - 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: 15width是页面的桌面端最大宽度取值为default1600px、slim1100px、wide1920px。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 -NDocker 环境下则假设配置在当前目录且名为glance.ymldocker 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会回退为单列这不是配置错误属于预期行为。配置完成并保存后按上面的重载与config:print流程核对一遍浏览器中即可看到 3 列、4 列或 masonry 版式按预期渲染需要增减列数时调整max-columns和组件数量即可。【免费下载链接】glanceA self-hosted dashboard that puts all your feeds in one place项目地址: https://gitcode.com/GitHub_Trending/gla/glance创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考