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

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

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

Απεικόνιση · δείγμα δεδομένων

Παράδειγμα συγχρονισμού

Ελέγξτε μία εγγραφή

Πηγή

Shopify

Κατάσταση συνδέσμου: Σε εξέλιξη

Προορισμός

Brevo

Κατάσταση συνδέσμου: Ενεργό

Πεδίο πηγήςΠεδίο προορισμούΕνδεικτική τιμή
record.id source_id record_1042
record.updated_at updated_at 2026-10-18T08:00:00Z
record.value value sample_value
  1. Σχέδιο
  2. Ελέγξτε μία εγγραφή
  3. Εγκρίνετε αυτή την έκδοση

Οι καταστάσεις αφορούν μεμονωμένους συνδέσμους και δεν εγγυώνται ότι αυτός ο συγχρονισμός είναι έτοιμος. Ενδεικτικά πεδία. Ελέγξτε το πραγματικό σχήμα και τα δικαιώματα πριν εκτελεστεί συγχρονισμός.

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

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

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

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

  2. Εισαγάγετε τα στυλ της τεκμηρίωσης στο καθολικό αρχείο css.

    Αυτό γίνεται προσθέτοντας την ακόλουθη γραμμή στο αρχείο global.css, μετά την εισαγωγή του θέματος tailwind:

    src/styles/global.css
    /* theme definition import */
    @import "./tailwind-theme.css";
    /* docs styles */
    @import "@/docs/styles/docs-global.css";
  3. Προσθέστε τη συλλογή περιεχομένου της τεκμηρίωσης στο αρχείο διαμόρφωσης συλλογών περιεχομένου του ιστότοπού σας.

    src/content.config.ts
    // 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,
    };
  4. Προσθέστε τα στοιχεία mdx στην ενσωμάτωση AutoImport

    astro.config.mjs
    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",
    ],
    }),
    ],
    });
  5. Προσθέστε τις σελίδες τεκμηρίωσης στον ιστότοπό σας.

    Από το θέμα 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" />

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

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

AI Βοηθός

Γεια! Ρωτήστε με οτιδήποτε για την τεκμηρίωση.

Αυτή η σελίδα ως Markdown: integrating.md

Φόρτωση Markdown…
Άνοιγμα στο Claude Άνοιγμα στο ChatGPT