---
title: "موجودہ تھیم کے ساتھ انٹیگریشن | Tajo"
description: "جانیں کہ Tajo کو کسی موجودہ پروجیکٹ کے ساتھ کیسے انٹیگریٹ کیا جائے"
url: https://tajo.io/ur/docs/getting-started/integrating/
markdown: https://tajo.io/ur/docs/getting-started/integrating.md
lang: ur-PK
author: "Set Noa"
author_url: https://tajo.io/ur/set-noa/
robots: noindex
---

ابتدائی رسائی کی درخواست کریں

اپنا پہلا نام اور دفتری ای میل پتہ درج کریں۔ ہم Tajo تک رسائی کی درخواست کی تصدیق کے لیے ایک لنک ای میل کریں گے۔

# موجودہ تھیم کے ساتھ انٹیگریشن

[Set Noa](https://tajo.io/ur/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. دستاویزات کا content collection اپنی سائٹ کی content collection کنفیگ فائل میں شامل کریں۔

   ```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 انٹیگریشن میں شامل کریں

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