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 - 편집자를 위한 도움말 텍스트
리치 텍스트 에디터를 사용하여 콘텐츠를 추가합니다
선택적으로 더 쉬운 발견을 위해 키워드를 설정합니다

시드 파일을 통해

다음 시드 파일은 테마에 대한 두 개의 섹션을 정의합니다:

{
  "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 재사용 가능한 블록 가져오기