Ζητήστε πρώιμη πρόσβαση

Συμπληρώστε το όνομά σας και ένα email ή έναν αριθμό τηλεφώνου. Θα σας στείλουμε πληροφορίες για την πρόσβαση στο Tajo.

Σε αυτή τη σελίδα

Ενσωμάτωση σε υπάρχον θέμα

Αυτό το θέμα έχει σχεδιαστεί ώστε να λειτουργεί απρόσκοπτα με άλλα έργα Tailwind CSS v4.

Απαιτούμενα βήματα

Αντιγράψτε τον φάκελο src/docs από αυτό το θέμα στο υπάρχον έργο σας.

Τα περισσότερα στοιχεία αυτού του θέματος βρίσκονται μέσα στον φάκελο src/docs. Επομένως, το πρώτο βήμα είναι απλώς να αντιγράψετε ολόκληρο αυτόν τον φάκελο στο υπάρχον έργο σας (διατηρώντας την ίδια δομή φακέλων στη διαδρομή src/docs).
Εισαγάγετε τα στυλ της τεκμηρίωσης στο καθολικό αρχείο css.

Αυτό γίνεται προσθέτοντας την ακόλουθη γραμμή στο αρχείο global.css, μετά την εισαγωγή του θέματος tailwind:
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,
};

Προσθέστε τα στοιχεία mdx στην ενσωμάτωση AutoImport

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 και να ενημερώσετε την ιδιότητα 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" />