E EmDash CMS Everything Guides, use cases, plugins, templates
한국어

사이트 설정

이 페이지

사이트 설정은 사이트 전체에 적용되는 값을 보관합니다. 템플릿은 사이트 식별 정보, 페이지 매김, 날짜 처리, 소셜 프로필, 검색 메타데이터에 사용할 수 있습니다.

설정 구성

EmDash 관리자에서 Settings를 연 다음, 필요한 값의 페이지를 선택하세요.

  • General에는 사이트 제목, 태그라인, 로고, 파비콘, 공개 URL, 페이지당 게시물 수, 날짜 형식, 시간대가 포함됩니다.
  • Social에는 지원되는 소셜 서비스의 프로필 핸들이 포함됩니다.
  • SEO에는 제목 구분 기호, 기본 소셜 이미지, 인증 값, robots.txt 내용이 포함됩니다.

  1. 해당 설정 페이지를 엽니다.

  2. 사이트의 템플릿과 메타데이터가 사용하는 값을 입력합니다.

  3. 페이지를 저장한 뒤, 해당 설정을 렌더링하는 공개 페이지를 다시 로드합니다.

설정은 구성될 때까지 선택 사항입니다. 템플릿은 필요한 값마다 적절한 폴백을 제공해야 합니다.

레이아웃에서 설정 읽기

레이아웃에 여러 값이 필요할 때 getSiteSettings()를 사용하세요. 구성된 키를 부분 객체로 반환하고, 반환하기 전에 미디어 참조를 해석합니다.

다음 기본 레이아웃은 사이트 식별 설정을 사용하고, EmDashHead가 구성된 파비콘, 기본 소셜 이미지, 사이트 전체 인증 메타데이터를 적용하게 합니다.

---
import { getSiteSettings } from "emdash";
import { createPublicPageContext } from "emdash/page";
import { EmDashHead } from "emdash/ui";

interface Props {
  title?: string;
  description?: string;
}

const { title, description } = Astro.props;
const settings = await getSiteSettings();
const siteTitle = settings.title ?? "My site";
const fullTitle = title ? `${title} — ${siteTitle}` : siteTitle;
const pageDescription = description ?? settings.tagline;

const page = createPublicPageContext({
  Astro,
  kind: "custom",
  pageType: "website",
  title: fullTitle,
  pageTitle: title ?? siteTitle,
  description: pageDescription,
  siteName: siteTitle,
});
---

<!doctype html>
<html lang={Astro.currentLocale ?? "en"}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{fullTitle}</title>
    <EmDashHead page={page} />
  </head>
  <body>
    <header>
      <a href="/" aria-label={siteTitle}>
        {settings.logo?.url ? (
          <img
            src={settings.logo.url}
            alt={settings.logo.alt ?? siteTitle}
            width={settings.logo.width}
            height={settings.logo.height}
          />
        ) : (
          siteTitle
        )}
      </a>
      {settings.tagline && <p>{settings.tagline}</p>}
    </header>

    <main>
      <slot />
    </main>
  </body>
</html>

EmDashHead도 getSiteSettings()를 호출합니다. 요청 캐싱으로 그 호출은 다른 설정 쿼리를 실행하는 대신 레이아웃의 결과를 재사용합니다.

서버 렌더링된 콘텐츠 페이지에서는 콘텐츠 참조를 createPublicPageContext()에 넘기고 getEmDashEntry()로 항목을 가져오세요. EmDashHead는 그다음 항목의 SEO 패널 값을 사이트 기본값 위에 적용합니다. 콘텐츠 페이지의 전체 패턴은 SEO 패널 데이터 렌더링을 보세요.

설정 하나 읽기

컴포넌트에 값이 하나 필요하고 부모가 아직 설정 객체를 가져오지 않았을 때 getSiteSetting()을 사용하세요.

다음 컴포넌트는 구성된 시간대로 타임스탬프를 포맷합니다.

---
import { getSiteSetting } from "emdash";

interface Props {
  date: Date;
}

const { date } = Astro.props;
const timezone = await getSiteSetting("timezone") ?? "UTC";
const formatted = new Intl.DateTimeFormat(Astro.currentLocale, {
  dateStyle: "long",
  timeZone: timezone,
}).format(date);
---

<time datetime={date.toISOString()}>{formatted}</time>

dateFormat 설정은 MMMM d, yyyy 같은 패턴 문자열입니다. Intl.DateTimeFormat은 그 구문을 소비하지 않습니다. 템플릿이 정확히 적용해야 할 때는 패턴 문자열을 지원하는 포맷 라이브러리를 사용하세요.

소셜 프로필 렌더링

소셜 설정은 완전한 링크가 아니라 핸들이나 사용자 이름을 저장합니다. 템플릿이 어떤 프로필을 보여줄지 결정하고, 구성된 각 값을 서비스 URL로 바꿉니다.

다음 컴포넌트는 구성된 X와 GitHub 프로필을 렌더링합니다.

---
import { getSiteSetting } from "emdash";

const social = await getSiteSetting("social");
const xHandle = social?.twitter?.replace(/^@/, "");
---

{(xHandle || social?.github) && (
  <nav aria-label="Social profiles">
    <ul>
      {xHandle && (
        <li>
          <a href={`https://x.com/${xHandle}`} rel="me noopener" target="_blank">
            X
          </a>
        </li>
      )}
      {social?.github && (
        <li>
          <a
            href={`https://github.com/${social.github}`}
            rel="me noopener"
            target="_blank"
          >
            GitHub
          </a>
        </li>
      )}
    </ul>
  </nav>
)}

구성된 Facebook, Instagram, LinkedIn, YouTube 값에도 같은 패턴을 적용하세요. 이 필드는 관리자에 입력된 페이지, 프로필, 채널, 핸들 값을 저장하며, 공개 URL 형식은 테마의 책임입니다.

미디어 설정 사용

로고, 파비콘, 기본 소셜 이미지는 미디어 참조로 저장됩니다. 읽을 때 EmDash는 현재 URL과 알려진 콘텐츠 유형, 너비, 높이를 추가합니다. 참조된 미디어 항목이 삭제된 경우 그 해석된 값이 없을 수 있으므로, 이미지를 렌더링하기 전에 url을 확인하세요.

관리자에서는 Remove 버튼으로 이 이미지 중 하나를 제거합니다. API와 MCP 클라이언트는 해당 필드를 null로 설정해 logo, favicon, seo.defaultOgImage를 제거할 수 있습니다. 필드를 생략하면 현재 값이 그대로 유지됩니다.

사이트 설정은 로고와 파비콘을 각각 하나씩 보관합니다. 다크 이미지 변형은 EmDash 이미지 필드에 속하며, 편집자가 대응 이미지를 고르고 Image 컴포넌트가 전환할 수 있습니다. 그 패턴은 다크 모드를 보세요.

런타임 API 참고는 설정 키와 쿼리 반환 타입을 문서화합니다. 프로그래밍 방식 변경에는 Bearer 토큰으로 인증하고, 상태를 바꾸는 모든 요청에 X-EmDash-Request: 1을 추가하세요. 요청 본문과 응답은 settings 엔드포인트를 보세요.