Section 是可重複使用的 Portable Text 區塊組。編輯者可以把它們插入任何 Portable Text 欄位,然後修改插入的區塊,而不會改變來源 Section。
對於可重複使用的起點內容,例如行動呼籲、作者簡介或標準提示,請使用 Section。當一個集中管理的值需要在所有出現位置同步更新時,請使用小工具區域。
建立 Section
在 EmDash 管理後台的 Sections 中建立和管理 Section。
-
點擊 New section,然後輸入標題、slug 和可選的描述。
-
新增編輯者在插入該 Section 時應當取得的內容。
-
為編輯者尋找該 Section 時可能使用的詞語新增搜尋關鍵字。
-
儲存該 Section。
Section 的 slug 由小寫字母、數字和連字號組成。該 slug 用於在範本和 API 中識別 Section,它不是公開頁面的 URL。
將 Section 插入內容
-
將游標放在 Portable Text 欄位中,然後輸入
/section。 -
依標題、描述或關鍵字搜尋該 Section。
-
選擇該 Section,即可在游標處插入它的區塊。
-
視需要編輯插入的內容,然後儲存條目。
編輯器會把 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 端點。