On this page

Интегриране със съществуваща тема

Тази тема е проектирана да работи безпроблемно с други проекти на Tailwind CSS v4.

Необходими стъпки

  1. Копирайте папката src/docs от тази тема във вашия съществуващ проект.

    Повечето елементи на тази тема се намират в папката src/docs. Така че първата стъпка е просто да копирате цялата тази папка във вашия съществуващ проект (за да запазите същата структура на папките в src/docs).

  2. Импортирайте docs стиловете във вашия глобален css файл.

    Това може да се направи, като добавите следния ред към вашия global.css файл след импортирането на tailwind темата:

    src/styles/global.css
    /* импортиране на дефиниция на тема */
    @import "./tailwind-theme.css";
    

    /* docs стилове */
    @import "@/docs/styles/docs-global.css";

  3. Добавете docs колекцията от съдържание към конфигурационния файл на колекцията от съдържание на вашия сайт.

    src/content.config.ts
    // други колекции...
    

    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 = {
      // други колекции....
      docs: docsCollection,
    };

  4. Добавете mdx компонентите към AutoImport интеграцията

    astro.config.mjs
    export default defineConfig({
      // други опции за конфигурация...
      integrations: [
        AutoImport({
          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",
          ],
        }),
      ],
    });

  5. Добавете docs страниците към вашия сайт.

    От темата Tajo копирайте цялата папка src/pages/docs в папката src/pages/docs на вашия сайт.

Незадължителни стъпки

Шрифтове

Тази тема използва шрифта Inter по подразбиране. Препоръчително е да инсталирате шрифта локално от fontsource.

След това във вашия fonts.css файл добавете следното:

src/styles/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 файл и актуализирате свойството font-family във вашия src/docs/styles/docs-global.css файл.

Info

Трябва също да предварително заредите шрифта си в компонента src/docs/layouts/BaseHead.astro, подобно на шрифта Inter.

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


<link rel="preload" href={InterVariable} as="font" type="font/woff2" crossorigin="anonymous" />
Започнете безплатно с Brevo