Sections

섹션은 재사용 가능한 Portable Text 블록 묶음입니다. 편집자는 섹션을 어떤 Portable Text 필드에든 삽입한 다음, 원본 섹션을 바꾸지 않고 삽입된 블록을 수정할 수 있습니다.

행동 유도 문구, 저자 소개, 표준 공지처럼 반복해서 쓰는 출발점에는 섹션을 사용하세요. 중앙에서 관리하는 하나의 값이 표시되는 모든 곳에서 함께 갱신되어야 한다면 위젯 영역을 사용하세요.

섹션 만들기

섹션은 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을 추가하세요. 요청 본문과 응답은 섹션 엔드포인트를 참고하세요.