기존 테마에 통합하기

이 테마는 다른 Tailwind CSS v4 프로젝트와 매끄럽게 동작하도록 설계되었습니다.

필수 단계

이 테마의 src/docs 폴더를 기존 프로젝트로 복사합니다.

이 테마의 대부분의 항목은 src/docs 폴더 아래에 있습니다. 따라서 첫 단계는 이 폴더 전체를 기존 프로젝트로 그대로 복사하는 것입니다. 폴더 구조는 src/docs 그대로 유지하세요.
문서 스타일을 전역 CSS 파일에 임포트합니다.

Tailwind 테마 임포트 뒤에 global.css 파일에 다음 줄을 추가하면 됩니다:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

/* docs styles */
@import "@/docs/styles/docs-global.css";
```

사이트의 콘텐츠 컬렉션 설정 파일에 문서 콘텐츠 컬렉션을 추가합니다.

// other collections...

const docsCollection = defineCollection({
  loader: glob({ pattern: "**/[^_]*{md,mdx}", base: "./src/docs/data/docs" }),
  schema: () =>
    z.object({
      title: z.string(),
      description: z.string().optional(),
      sidebar: z
        .object({
          label: z.string().optional(),
          order: z.number().optional(),
          badge: z
            .object({
              text: z.string(),
              variant: z.enum(["note", "tip", "caution", "danger", "info"]).default("note"),
            })
            .optional(),
        })
        .optional(),
      tableOfContents: z
        .object({
          minHeadingLevel: z.number().min(1).max(6).optional(),
          maxHeadingLevel: z.number().min(1).max(6).optional(),
        })
        .optional(),
      pagefind: z.boolean().optional(),
      mappingKey: z.string().optional(),
      draft: z.boolean().optional(),
    }),
});

export const collections = {
  // other collection....
  docs: docsCollection,
};

AutoImport 연동에 MDX 컴포넌트를 추가합니다

export default defineConfig({
  // other config options...
  integrations: [
    AutoImport({
      imports: [
        // other imports...
        "@/docs/components/mdx-components/Aside.astro",
        "@/docs/components/mdx-components/Badge.astro",
        "@/docs/components/mdx-components/Button.astro",
        "@/docs/components/mdx-components/Steps.astro",
        "@/docs/components/mdx-components/Tabs.astro",
        "@/docs/components/mdx-components/TabsContent.astro",
        "@/docs/components/mdx-components/TabsList.astro",
        "@/docs/components/mdx-components/TabsTrigger.astro",
      ],
    }),
  ],
});

문서 페이지를 사이트에 추가합니다.

Tajo 테마의 src/pages/docs 폴더 전체를 사이트의 src/pages/docs 폴더로 복사합니다.

선택 단계

폰트

이 테마는 기본적으로 Inter 폰트를 사용합니다. fontsource에서 폰트를 로컬에 설치하는 것을 권장합니다.

그런 다음 fonts.css 파일에 다음을 추가합니다:

/* inter-latin-wght-normal */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

다른 폰트 사용하기

다른 폰트를 사용할 수도 있습니다. 필요한 폰트를 fonts.css 파일에 추가하고, src/docs/styles/docs-global.css 파일의 font-family 속성을 업데이트하기만 하면 됩니다.

Info

Inter 폰트와 마찬가지로 src/docs/layouts/BaseHead.astro 컴포넌트에서 폰트를 미리 로드하는 것이 좋습니다.

---
import InterVariable from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2";
---

<link rel="preload" href={InterVariable} as="font" type="font/woff2" crossorigin="anonymous" />

기존 테마에 통합하기

필수 단계

선택 단계

폰트

다른 폰트 사용하기

Tajo 사전 이용 신청

감사합니다. 신청이 완료되었습니다.