اطلب الوصول المبكر

أدخل اسمك الأول وعنوان بريدك الإلكتروني للعمل. سنرسل إليك رابطًا لتأكيد طلب الوصول إلى Tajo.

في هذه الصفحة

التكامل مع قالب موجود

Set Noa

رسم توضيحي · بيانات تجريبية

مثال على المزامنة

راجع سجلاً واحداً

المصدر

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

أضف مجموعة محتوى الوثائق إلى ملف إعدادات مجموعات المحتوى في موقعك.

// 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,
};

أضف مكوّنات mdx إلى تكامل AutoImport

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، ومن تحديث الخاصية 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" />