Sections | EmDash CMS Everything

Sectionsは、編集者がスラッシュコマンドを介して任意のコンテンツに挿入できる再利用可能なコンテンツブロックです。CTA、お客様の声、機能グリッド、または複数のページに表示されるコンテンツなどの一般的なパターンに使用します。

Sectionsのクエリ

getSection

次の例では、スラッグで単一のセクションを取得します：

import { getSection } from "emdash";

const cta = await getSection("newsletter-cta");

if (cta) {
  console.log(cta.title);    // "Newsletter CTA"
  console.log(cta.content);  // PortableTextBlock[]
}

getSections

次の例では、オプションのフィルターを使用して複数のセクションを取得します：

import { getSections } from "emdash";

// Get all sections
const { items: all } = await getSections();

// Filter by source
const { items: themeSections } = await getSections({ source: "theme" });

// Search by title/keywords
const { items: results } = await getSections({ search: "newsletter" });

getSectionsは、標準のページネーションパターンに従って{ items: Section[], nextCursor?: string }を返します。

Sectionの構造

セクションは次の形式を持ちます：

interface Section {
  id: string;
  slug: string;
  title: string;
  description?: string;
  keywords: string[];
  content: PortableTextBlock[];
  previewUrl?: string;
  source: "theme" | "user" | "import";
  themeId?: string;
  createdAt: string;
  updatedAt: string;
}

ソースタイプ

Source	Description
`theme`	シードファイルで定義、テーマによって管理
`user`	管理画面で編集者によって作成
`import`	WordPressからインポート（再利用可能ブロック）

コンテンツでSectionsを使用する

編集者は、リッチテキストエディターの/sectionスラッシュコマンドを使用してセクションを挿入します。

/sectionと入力します（または/pattern、/block、/template）
利用可能なセクションを検索または閲覧します
クリックしてカーソル位置にセクションのコンテンツを挿入します

セクションのPortable Textコンテンツがドキュメントにコピーされます。挿入されたコンテンツは自己完結型です：編集者はカスタマイズでき、セクションへの後の変更はコンテンツにすでに配置されたコピーには影響しません。

Sectionsの作成

管理UIで

管理サイドバーのSectionsに移動します
New Sectionをクリックします
入力します：
- Title - セクションの表示名
- Slug - URL識別子（タイトルから自動生成）
- Description - 編集者向けのヘルプテキスト
リッチテキストエディターを使用してコンテンツを追加します
オプションで、発見しやすくするためにキーワードを設定します

シードファイル経由

次のシードファイルは、テーマの2つのセクションを定義します：

{
  "sections": [
    {
      "slug": "hero-centered",
      "title": "Centered Hero",
      "description": "Full-width hero with centered heading and CTA",
      "keywords": ["hero", "banner", "header"],
      "content": [
        {
          "_type": "block",
          "style": "h1",
          "children": [{ "_type": "span", "text": "Welcome to Our Site" }]
        },
        {
          "_type": "block",
          "children": [{ "_type": "span", "text": "Your tagline goes here." }]
        }
      ]
    },
    {
      "slug": "newsletter-cta",
      "title": "Newsletter CTA",
      "keywords": ["newsletter", "subscribe", "email"],
      "content": [
        {
          "_type": "block",
          "style": "h3",
          "children": [{ "_type": "span", "text": "Subscribe to our newsletter" }]
        }
      ]
    }
  ]
}

WordPressインポート経由

WordPress再利用可能ブロック（wp_block投稿タイプ）は自動的にセクションとしてインポートされます：

Sourceは"import"に設定されます
GutenbergコンテンツはPortable Textに変換されます

プログラムでSectionsをレンダリング

次の例では、エディター外のサーバー側でセクションのコンテンツをレンダリングします：

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

const newsletter = await getSection("newsletter-cta");
---

{newsletter && (
  <aside class="cta-box">
    <PortableText value={newsletter.content} />
  </aside>
)}

管理UI機能

Sectionsライブラリ（/_emdash/admin/sections）は以下を提供します：

セクションプレビュー付きのグリッドビュー
タイトルとキーワードによる検索
ソースによるフィルター
クリップボードへのスラッグのクイックコピー
セクションコンテンツとメタデータの編集
確認付きの削除（テーマセクションの場合は警告）

APIリファレンス

`getSection(slug)`

スラッグでセクションを取得します。

パラメータ：

slug — セクションの一意の識別子（string）

戻り値： Promise<Section | null>

`getSections(options?)`

オプションのフィルターを使用してセクションをリストします。

パラメータ：

options.source — ソースでフィルター："theme"、"user"、または"import"
options.search — タイトル、説明、キーワードで検索
options.limit — ページサイズ（デフォルト50、最大100）
options.cursor — 前のnextCursorからのページネーションカーソル

戻り値： Promise<{ items: Section[]; nextCursor?: string }>

REST API

Sectionsのリスト

ソースまたは検索用語でオプションでフィルターされたセクションをリストします：

GET /_emdash/api/sections
GET /_emdash/api/sections?source=theme
GET /_emdash/api/sections?search=newsletter

Sectionの取得

スラッグで単一のセクションを取得します：

GET /_emdash/api/sections/newsletter-cta

Sectionの作成

POSTリクエストでセクションを作成します：

POST /_emdash/api/sections
Content-Type: application/json

{
  "slug": "my-section",
  "title": "My Section",
  "description": "Optional description",
  "keywords": ["keyword1", "keyword2"],
  "content": [...]
}

Sectionの更新

PUTリクエストでセクションを更新します：

PUT /_emdash/api/sections/my-section
Content-Type: application/json

{
  "title": "Updated Title",
  "content": [...]
}

Sectionの削除

スラッグでセクションを削除します：

DELETE /_emdash/api/sections/my-section

次のステップ

コンテンツの操作 - リッチテキストエディターについて学ぶ
Widget Areas - 同期された動的コンテンツ用
コンテンツのインポート - WordPress再利用可能ブロックのインポート