Sections

セクションは、再利用できる Portable Text ブロックのまとまりです。編集者は任意の Portable Text フィールドにセクションを挿入し、挿入したブロックを、元のセクションを変更せずに編集できます。

行動喚起、著者プロフィール、定型のお知らせなど、繰り返し使う出発点にはセクションを使用します。一元管理された 1 つの値を、表示されているすべての場所で更新したい場合は、ウィジェットエリアを使用してください。

セクションを作成する

セクションは、EmDash 管理画面の Sections で作成・管理します。

セクションのスラッグには、小文字、数字、ハイフンを使用できます。スラッグは、テンプレートと API でセクションを識別するためのもので、公開ページの URL ではありません。

セクションをコンテンツに挿入する

エディターは、セクションの Portable Text をエントリにコピーします。ライブラリのセクションを後から編集しても、すでに挿入されたコピーは変更されません。

シードファイルでセクションを提供する

テーマやスターターは、シードファイルでセクションを提供できます。ほかのシードコンテンツと同様に、すべての Portable Text ブロックとスパンに、安定した _key を付けてください。

次のシードファイルは、ニュースレターのセクションを追加します。

{
  "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."
            }
          ]
        }
      ]
    }
  ]
}

手書きのシードファイルを適用する前に、emdash seed --validate を実行してください。適用方法と競合の処理オプションについては、シードファイルを参照してください。

テーマが提供するセクションは theme ソースを使用します。管理画面で作成したセクションは user、EmDash がインポートした WordPress の再利用ブロックは import を使用します。インポートのワークフローについては、コンテンツインポートを参照してください。

テンプレートでセクションをレンダリングする

ほとんどのサイトでは、セクションのコンテンツを、コピー先のエントリの一部としてレンダリングします。ライブラリの現在の値を直接レンダリングするには、スラッグでセクションを取得し、そのコンテンツを PortableText に渡します。

次のコンポーネントは、一元的にクエリしたニュースレターのセクションをレンダリングします。

---
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>
)}

この直接レンダリングの方法は、レンダリングのたびにライブラリの値を読み取るため、後でセクションを編集すると、このコンポーネントを使用しているすべての場所に影響します。

ランタイム API リファレンスに、セクションのクエリとページネーションが記載されています。プログラムから変更する場合は、Bearer トークンで認証し、状態を変更するすべてのリクエストに X-EmDash-Request: 1 を追加してください。リクエストボディとレスポンスについては、セクションのエンドポイントを参照してください。