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

أدخل اسمك الأول وبريدك الإلكتروني أو رقم هاتفك. سنتواصل معك لتزويدك بتفاصيل الوصول إلى 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. أضف مجموعة محتوى الوثائق إلى ملف إعدادات مجموعات المحتوى في موقعك.

    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. أضف مكوّنات mdx إلى تكامل AutoImport

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

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

أدخل اسمك الأول وبريدك الإلكتروني أو رقم هاتفك. سنتواصل معك لتزويدك بتفاصيل الوصول إلى Tajo.

اكتشاف تلقائي
مساعد AI

مرحباً! اسألني أي شيء عن الوثائق.