Erken erişim talep edin

Adınızı ve e-posta adresinizi veya telefon numaranızı paylaşın. Tajo erişim ayrıntıları için sizinle iletişime geçeceğiz.

Bu sayfada

Mevcut Bir Temayla Entegrasyon

Bu tema, diğer Tailwind CSS v4 projeleriyle sorunsuz çalışacak şekilde tasarlanmıştır.

Gerekli adımlar

Bu temadaki src/docs klasörünü mevcut projenize kopyalayın.

Bu temanın öğelerinin çoğu src/docs klasörü altında bulunur. Bu nedenle ilk adım, klasörün tamamını mevcut projenize kopyalamaktır (aynı klasör yapısını src/docs altında koruyacak şekilde).
Dokümantasyon stillerini global css dosyanıza içe aktarın.

Bunu, global.css dosyanıza tailwind tema içe aktarımından sonra aşağıdaki satırı ekleyerek yapabilirsiniz:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Dokümantasyon içerik koleksiyonunu sitenizin içerik koleksiyonu yapılandırma dosyasına ekleyin.

// 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,
};

mdx bileşenlerini AutoImport entegrasyonuna ekleyin

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",
      ],
    }),
  ],
});

Dokümantasyon sayfalarını sitenize ekleyin.

Tajo temasından src/pages/docs klasörünün tamamını sitenizin src/pages/docs klasörüne kopyalayın.

İsteğe bağlı adımlar

Yazı tipleri

Bu tema varsayılan olarak Inter yazı tipini kullanır. Yazı tipini fontsource üzerinden yerel olarak yüklemeniz önerilir.

Ardından fonts.css dosyanıza aşağıdakileri ekleyin:

/* 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;
}

Alternatif yazı tipleri

Farklı yazı tipleri de kullanabilirsiniz. Yalnızca gerekli yazı tiplerini fonts.css dosyanıza eklediğinizden ve src/docs/styles/docs-global.css dosyanızdaki font-family özelliğini güncellediğinizden emin olun.

Info

Ayrıca yazı tipinizi, Inter yazı tipine benzer şekilde src/docs/layouts/BaseHead.astro bileşeninde ön yüklemelisiniz.

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

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