跳到主要内容

ARC 2.0.0-beta.25

自定义组件

添加一个完整 site component,核验 resolver contract,再从 page 组合它而不是复制呈现 tree。

以建立第一个站点中的 hello component 作为已验证的最小 component shape。新的 site-owned component 位于 .web/components/<name>/,需要 manifest 和 renderer;beta.25 已验证 starter 也包含 stylesheet。

把它当作 contract,而不是 HTML fragment

  1. 选取基于读者用途的稳定 component 名称,例如 article-card。
  2. 在 manifest.json 声明 page 可传入的 props。
  3. 需要时用 props、slots、t()、locale 和 escaping helper 实现 render(ctx)。
  4. 在 component 层添加样式,并给可选值明确 empty state。
  5. 在一个 page layout 中以声明 props 引用它,再跑完整本地链。

同名 component 已来自 runtime/theme 时,overlay 可只替换其中一个文件并继承其他文件。名称全新时,需要完整定义;单独 style.css 不会创建 component。

不要把 render.js 叫作 sandbox,它是受信任 site code。也不要把 hot reload 写成正确性保证;编辑后 reload 并检查渲染页面。

优先级与 rendering context 见 使用与覆盖组件。