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 庫中該 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 的內容作為其被複製到的條目的一部分來算繪。若要直接算繪 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 庫中的值,因此之後對該 Section 的編輯會影響所有使用此元件的位置。

執行階段 API 參考記錄了 Section 查詢和分頁。對於以程式方式進行的變更,請使用 Bearer 權杖進行驗證,並在每個會改變狀態的請求中加入 X-EmDash-Request: 1。請求本文和回應請參閱 Section 端點。