अर्ली एक्सेस का अनुरोध करें

अपना नाम और ईमेल या फ़ोन नंबर दर्ज करें. हम Tajo एक्सेस की जानकारी के साथ आपसे संपर्क करेंगे.

मौजूदा थीम के साथ इंटीग्रेशन

यह थीम दूसरे 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. अपनी साइट की कंटेंट कलेक्शन कॉन्फ़िग फ़ाइल में docs कंटेंट कलेक्शन जोड़ें.

    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. AutoImport इंटीग्रेशन में mdx कंपोनेंट्स जोड़ें

    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 फ़ाइल में जोड़ें, और अपनी src/docs/styles/docs-global.css फ़ाइल में font-family प्रॉपर्टी अपडेट करें.

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" />

अर्ली एक्सेस का अनुरोध करें

अपना नाम और ईमेल या फ़ोन नंबर दर्ज करें. हम Tajo एक्सेस की जानकारी के साथ आपसे संपर्क करेंगे.

ऑटो डिटेक्ट
AI असिस्टेंट

नमस्ते! डॉक्यूमेंटेशन के बारे में कुछ भी पूछें.