---
title: "मौजूदा थीम के साथ इंटीग्रेशन | Tajo"
description: "जानें कि Tajo को किसी मौजूदा प्रोजेक्ट के साथ कैसे इंटीग्रेट करें"
url: https://tajo.io/hi/docs/getting-started/integrating/
markdown: https://tajo.io/hi/docs/getting-started/integrating.md
lang: hi-IN
author: "Set Noa"
author_url: https://tajo.io/hi/set-noa/
robots: noindex
---

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

अपना पहला नाम और कार्यस्थल का ईमेल पता दर्ज करें। Tajo एक्सेस अनुरोध की पुष्टि के लिए हम आपको एक लिंक ईमेल करेंगे।

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

[Set Noa](https://tajo.io/hi/set-noa/)

यह थीम दूसरे Tailwind CSS v4 प्रोजेक्ट्स के साथ बिना किसी रुकावट के काम करने के लिए बनाई गई है.

## ज़रूरी चरण

1. इस थीम का `src/docs` फ़ोल्डर अपने मौजूदा प्रोजेक्ट में कॉपी करें.

   इस थीम की ज़्यादातर चीज़ें `src/docs` फ़ोल्डर के अंदर हैं. इसलिए पहला चरण यही है कि आप इस पूरे फ़ोल्डर को अपने मौजूदा प्रोजेक्ट में कॉपी कर दें (ताकि फ़ोल्डर संरचना `src/docs` पर ही बनी रहे).

2. डॉक्स स्टाइल्स को अपनी ग्लोबल css फ़ाइल में इम्पोर्ट करें.

   इसके लिए अपनी `global.css` फ़ाइल में tailwind थीम इम्पोर्ट के बाद नीचे दी गई लाइन जोड़ें:

   ```css
   /* theme definition import */
   @import "./tailwind-theme.css";

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

3. अपनी साइट की कंटेंट कलेक्शन कॉन्फ़िग फ़ाइल में docs कंटेंट कलेक्शन जोड़ें.

   ```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 कंपोनेंट्स जोड़ें

   ```ts
   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](https://fontsource.org/fonts/inter/install) से लोकल तौर पर इंस्टॉल करें.

फिर अपनी `fonts.css` फ़ाइल में नीचे दिया गया कोड जोड़ें:

```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 फ़ॉन्ट के लिए किया गया है.

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

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