Dashy 页面与区块Pages and Sections配置完全指南从 pageInfo 元数据到多页面布局【免费下载链接】dashy A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!项目地址: https://gitcode.com/GitHub_Trending/da/dashyDashy 是一个自托管的个人仪表盘其核心配置文件conf.yml由pageInfo、appConfig、sections和pages四个顶层字段构成。本文围绕 docs/pages-and-sections.md 展开系统讲解页面品牌元数据pageInfo、多子页面pages、布局模式appConfig.layout、区块尺寸displayData以及子项subItems的完整配置方法。读完本文你将能独立搭建包含本地/远程子页面的多页仪表盘并精准控制每个区块的尺寸、排序与内部排列方式。1. 页面元数据 pageInfo仪表盘的品牌标识pageInfo用于设置仪表盘的整体品牌信息包括标题、描述、Logo、浏览器标签页图标、移动端地址栏颜色和页脚。以下配置来自官方文档可直接放入conf.yml的顶层pageInfo: title: My Dashboard # 用作主 h1 标题以及浏览器标签页文本 description: Home server links logo: /web-icons/my-logo.png # 显示在标题旁的 Logo 路径/URL favicon: https://example.com/path/to/icon # favicon 的路径/URL显示在浏览器标签页 color: #2a7cf0 # Hex 颜色用于移动端浏览器/地址栏颜色仅受支持的浏览器 footer: © 2026 Me # 可选文本或 HTML 内容显示在页面页脚各字段的补充说明详见 docs/configuring.md 的PageInfo章节字段类型必填说明titlestring是仪表盘标题显示在页头和浏览器标签页descriptionstring否仪表盘描述同时作为副标题显示navLinksarray否最多 6 个导航链接显示在导航栏每项含title、path相对或绝对 URL和可选的targetnewtab/sametab/newwindow/top/parent默认newtabfooterstring否页脚文本支持内联 HTML渲染前会经过净化处理logostring否页头标题右侧的图片路径本地路径以./public为根也支持远程 URLfaviconstring否自定义 favicon可为绝对 URL、根相对路径如/icons/x.png或data:URIcolorstring否移动端浏览器地址栏的theme-color接受任意合法 CSS 颜色1.1 多配置/多页面时元数据如何生效当你配置了多个页面见下文pageInfo会在导航切换子页面时自动替换。也就是说每个子页面配置文件都可以拥有自己独立的标题、Logo、favicon 与页脚。1.2 PWA 与 pageInfo 的唯一例外唯一需要注意的限制是如果将 Dashy 安装为 PWA渐进式 Web 应用安装后应用的名称、图标和启动屏颜色来自构建时打包的manifest.webmanifest而非pageInfo。pageInfo中的运行时值仅在普通浏览器标签页中生效。1.3 源码视角pageInfo 的合并与落地从源码看页面元数据经历了「配置读取 → 默认值合并 → DOM 应用」三层处理默认值合并src/utils/config/defaults.js定义了默认的pageInfotitle: Dashy、description: 、navLinks: []、footer: 。ConfigAccumalator.js 中的pageInfo()方法按「文件配置 → localStorage 本地覆盖」的优先级合并返回{ ...defaultPageInfo, ...filePageInfo, ...localPageInfo }。DOM 应用src/utils/PageMeta.js负责将pageInfo写入浏览器title直接设置document.titledescription写入meta namedescriptioncolor写入meta nametheme-colorfavicon更新所有link[rel~icon]标签。安全校验PageMeta.js中的validateFavicon()会拒绝javascript:/vbscript:开头的危险 favicon URLvalidateColor()则借助浏览器自身的CSS.supports(color, value)作为合法颜色值的判定标准src/utils/PageMeta.js。2. 多页面支持Multi-Page SupportDashy 允许在主仪表盘之外创建附加页面每个子页面拥有独立的配置文件。子页面的配置文件既可以存放在本地也可以托管在远程任意位置。每个附加页面的链接会自动显示在导航栏中。你可以在交互式编辑器中编辑附加页面操作方式与主页面完全一致前提是配置文件在本地。注意在开始编辑下一个页面之前请先保存当前页面的更改——src/router.js的路由守卫会在编辑模式下切换到不同页面时弹出确认框防止未保存的编辑内容与切换后的页面脱钩src/router.js。2.1 使用本地子页面Local Sub-Pages第一步为子页面创建一个新的.yml配置文件放在/app/user-data目录内。然后在主conf.yml中为它指定名称与路径。以下示例必须添加在appConfig:之上的最顶层或任何符合 YAML 语法的合适位置pages: - name: Networking Services path: networking.yml - name: Work Stuff path: work.yml第二步创建新页面文件。如果你在 Docker 命令中挂载的是/app/user-data目录而非单个文件卷直接在宿主机上把新页面文件放进该目录即可如果挂载的是/app/user-data/conf.yml单文件则要么改用目录挂载volume要么为新增的附加页面再创建一个 bind mount。关于路径的规则子页面位于/app/user-data内时只需指定文件名位于其他位置时必须给出完整路径。从源码看ConfigHelpers.js 的formatConfigPath()负责将本地路径标准化不以/开头的路径会补上前缀如networking.yml→/networking.yml包含http的路径则原样保留。一个可直接参考的完整模板是仓库自带的 user-data/conf.yml它展示了pageInfo、appConfig与sections的标准结构。注意子页面不能使用appConfig应当将其移除详见 2.3 节「限制」。刷新页面后导航栏右上角会出现跳转到新页面的按钮。2.2 使用远程子页面Remote Sub-Pages配置文件不必存放在本地——可以放在任意位置Dashy 会在页面加载时将其作为子页面导入。例如pages: - name: Getting Started path: https://snippet.host/tvcw/raw - name: Homelab path: https://snippet.host/tetp/raw - name: Browser Startpage path: https://snippet.host/zcom/raw远程托管的典型用法包括放入 Git 仓库方便追踪配置变更、随时回滚存放在 NAS 上与其余文件一起备份使用托管 paste 服务如支持永不过期、开启 CORS 且可后续编辑的 paste 服务。需要明确的限制与注意事项无法通过 UI 编辑器直接向远程配置写入更新但仍可以编辑并预览更改然后通过导出菜单Export获取新配置的副本手动粘贴回远程源配置文件必须能被 Dashy 访问到即需要正确的 CORS 配置如果配置包含敏感信息如 API 密钥、凭据、秘密 URL 等务必小心不要将其暴露到公网。2.3 子页面的限制Restrictions子页面仅支持pageInfo和sections两个顶层字段。appConfig和pages始终继承自主conf.yml。除此之外子页面与默认视图行为完全一致可以包含区块、条目、widgets以及 navLinks、标题、Logo 等页面信息。这一点在源码中得到印证ConfigHelpers.js 定义了「根配置独占字段」——ROOT_OWNED_TOP_LEVEL [pages]和ROOT_OWNED_APP_CONFIG [auth]stripRootOwnedFields()在加载子页面配置时会剥离这些字段。同时 ConfigAccumalator.js 中的pages()直接读取主配置的pages数组说明子页面列表只来自根配置。2.4 URL 结构URL StructureDashy 中每个视图共享同一套 URL 形态因此任何配置都可以从任意视图访问/ Landing — 你设置为默认的视图 /view 根配置位于 view /view/page 子配置 page位于 view /view/page/section page 的单个区块位于 view /view/main/section 根配置的单个区块main 是保留页面 id其中view是home、minimal或workspace三者之一page是子配置 id——即pages数组中子页面的name转为「小写加连字符」的 slugemoji 及其他非单词字符会被移除section遵循同样的 slug 规则。Workspace 视图没有单区块 URL它改用侧边栏导航。示例/home Home 视图主配置 /home/homelab Home 视图Homelab 子配置 /home/homelab/media Home 视图Homelab 子配置仅 Media 区块 /home/main/getting-started Home 视图主配置仅 Getting Started 区块 /minimal/homelab Minimal 视图Homelab 子配置 /minimal/homelab/media Minimal 视图Homelab 子配置预选 Media 区块 /workspace/homelab Workspace 视图Homelab 子配置视图切换器、子页面导航链接和区块深链接都会保留你当前的视图与子页面——例如从单区块视图点击「返回全部」会回到你进入前的那个子页面。源码视角slug 生成与路由注册slug 的生成逻辑位于 ConfigHelpers.js 的makePageName()先做 NFC 规范化、转小写、空白替换为-、剥离.yml后缀再移除变体选择符emoji 修饰符和除 Unicode 字母/数字/标记/_/-外的字符最后修剪首尾的-。若结果为空则回退为unnamed-page若恰好等于保留 idmain则改写为main-page以避免歧义。路由侧src/router.js 的makeViewRoutes()为每个视图注册了三条路由/view、/view/:page和/view/:page/:sectionWorkspace 通过withSectionfalse跳过区块路由。RESERVED_ROOT mainsrc/utils/config/ConfigHelpers.js被用作「根配置」的 URL 占位符配合resolveRouteIntent()还能兼容「单段 URL 指向根配置区块」的旧式链接PAGE_STATUS.LEGACY_SECTION。3. 布局LayoutappConfig.layout控制区块sections在页面上的排布方式取值说明auto默认响应式 CSS Grid区块尺寸由displayData.cols/rows决定horizontal区块自上而下堆叠每个区块占满整行宽度vertical区块并排成列masonry响应式网格区块高度跟随内容较矮的区块会填补在较高区块下方留下的空隙rows被忽略你还可以从设置菜单中切换这些布局。另外添加appConfig.colCount可以强制指定固定的列数——该值应为 1 到 8 之间的整数默认情况下列数是根据当前屏幕宽度响应式计算的显式指定会覆盖这一行为详见 docs/configuring.md。从源码看defaults.js 将layout的默认值定义为auto而 ConfigAccumalator.js 会优先采用 localStorage 中的layoutOrientation其次是配置文件中的appConfig.layout最后回退到默认值——这正是「在 UI 中修改布局后刷新不丢失」的实现基础。layout与iconSize、theme一样属于「有独立 localStorage 键」的特殊设置。3.1 让区块更宽或更高通过displayData.cols15和displayData.rows15控制区块的占地面积- name: Important Links displayData: cols: 2 rows: 2 collapsed: false items: [...]rows仅在auto布局下生效在masonry布局中区块高度始终跟随内容。配置 schemaConfigSchema.json显示rows/cols的取值范围均为 15、默认 1其中cols会被钳制到页面当前列数以内确保区块不会超出网格宽度。3.2 区块内的条目排列Items inside a section条目默认响应式自动换行。displayData上最实用的几个调节项itemSizesmall、medium默认或large大号磁贴还会显示描述文字sortByalphabetical、reverse-alphabetical、most-used、last-used、randomsectionLayout: grid配合itemCountX和/或itemCountY当你想用固定网格代替自动换行时使用。完整的选项清单见 docs/configuring.md 的section.displayData章节。补充说明itemSize的合法枚举在 ConfigSchema.json 中定义为small/medium/large默认medium它会覆盖 UI 中设置的全局图标尺寸itemCountX/itemCountY的取值范围为 112分别代表每行/每列的条目数sectionLayout的枚举为grid与auto默认grid使条目等宽排列并启用 itemCount 计数sortBy的排序实现在 src/utils/SortItems.js 中alphabetical/reverse-alphabetical按标题排序most-used/last-used读取 localStorage 中的MOST_USED/LAST_USED使用记录排序random则进行洗牌另有provider、item-id等扩展排序区块与条目上的displayData还支持collapsed初始折叠、cutToHeight高度贴合内容、color自定义强调色、customStyles区块容器 CSS 覆盖以及基于 SSO 用户/组的showForUsers、hideForUsers、showForGroups等权限控制字段见 docs/configuring.md。此外SectionHelpers.js 的applyItemId()会在配置加载时为每个 item 和 widget 生成唯一 id由区块名、条目标题与索引派生用于拖拽排序与状态追踪保存配置时再由stripItemIds()移除这些运行时 id保证写回磁盘的 YAML 干净整洁。3.3 子项Sub-Items普通区块包含零个或多个条目items例如- name: Coding icon: far fa-code items: - title: GitHub url: https://github.com/ - title: StackOverflow url: http://stackoverflow.com/但条目也可以分组嵌套这种结构称为子项sub-items。当你有一组不常使用的条目、又不想让它们占用太多空间时子项非常实用。条目组还可以有可选的标题- name: Coding icon: far fa-code items: - title: Normal Item 1 - title: Normal Item 2 - title: Languages subItems: - title: JavaScript url: https://developer.mozilla.org icon: si-javascript - title: TypeScript url: https://www.typescriptlang.org/docs icon: si-typescript - title: Svelte url: https://svelte.dev/docs icon: si-svelte - title: Go url: https://go.dev/doc icon: si-go每个子项支持title、url、icon、target、color和backgroundColor字段见 docs/configuring.md 的item章节渲染为父条目内部的较小图标。图标方面可以使用任意受支持的格式包括 Font Awesomefas/far、Simple Iconssi-*或 Emoji具体可参考 docs/icons.md。4. 总结与实战建议元数据用pageInfo定制标题、Logo、favicon 与移动端主题色多页面时各页可独立设置但 PWA 安装元数据以构建期 manifest 为准。多页面本地子页面放入/app/user-data并给出文件名远程子页面给出完整 URL注意 CORS 与敏感信息暴露子页面仅接受pageInfosectionsappConfig与pages从根配置继承。URL 导航牢记/view/page/section的统一形态main是根配置的保留 idslug 由名称小写化并去除特殊字符生成可直接复制深链接分享到具体区块。布局与尺寸auto布局配合cols/rows15控制网格足迹masonry让高度自适应colCount可固定列数。内容组织itemSize控制磁贴密度sortBy决定条目顺序sectionLayout: griditemCountX/Y实现固定网格subItems收纳低频链接以节省空间。结合仓库中的 user-data/conf.yml 示例与 docs/configuring.md 全量参数表即可开始构建属于你的多页面、多区块个人仪表盘。【免费下载链接】dashy A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!项目地址: https://gitcode.com/GitHub_Trending/da/dashy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Dashy 页面与区块（Pages and Sections）配置完全指南：从 pageInfo 元数据到多页面布局
Dashy 页面与区块Pages and Sections配置完全指南从 pageInfo 元数据到多页面布局【免费下载链接】dashy A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!项目地址: https://gitcode.com/GitHub_Trending/da/dashyDashy 是一个自托管的个人仪表盘其核心配置文件conf.yml由pageInfo、appConfig、sections和pages四个顶层字段构成。本文围绕 docs/pages-and-sections.md 展开系统讲解页面品牌元数据pageInfo、多子页面pages、布局模式appConfig.layout、区块尺寸displayData以及子项subItems的完整配置方法。读完本文你将能独立搭建包含本地/远程子页面的多页仪表盘并精准控制每个区块的尺寸、排序与内部排列方式。1. 页面元数据 pageInfo仪表盘的品牌标识pageInfo用于设置仪表盘的整体品牌信息包括标题、描述、Logo、浏览器标签页图标、移动端地址栏颜色和页脚。以下配置来自官方文档可直接放入conf.yml的顶层pageInfo: title: My Dashboard # 用作主 h1 标题以及浏览器标签页文本 description: Home server links logo: /web-icons/my-logo.png # 显示在标题旁的 Logo 路径/URL favicon: https://example.com/path/to/icon # favicon 的路径/URL显示在浏览器标签页 color: #2a7cf0 # Hex 颜色用于移动端浏览器/地址栏颜色仅受支持的浏览器 footer: © 2026 Me # 可选文本或 HTML 内容显示在页面页脚各字段的补充说明详见 docs/configuring.md 的PageInfo章节字段类型必填说明titlestring是仪表盘标题显示在页头和浏览器标签页descriptionstring否仪表盘描述同时作为副标题显示navLinksarray否最多 6 个导航链接显示在导航栏每项含title、path相对或绝对 URL和可选的targetnewtab/sametab/newwindow/top/parent默认newtabfooterstring否页脚文本支持内联 HTML渲染前会经过净化处理logostring否页头标题右侧的图片路径本地路径以./public为根也支持远程 URLfaviconstring否自定义 favicon可为绝对 URL、根相对路径如/icons/x.png或data:URIcolorstring否移动端浏览器地址栏的theme-color接受任意合法 CSS 颜色1.1 多配置/多页面时元数据如何生效当你配置了多个页面见下文pageInfo会在导航切换子页面时自动替换。也就是说每个子页面配置文件都可以拥有自己独立的标题、Logo、favicon 与页脚。1.2 PWA 与 pageInfo 的唯一例外唯一需要注意的限制是如果将 Dashy 安装为 PWA渐进式 Web 应用安装后应用的名称、图标和启动屏颜色来自构建时打包的manifest.webmanifest而非pageInfo。pageInfo中的运行时值仅在普通浏览器标签页中生效。1.3 源码视角pageInfo 的合并与落地从源码看页面元数据经历了「配置读取 → 默认值合并 → DOM 应用」三层处理默认值合并src/utils/config/defaults.js定义了默认的pageInfotitle: Dashy、description: 、navLinks: []、footer: 。ConfigAccumalator.js 中的pageInfo()方法按「文件配置 → localStorage 本地覆盖」的优先级合并返回{ ...defaultPageInfo, ...filePageInfo, ...localPageInfo }。DOM 应用src/utils/PageMeta.js负责将pageInfo写入浏览器title直接设置document.titledescription写入meta namedescriptioncolor写入meta nametheme-colorfavicon更新所有link[rel~icon]标签。安全校验PageMeta.js中的validateFavicon()会拒绝javascript:/vbscript:开头的危险 favicon URLvalidateColor()则借助浏览器自身的CSS.supports(color, value)作为合法颜色值的判定标准src/utils/PageMeta.js。2. 多页面支持Multi-Page SupportDashy 允许在主仪表盘之外创建附加页面每个子页面拥有独立的配置文件。子页面的配置文件既可以存放在本地也可以托管在远程任意位置。每个附加页面的链接会自动显示在导航栏中。你可以在交互式编辑器中编辑附加页面操作方式与主页面完全一致前提是配置文件在本地。注意在开始编辑下一个页面之前请先保存当前页面的更改——src/router.js的路由守卫会在编辑模式下切换到不同页面时弹出确认框防止未保存的编辑内容与切换后的页面脱钩src/router.js。2.1 使用本地子页面Local Sub-Pages第一步为子页面创建一个新的.yml配置文件放在/app/user-data目录内。然后在主conf.yml中为它指定名称与路径。以下示例必须添加在appConfig:之上的最顶层或任何符合 YAML 语法的合适位置pages: - name: Networking Services path: networking.yml - name: Work Stuff path: work.yml第二步创建新页面文件。如果你在 Docker 命令中挂载的是/app/user-data目录而非单个文件卷直接在宿主机上把新页面文件放进该目录即可如果挂载的是/app/user-data/conf.yml单文件则要么改用目录挂载volume要么为新增的附加页面再创建一个 bind mount。关于路径的规则子页面位于/app/user-data内时只需指定文件名位于其他位置时必须给出完整路径。从源码看ConfigHelpers.js 的formatConfigPath()负责将本地路径标准化不以/开头的路径会补上前缀如networking.yml→/networking.yml包含http的路径则原样保留。一个可直接参考的完整模板是仓库自带的 user-data/conf.yml它展示了pageInfo、appConfig与sections的标准结构。注意子页面不能使用appConfig应当将其移除详见 2.3 节「限制」。刷新页面后导航栏右上角会出现跳转到新页面的按钮。2.2 使用远程子页面Remote Sub-Pages配置文件不必存放在本地——可以放在任意位置Dashy 会在页面加载时将其作为子页面导入。例如pages: - name: Getting Started path: https://snippet.host/tvcw/raw - name: Homelab path: https://snippet.host/tetp/raw - name: Browser Startpage path: https://snippet.host/zcom/raw远程托管的典型用法包括放入 Git 仓库方便追踪配置变更、随时回滚存放在 NAS 上与其余文件一起备份使用托管 paste 服务如支持永不过期、开启 CORS 且可后续编辑的 paste 服务。需要明确的限制与注意事项无法通过 UI 编辑器直接向远程配置写入更新但仍可以编辑并预览更改然后通过导出菜单Export获取新配置的副本手动粘贴回远程源配置文件必须能被 Dashy 访问到即需要正确的 CORS 配置如果配置包含敏感信息如 API 密钥、凭据、秘密 URL 等务必小心不要将其暴露到公网。2.3 子页面的限制Restrictions子页面仅支持pageInfo和sections两个顶层字段。appConfig和pages始终继承自主conf.yml。除此之外子页面与默认视图行为完全一致可以包含区块、条目、widgets以及 navLinks、标题、Logo 等页面信息。这一点在源码中得到印证ConfigHelpers.js 定义了「根配置独占字段」——ROOT_OWNED_TOP_LEVEL [pages]和ROOT_OWNED_APP_CONFIG [auth]stripRootOwnedFields()在加载子页面配置时会剥离这些字段。同时 ConfigAccumalator.js 中的pages()直接读取主配置的pages数组说明子页面列表只来自根配置。2.4 URL 结构URL StructureDashy 中每个视图共享同一套 URL 形态因此任何配置都可以从任意视图访问/ Landing — 你设置为默认的视图 /view 根配置位于 view /view/page 子配置 page位于 view /view/page/section page 的单个区块位于 view /view/main/section 根配置的单个区块main 是保留页面 id其中view是home、minimal或workspace三者之一page是子配置 id——即pages数组中子页面的name转为「小写加连字符」的 slugemoji 及其他非单词字符会被移除section遵循同样的 slug 规则。Workspace 视图没有单区块 URL它改用侧边栏导航。示例/home Home 视图主配置 /home/homelab Home 视图Homelab 子配置 /home/homelab/media Home 视图Homelab 子配置仅 Media 区块 /home/main/getting-started Home 视图主配置仅 Getting Started 区块 /minimal/homelab Minimal 视图Homelab 子配置 /minimal/homelab/media Minimal 视图Homelab 子配置预选 Media 区块 /workspace/homelab Workspace 视图Homelab 子配置视图切换器、子页面导航链接和区块深链接都会保留你当前的视图与子页面——例如从单区块视图点击「返回全部」会回到你进入前的那个子页面。源码视角slug 生成与路由注册slug 的生成逻辑位于 ConfigHelpers.js 的makePageName()先做 NFC 规范化、转小写、空白替换为-、剥离.yml后缀再移除变体选择符emoji 修饰符和除 Unicode 字母/数字/标记/_/-外的字符最后修剪首尾的-。若结果为空则回退为unnamed-page若恰好等于保留 idmain则改写为main-page以避免歧义。路由侧src/router.js 的makeViewRoutes()为每个视图注册了三条路由/view、/view/:page和/view/:page/:sectionWorkspace 通过withSectionfalse跳过区块路由。RESERVED_ROOT mainsrc/utils/config/ConfigHelpers.js被用作「根配置」的 URL 占位符配合resolveRouteIntent()还能兼容「单段 URL 指向根配置区块」的旧式链接PAGE_STATUS.LEGACY_SECTION。3. 布局LayoutappConfig.layout控制区块sections在页面上的排布方式取值说明auto默认响应式 CSS Grid区块尺寸由displayData.cols/rows决定horizontal区块自上而下堆叠每个区块占满整行宽度vertical区块并排成列masonry响应式网格区块高度跟随内容较矮的区块会填补在较高区块下方留下的空隙rows被忽略你还可以从设置菜单中切换这些布局。另外添加appConfig.colCount可以强制指定固定的列数——该值应为 1 到 8 之间的整数默认情况下列数是根据当前屏幕宽度响应式计算的显式指定会覆盖这一行为详见 docs/configuring.md。从源码看defaults.js 将layout的默认值定义为auto而 ConfigAccumalator.js 会优先采用 localStorage 中的layoutOrientation其次是配置文件中的appConfig.layout最后回退到默认值——这正是「在 UI 中修改布局后刷新不丢失」的实现基础。layout与iconSize、theme一样属于「有独立 localStorage 键」的特殊设置。3.1 让区块更宽或更高通过displayData.cols15和displayData.rows15控制区块的占地面积- name: Important Links displayData: cols: 2 rows: 2 collapsed: false items: [...]rows仅在auto布局下生效在masonry布局中区块高度始终跟随内容。配置 schemaConfigSchema.json显示rows/cols的取值范围均为 15、默认 1其中cols会被钳制到页面当前列数以内确保区块不会超出网格宽度。3.2 区块内的条目排列Items inside a section条目默认响应式自动换行。displayData上最实用的几个调节项itemSizesmall、medium默认或large大号磁贴还会显示描述文字sortByalphabetical、reverse-alphabetical、most-used、last-used、randomsectionLayout: grid配合itemCountX和/或itemCountY当你想用固定网格代替自动换行时使用。完整的选项清单见 docs/configuring.md 的section.displayData章节。补充说明itemSize的合法枚举在 ConfigSchema.json 中定义为small/medium/large默认medium它会覆盖 UI 中设置的全局图标尺寸itemCountX/itemCountY的取值范围为 112分别代表每行/每列的条目数sectionLayout的枚举为grid与auto默认grid使条目等宽排列并启用 itemCount 计数sortBy的排序实现在 src/utils/SortItems.js 中alphabetical/reverse-alphabetical按标题排序most-used/last-used读取 localStorage 中的MOST_USED/LAST_USED使用记录排序random则进行洗牌另有provider、item-id等扩展排序区块与条目上的displayData还支持collapsed初始折叠、cutToHeight高度贴合内容、color自定义强调色、customStyles区块容器 CSS 覆盖以及基于 SSO 用户/组的showForUsers、hideForUsers、showForGroups等权限控制字段见 docs/configuring.md。此外SectionHelpers.js 的applyItemId()会在配置加载时为每个 item 和 widget 生成唯一 id由区块名、条目标题与索引派生用于拖拽排序与状态追踪保存配置时再由stripItemIds()移除这些运行时 id保证写回磁盘的 YAML 干净整洁。3.3 子项Sub-Items普通区块包含零个或多个条目items例如- name: Coding icon: far fa-code items: - title: GitHub url: https://github.com/ - title: StackOverflow url: http://stackoverflow.com/但条目也可以分组嵌套这种结构称为子项sub-items。当你有一组不常使用的条目、又不想让它们占用太多空间时子项非常实用。条目组还可以有可选的标题- name: Coding icon: far fa-code items: - title: Normal Item 1 - title: Normal Item 2 - title: Languages subItems: - title: JavaScript url: https://developer.mozilla.org icon: si-javascript - title: TypeScript url: https://www.typescriptlang.org/docs icon: si-typescript - title: Svelte url: https://svelte.dev/docs icon: si-svelte - title: Go url: https://go.dev/doc icon: si-go每个子项支持title、url、icon、target、color和backgroundColor字段见 docs/configuring.md 的item章节渲染为父条目内部的较小图标。图标方面可以使用任意受支持的格式包括 Font Awesomefas/far、Simple Iconssi-*或 Emoji具体可参考 docs/icons.md。4. 总结与实战建议元数据用pageInfo定制标题、Logo、favicon 与移动端主题色多页面时各页可独立设置但 PWA 安装元数据以构建期 manifest 为准。多页面本地子页面放入/app/user-data并给出文件名远程子页面给出完整 URL注意 CORS 与敏感信息暴露子页面仅接受pageInfosectionsappConfig与pages从根配置继承。URL 导航牢记/view/page/section的统一形态main是根配置的保留 idslug 由名称小写化并去除特殊字符生成可直接复制深链接分享到具体区块。布局与尺寸auto布局配合cols/rows15控制网格足迹masonry让高度自适应colCount可固定列数。内容组织itemSize控制磁贴密度sortBy决定条目顺序sectionLayout: griditemCountX/Y实现固定网格subItems收纳低频链接以节省空间。结合仓库中的 user-data/conf.yml 示例与 docs/configuring.md 全量参数表即可开始构建属于你的多页面、多区块个人仪表盘。【免费下载链接】dashy A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!项目地址: https://gitcode.com/GitHub_Trending/da/dashy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考