← 返回文档

页面与版式

Section 系统、分栏、草稿发布与页面预设

站点的每一页由若干 section(区块)按顺序拼成。这一篇讲怎么编排它们。

Section 一览

Section 中文名 用来做什么
header 页头 站点级,所有页面共用
footer 页脚 站点级,所有页面共用
hero 首屏 Hero 首屏主张 + 主按钮;可左右分栏
page-header 页面标题 内页的标题区
feature-grid 特性网格 带图标的卖点卡片
steps 步骤 有先后的流程
split 图文分栏 一侧文案,一侧图片或强调卡
band 通栏 CTA 一条横贯的行动号召
prose 富文本 直接写 Markdown
site-form.form 表单 收集线索,提交进表单记录
page-menu 页面菜单 页面级的目录 / 子导航
group 分栏 容器:把 section 并排放
billing.plans 套餐 平台套餐(数据来自套餐配置)
site-docs.list 文档列表 文档索引
site-docs.nav 文档导航 文档侧边目录
site-docs.toc 章节导航 当前文档的章节锚点
site-docs.article 文档正文 文档正文本体

文档相关的四个区块只在文档模板页里有意义——它们吃的是文档库的数据。

在页面编辑器里拖拽排序、增删、逐个改设置。

页头与页脚在 官网 → 页头页脚 单独配置,不必进页面编辑器。

分栏

想让两块内容并排,加一段「分栏」,再往每一列里放 section。

  • 列数:在左侧结构树里往这一段加 / 删「列」,最多 4 列
  • 列宽:选中分栏段,拖「列宽」上的分栏点。一行共 12 份,拖的是列与列之间的界线, 所以宽度永远加起来是一整行——不会出现配到一半剩下一条空白
  • 分隔线:选中某一列,勾「右侧分隔线」,就在它和右边那一列之间画一条竖线,高度 铺满整行(最后一列没有,它右边没有要分开的东西)。线型、粗细、颜色逐列配,颜色 留空则跟随主题边框色

窄屏一律上下堆叠,列宽不生效;谁排在最前由每列的「堆叠顺序」决定。

草稿与发布

每个页面有两份内容:

  • 草稿:编辑器正在改的那一份,访客看不到
  • 线上:已发布的那一份,访客看到的

发布 = 把草稿复制到线上;撤销 = 把线上回灌进草稿。列表里的「有未发布改动」标记就是 两者不一致。

这个语义和文档库完全一致:先改草稿,确认无误再发布,半成品不会暴露给访客。发布过的 页面还会留下版本记录,可以回看是谁在什么时候改的。

页面预设

新建页面时可以选一个预设起步,它是排好的区块组合:

  • 首页
  • 定价页
  • 关于页
  • 联系页

另外还有两张文档模板页(文档索引 / 文档详情)。它们不出现在页面列表里,只有你想 改文档页的版式时才需要建;没建时前台用内置版式渲染。

页面路径

页面的访问路径由路径字段决定:首页固定为 /,其它页面例如 pricing/pricing

/docs 是文档库的专属路径,不能拿来当页面路径。语言代码(enzh-CN)同理, 它们在 URL 上占的是同一个位置。

页面顺序

页面列表里的先后就是访客看到的先后:页头的「全部页面」导航、页面菜单与 sitemap 都按 它排。用每行的上移 / 下移调整,改完立即生效,不需要发布。

同一个页面的各语言版本算一组,一起挪——它们在导航里本来就是同一个位置。

列表处于筛选状态时上下移会收起来:那时看到的先后不是真实先后,排了也是盲排。先清 空筛选再排。

页面状态与可见性

  • 状态:草稿(访客不可见)或已发布。新建页面默认是草稿。
  • 可见性:所有人可见,或仅站点会员可见。选「仅会员」时,未登录访客拿到的是不含 正文的骨架,正文在登录后才补上——不是靠前端藏起来。

SEO

页面的标题与摘要进 SEO 元信息。详情页(文档)的 SEO 跟着内容本身走而不是跟着 模板页:每篇文档的标题、摘要各不相同,套模板页那一份只会让搜索结果里几十条长得一样。

下一步