企业官网建设流程全解析

如何用 Homepage 的 tabs 布局拆分服务分组并通过 URL 直接定位标签页

【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage

当 Homepage 首页里的服务越来越多，单页罗列会让页面变得很长。从 0.6.30 版本开始，Homepage 的 layout 支持 tabbed view（标签页视图）：把服务分组（以及书签分组）分配到不同的标签页，之后还可以通过在 Homepage 的 URL 末尾加上#标签名直接打开指定的标签页。这篇文章说明如何在settings.yaml中配置tab字段、如何用 URL 直达某个标签页，以及如何验证配置生效。

前提条件：

• Homepage 版本 0.6.30 或更高（tab 视图在该版本引入）；
• 服务分组已在 services.yaml 中定义、书签分组已在 bookmarks.yaml 中定义——分组是这两个文件里的顶层数组条目（- Group A:这种形式），layout中引用的组名必须与这些名字一致。

tabs 的生效规则

以下三条规则来自 settings 文档，决定你的分组会出现在哪些标签页上：

1. tabs 只在至少一个 layout 分组设置了tab字段时才激活。如果所有分组都没有tab，页面仍然是普通的单页布局。
2. 标签页的排列顺序由 layout 块中的顺序决定。
3. 没有设置tab的分组（在其他分组已设置 tab 的情况下），其服务和书签会显示在所有标签页上。所以想做到"完全拆分"，需要给每个分组都指定tab；想让某个分组常驻每个标签页，则故意不写tab即可。

另外 settings 文档 提醒过：服务分组和书签分组混排时要使用不同的组名，服务分组和书签分组使用同名可能导致意外行为（例如某个书签分组被隐藏）——配置 tabs 时同样适用。

在 settings.yaml 中配置 tab

在settings.yaml的layout块下，为需要出现在某个标签页的分组加上tab字段。下面这个例子直接取自 settings 文档，会创建四个标签页：

layout: ... Bookmark Group on First Tab: tab: First First Service Group: tab: First style: row columns: 4 Second Service Group: tab: Second columns: 4 Third Service Group: tab: Third style: row Bookmark Group on Fourth Tab: tab: Fourth Service Group on every Tab: style: row columns: 4

示例中tab之外的style、columns是 layout 的常规布局选项，与 tabs 无关，按需保留即可。tab的值是标签页的显示名称，相同名称的分组归入同一个标签页（示例里 "Bookmark Group on First Tab" 和 "First Service Group" 都归入 "First" 标签页）。最后一个分组 "Service Group on every Tab" 没有tab字段，因此它会显示在每一个标签页上。

通过 URL 直接定位标签页

每个标签页都可以直接通过 URL 访问：在 Homepage 的 URL 末尾加上#Group，其中组名转为小写并做 URI 编码。例如上面的 "First" 标签页对应的 URL 就是 Homepage 地址加#first。

对于包含空格的标签页名称，Tab 组件源码 显示的规则是：空格替换为连字符-、整体转小写，再做 URI 编码。例如标签页 "Media Server" 对应的 URL 后缀是#media-server。

一个常见用途是把标签页做成 PWA 的 shortcuts，安装为应用后可以直接预选某个标签页，配置也在 settings 文档 中：

pwa: shortcuts: - name: First url: "/#first" # opens the first tab - name: Second url: "/#second" # opens the second tab - name: Third url: "/#third" # opens the third tab

验证配置生效

修改settings.yaml后不会立即生效：settings 文档 明确说明，该文件的改动需要重新生成静态 HTML，操作方式是点击页面右下角的刷新图标。

之后可以这样核对：

1. 打开 Homepage，确认页面上出现了按 layout 顺序排列的标签页，且各分组落在对应的标签页中；
2. 在浏览器地址栏访问 Homepage URL 加#标签名（小写、URI 编码），确认页面直接打开对应标签页；
3. 没有设置tab的分组应出现在所有标签页上，若它只出现在某一个标签页，检查是否误加了tab字段或组名写错导致与书签分组重名。

限制与边界

• tab 视图从 0.6.30 引入，低版本没有该功能；
• tabs 是否激活完全取决于"至少一个 layout 分组设置了tab字段"，删除所有tab字段即可回到单页布局；
• layout里引用的组名必须与services.yaml/bookmarks.yaml中定义的分组名一致，且服务与书签分组之间避免重名。

【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage