Layout 布局 - Docs - Artefact

Layout 布局

Layout

展示型

简介

Layout 组件提供由自定义页眉、侧边导航栏（sider）、主体内容区域与页脚组成的语义化页面结构。它支持自定义侧边栏尺寸、基于断点的显隐控制、吸顶滚动锁定，以及占满视口高度的外层容器。

在页面构建器（Page Builder）CMS 中，内容作者与开发者可将卡片、页眉、堆叠（Stack）与按钮放入专用的插槽数组，从而配置语义化的结构面板。

用法

以下示例展示了内容编辑者如何绑定并组织语义化的页面模板。

1. 标准页眉、内容与页脚页面外壳

包含语义化顶部页眉与底部页脚面板的文档或文章型布局。

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Site Brand Header", "as": "h4", "size": "sm" }
  ],
  "content": [
    { "type": "text", "content": "Main Article and Interactive Content" }
  ],
  "footer": [
    { "type": "text", "content": "© 2026 Acme Corp. All rights reserved.", "size": "xs" }
  ]
}

Main Article and Interactive Content

2. 带侧边导航（Sider）的仪表盘外壳

在主内容区域左侧添加导航抽屉或侧栏。Sider 可自定义 sm、md 或 lg 宽度，并可在小屏移动端视口上自动收起。

{
  "type": "layout",
  "siderWidth": "sm",
  "siderHideBelow": "md",
  "header": [
    { "type": "heading", "text": "Dashboard System", "as": "h4", "size": "sm" }
  ],
  "sider": [
    {
      "type": "stack",
      "direction": "vertical",
      "gap": "2",
      "children": [
        { "type": "text", "content": "Analytics Overview", "size": "sm" },
        { "type": "text", "content": "Cloud Infrastructure", "size": "sm" }
      ]
    }
  ],
  "content": [
    { "type": "text", "content": "Cloud systems are operational. Latency is within normal bounds." }
  ]
}

Cloud systems are operational. Latency is within normal bounds.

3. 嵌套布局组合

布局可以干净地嵌套在其他布局内部。当你希望拥有通栏的站点页眉与页脚，但仅让中间主体内容包含侧边导航时，这种做法非常有用。

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Global Full-Width Header", "as": "h3" }
  ],
  "content": [
    {
      "type": "layout",
      "siderWidth": "md",
      "sider": [
        { "type": "text", "content": "Nested Sidebar Rail" }
      ],
      "content": [
        { "type": "text", "content": "Nested Content Body" }
      ]
    }
  ],
  "footer": [
    { "type": "text", "content": "Global Full-Width Footer", "size": "xs" }
  ]
}

属性

属性	CMS 字段类型	默认值	描述 / 支持选项
页眉面板 (`header`)	`list`	-	渲染在顶部语义化 `<header>` 内部的视觉区块集合（如 logo、标题、按钮）。
侧边面板 (`sider`)	`list`	-	渲染在左侧语义化导航 `<aside>` 内部的视觉区块集合。
主体内容 (`content`)	`list`	-	渲染在语义化 `<main>` 内容容器内部的主区块集合。
页脚面板 (`footer`)	`list`	-	渲染在底部语义化 `<footer>` 内部的视觉区块集合。
占满高度 (`fullHeight`)	`boolean`	`false`	使最外层容器占满整个视口高度（`min-height: 100vh`）。
吸顶页眉 (`stickyHeader`)	`boolean`	`false`	在页面滚动时将站点页眉固定在视口顶部。
吸顶侧栏 (`stickySider`)	`boolean`	`false`	将侧边面板锁定在原位，仅主体内容区域滚动。
侧栏宽度 (`siderWidth`)	`select`	`"md"`	侧边面板的列宽尺寸。 • 选项：`"sm"`（14rem）、`"md"`（16rem）、`"lg"`（18rem）。
侧栏响应式隐藏 (`siderHideBelow`)	`select`	-	在较小视口上收起并隐藏侧边栏。 • 选项：`"sm"`、`"md"`、`"lg"`。

开发者须知与无障碍

嵌套规则与深度上限： Sveltia CMS 在编辑器界面中强制约四层的可视化嵌套上限。此深度限制约束了通过 UI 可构建的内容，但并不会限制布局编译器——手动编写的 JSON 模板可按需任意深度嵌套布局。
语义化元素映射： 该组件直接映射为合法且语义化的 HTML5 元素：<header>、<aside>、<main> 与 <footer>。
跳过导航兼容性： 使用自定义页眉与页脚时，请确保标题层级逻辑有序（例如页面以 h1 开头），以维持较高的无障碍评分。

Group 分组

Splitter 分割面板

外观

外观

外观

外观