사이트 설정

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

설정 구성

EmDash 관리자에서 Settings를 열고 필요한 값이 있는 페이지를 선택합니다.

• General에는 사이트 제목, 태그라인, 로고, favicon, 공개 URL, 페이지당 게시물 수, 날짜 형식, 시간대가 있습니다. 공개 URL은 Change domain으로 변경합니다. 새 도메인으로 이전하기를 참고하세요.
• Social에는 지원되는 소셜 서비스의 프로필 핸들이 있습니다.
• SEO에는 제목 구분자, 기본 소셜 이미지, 인증 값, robots.txt 내용이 있습니다. 각 항목이 하는 일은 기본 제공 SEO 기능을 참고하세요.

설정은 구성하기 전까지는 선택 사항입니다. 템플릿은 필요로 하는 모든 값에 대해 적절한 폴백을 제공해야 합니다.

레이아웃에서 설정 읽기

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

다음 기본 레이아웃은 사이트 식별 정보 설정을 사용하고, 구성된 favicon, 기본 소셜 이미지, 사이트 전체 인증 메타데이터를 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 형식은 계속 테마가 담당합니다.

미디어 설정 사용

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

이러한 이미지 중 하나를 관리자에서 제거하려면 Remove 버튼을 사용하세요. API 및 MCP 클라이언트는 해당 필드를 null로 설정해 logo, favicon, seo.defaultOgImage를 제거할 수 있습니다. 필드를 생략하면 현재 값은 변경되지 않습니다. seo와 social 안의 필드도 마찬가지입니다. 변경하려는 필드만 보내고, 텍스트 필드를 지우려면 빈 문자열을 보내세요.

사이트 설정에는 로고 하나와 favicon 하나가 저장됩니다. 다크 이미지 변형은 EmDash 이미지 필드에 속하며, 거기서 에디터가 짝이 되는 이미지를 고르고 Image 컴포넌트가 둘 사이를 전환할 수 있습니다. 이 패턴은 다크 모드를 참고하세요.

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