使用与覆盖组件

把预期会复用的呈现放进 Web component：header、文章卡片、编辑栏或响应式 device frame 都是合适的例子。页面数据和内容对象留在组件外，让组件保持为呈现边界。

建立完整的 site component

把组件放在 .web/components/<name>/：

.web/components/article-card/
├── manifest.json
├── render.js
└── style.css          # 本 beta.25 指南要求

当前 source resolver 中，新组件必须有 manifest.json 和 render.js，并且可以解析没有 style.css 的组件。但这不是本文件目标版本的编写规则：已验证的 2.0.0-beta.25 CLI 对新的 standalone component 要求 style.css。因此 beta.25 的 starter 或 site component 应始终包含这三份文件；runtime 版本改变时再重新核验这条窄规则。组件需要浏览器端脚本时，manifest 必须声明 hasScript: true，目录中也必须提供 script.js。

render.js 导出 render(ctx)。renderer context 提供 props、slots、t()、locale、escapeHtml()、icon() 与 pagination()。应把它当作受信任的 site code，而不是给不可信第三方插件的 sandbox。

了解覆盖顺序

当前 resolver 按以下顺序组装组件：

后面同名的层会覆盖前面的层。若下层已有组件，theme 或 site 可以只覆盖其中一个文件，例如只给 style.css，其余部分会继承。全新的组件名必须提供完整定义；单独一份 stylesheet 不是新组件。

本地 .web/themes/ 与共享 theme library 是替代来源，不是两套会自动叠加的 theme 来源。除非已在目标环境核验，不要假定本地 theme 和 library theme 会自动组合。

保持页面 layout 简单

在页面 layout 中以声明的 props 使用组件，并给出明确的空状态。不要只因第一次使用很小就把组件 HTML 复制到多个页面 layout 中。反过来，也不要在还没有第二个真实用途时把一次性页面结构抽成全局组件；那会产生没有复用收益的不透明抽象。

改完组件后，运行本地验证链，并在宽窄两种布局中检查每个使用它的页面。开发时 watcher 可能会让本地页面 cache 失效，但自动热更新不是无条件承诺；结果看起来陈旧时应 reload 后复查。

视觉系统见 主题与 tokens；runtime/theme component 与 site 自有 component 的边界见 组件解析。