Sections

本页内容

Section 是可复用的 Portable Text 区块组。编辑者可以把它们插入任何 Portable Text 字段,然后修改插入的区块,而不会改变源 Section。

对于可重复使用的起点内容,例如行动号召、作者简介或标准提示,请使用 Section。当一个集中管理的值需要在所有出现位置同步更新时,请使用小部件区域。

创建 Section

在 EmDash 管理后台的 Sections 中创建和管理 Section。

  1. 点击 New section,然后输入标题、slug 和可选的描述。

  2. 添加编辑者在插入该 Section 时应当获得的内容。

  3. 为编辑者查找该 Section 时可能使用的词语添加搜索关键词。

  4. 保存该 Section。

Section 的 slug 由小写字母、数字和连字符组成。该 slug 用于在模板和 API 中标识 Section,它不是公开页面的 URL。

将 Section 插入内容

  1. 将光标放在 Portable Text 字段中,然后输入 /section。

  2. 按标题、描述或关键词搜索该 Section。

  3. 选择该 Section,即可在光标处插入它的区块。

  4. 根据需要编辑插入的内容,然后保存条目。

编辑器会把 Section 的 Portable Text 复制到条目中。之后对库中 Section 的修改,不会改变已经插入的副本。

在 seed 文件中提供 Section

主题或入门模板可以在其 seed 文件中提供 Section。与其他 seed 内容一样,请为每个 Portable Text 区块和 span 指定稳定的 _key。

下面的 seed 文件添加了一个新闻简报 Section:

{
  "version": "1",
  "sections": [
    {
      "slug": "newsletter-signup",
      "title": "Newsletter signup",
      "description": "A short newsletter call to action",
      "keywords": ["newsletter", "subscribe", "email"],
      "source": "theme",
      "content": [
        {
          "_type": "block",
          "_key": "newsletter-heading",
          "style": "h3",
          "children": [
            {
              "_type": "span",
              "_key": "newsletter-heading-text",
              "text": "Receive new articles by email"
            }
          ]
        },
        {
          "_type": "block",
          "_key": "newsletter-body",
          "style": "normal",
          "children": [
            {
              "_type": "span",
              "_key": "newsletter-body-text",
              "text": "Subscribe for occasional updates."
            }
          ]
        }
      ]
    }
  ]
}

在应用手写的 seed 文件之前,请先运行 emdash seed --validate。有关应用方式和冲突处理选项,请参阅 Seed 文件。

由主题提供的 Section 使用 theme 来源。在管理后台创建的 Section 使用 user,而由 EmDash 导入的 WordPress 可复用区块使用 import。导入流程请参阅内容导入。

在模板中渲染 Section

大多数站点会把 Section 的内容作为其被复制到的条目的一部分来渲染。若要直接渲染库中的当前值,请按 slug 获取该 Section,并把它的内容传给 PortableText。

下面的组件渲染一个经过集中查询的新闻简报 Section:

---
import { getSection } from "emdash";
import { PortableText } from "emdash/ui";

const section = await getSection("newsletter-signup");
---

{section && (
  <aside aria-label={section.title}>
    <PortableText value={section.content} />
  </aside>
)}

这种直接渲染方式在每次渲染时都会读取库中的值,因此之后对该 Section 的编辑会影响所有使用此组件的位置。

运行时 API 参考记录了 Section 查询和分页。对于以编程方式进行的更改,请使用 Bearer 令牌进行认证,并在每个会改变状态的请求中添加 X-EmDash-Request: 1。请求体和响应请参阅 Section 端点。