FaceFlow — Layout System
A layout is the structural frame that wraps every page. It defines where the header goes, where the footer goes, what global styles apply, and where page-specific content is placed. Think of it as the "shell" of your website — consistent across all pages that use it.
布局 开发文档
布局定义了 FaceFlow 页面使用的共享页面框架。
对于技术用户而言，布局是页面 shell 的契约。它决定了共享区域的位置、页面内容注入的位置，以及一组页面如何在不逐页复制结构的情况下保持一致的框架。
核心职责
布局应该控制：
- 整体文档结构
- 页眉、页脚和共享区域的位置
- 主要内容的插入点
- 结构性包装和页面系列的框架
- 可选的布局级样式或行为
布局不应拥有页面特定的营销内容。
布局 骨架
大多数布局可以通过一种简单模式来理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
</head>
<body>
{header}
{siteComponents}
<main>
{content}
</main>
{footer}
</body>
</html>关键要求是一个可靠的 {content} 插入点。没有它，页面就没有可预测的渲染位置。
Shell 契约示例
布局还可以在保持所有权边界清晰的同时公开额外的共享区域：
<body class="resource-layout">
{header}
<div class="resource-shell">
<aside class="resource-sidebar">
{siteComponents}
</aside>
<main class="resource-main">
{content}
</main>
</div>
{footer}
</body>重要规则是外壳保持结构性。页面仍然拥有渲染到 {content} 的序列。
与页面和组件的关系
保持所有权模型清晰：
- 布局 拥有外壳
- 页面 拥有体验的组合
- 组件 拥有体验内部的可重用内容区块
当布局保持结构性时，页面系列仍然容易演进。
共享区域
布局是放置共享区域的合适位置，例如：
- 持久导航
- 标准页脚框架
- 文档侧边栏
- 在一个页面系列中使用的支持栏
示例：
<body class="docs-layout">
{header}
<div class="docs-shell">
<aside class="docs-sidebar">
{siteComponents}
</aside>
<main class="docs-content">
{content}
</main>
</div>
{footer}
</body>那是结构性复用。一次性的促销横幅不属于这里。
布局 族
常见的布局族包括：
- 主营销站点外壳
- 活动登陆页外壳
- 资源或文档外壳
- 门户或知识库外壳
每个族应代表一种持久的结构模式，而不是临时的内容变体。
布局级样式
布局可以定义属于外壳的共享样式决策：
<body class="min-h-screen bg-slate-950 text-white">
{header}
<main class="mx-auto max-w-7xl px-6 py-16">
{content}
</main>
{footer}
</body>当样式属于页面框架时这是合适的。节级的样式仍然属于组件。
变更影响
布局变更影响较大，因为一个布局通常会影响许多页面。
在更改布局之前，请审查：
- 哪个页面系列依赖于它
- 共享区域的含义是否发生变化
- 内容宽度、间距或导航假设是否改变
- 现有组件是否仍然适合该外壳
布局审查模式
当提出布局更改时，按以下顺序检查影响：
shell semantics
-> shared regions
-> content width and spacing
-> component fit
-> dependent page-family behavior这可以帮助团队避免批准看似很小的外壳更改却悄然破坏多个依赖页面。
技术审查检查清单
- 布局是否暴露了一个清晰的内容插入点？
- 它是否仅拥有外壳级别的关注点？
- 多个页面是否可以在没有一次性例外的情况下重用它？
- 共享区域是否真正是共享的？
- 更改此布局是否会以可理解的方式影响许多页面？
反模式
避免：
- 直接在布局中嵌入页面特定的文案
- 为微小变体创建几乎重复的布局
- 将节逻辑移入外壳
- 将布局用作所有共享内容的倾倒场
- 在不检查依赖页面的情况下更改外壳语义
示例决策规则
当更改影响许多页面周围的框架时使用布局：
new docs sidebar across the whole docs section -> Layout
new CTA block inside one page section -> Component
new page-specific proof content -> Page composition