मौजूदा थीम के साथ इंटीग्रेशन
सूची से टूल चुनें या किसी भी टूल का नाम लिखें।
उदाहरण · सैंपल डेटा
सिंक का उदाहरण
स्रोत
Shopify
कनेक्टर की स्थिति: प्रगति पर
गंतव्य
Brevo
कनेक्टर की स्थिति: सक्रिय
फ़ील्ड मैपिंग
| स्रोत फ़ील्ड | गंतव्य फ़ील्ड | नमूना मान |
|---|---|---|
record.id | source_id | record_1042 |
record.updated_at | updated_at | 2026-10-18T08:00:00Z |
record.value | value | sample_value |
- ड्राफ़्ट
- एक रिकॉर्ड जाँचें
- यह वर्ज़न मंज़ूर करें
स्थिति हर कनेक्टर की अलग है; इससे यह सिंक तैयार होने की गारंटी नहीं मिलती। ये फ़ील्ड केवल उदाहरण हैं। सिंक चलने से पहले असली स्कीमा और अनुमतियाँ जाँचें।
यह थीम दूसरे 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"; -
अपनी साइट की कंटेंट कलेक्शन कॉन्फ़िग फ़ाइल में 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,}; -
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",],}),],}); -
अपनी साइट में डॉक्स पेज जोड़ें.
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 फ़ाइल में जोड़ें, और अपनी 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" />