如何用 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 文档决定你的分组会出现在哪些标签页上tabs 只在至少一个 layout 分组设置了tab字段时才激活。如果所有分组都没有tab页面仍然是普通的单页布局。标签页的排列顺序由 layout 块中的顺序决定。没有设置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操作方式是点击页面右下角的刷新图标。之后可以这样核对打开 Homepage确认页面上出现了按 layout 顺序排列的标签页且各分组落在对应的标签页中在浏览器地址栏访问 Homepage URL 加#标签名小写、URI 编码确认页面直接打开对应标签页没有设置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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考