المكونات
يسجّل Onedocs مجموعة من مكونات Fumadocs UI لملفات MDX، لتتمكن من استخدامها دون استيرادها.
استخدام المكونات
مرّر mdxComponents إلى محتوى MDX:
import { DocsPage, mdxComponents } from "onedocs";
// In your page component:
<MDX components={mdxComponents} />
يضم mdxComponents الإعدادات الافتراضية لـFumadocs UI (العناوين بروابط مرساة وكتل الأكواد والروابط والصور والجداول وCard وCards وCallout)، بالإضافة إلى Tab وTabs وStep وSteps وAccordion وAccordions وFile وFolder وFiles وImageZoom وTypeTable. تعمل كل الأمثلة أدناه معه كما هي.
مربع التنبيه
أبرز المعلومات المهمة. تكون type إحدى القيم info (الافتراضية) أو warn أو error أو success أو idea:
<Callout type="info">
This is an informational callout.
</Callout>
<Callout type="warn">
This is a warning callout.
</Callout>
<Callout type="error">
This is an error callout.
</Callout>
أضف عنوانًا باستخدام title:
<Callout type="warn" title="Breaking change">
The `docs` option was removed in version 2.
</Callout>
علامات التبويب
نظّم المحتوى في علامات تبويب. تطابق كل Tab value إدخالًا في items:
<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
<Tab value="npm">npm install onedocs</Tab>
<Tab value="yarn">yarn add onedocs</Tab>
<Tab value="pnpm">pnpm add onedocs</Tab>
<Tab value="bun">bun add onedocs</Tab>
</Tabs>
البطاقات
أضف روابط إلى صفحات أخرى باستخدام شبكات البطاقات:
<Cards>
<Card title="Getting Started" href="/docs/getting-started">
Learn how to set up Onedocs
</Card>
<Card title="Configuration" href="/docs/configuration">
Configure your documentation
</Card>
</Cards>
الخطوات
اعرض خطوات مرقّمة:
<Steps>
<Step>Install Onedocs</Step>
<Step>Create configuration</Step>
<Step>Write documentation</Step>
</Steps>
القسم القابل للطي
محتوى قابل للطي للأسئلة الشائعة والتفاصيل الاختيارية. لا يُفتح سوى عنصر واحد في كل مرة:
<Accordions>
<Accordion title="What is Onedocs?">
Layouts, components and SEO helpers for documentation sites built with Next.js and Fumadocs.
</Accordion>
<Accordion title="How do I install it?">
Follow the install step in Getting Started.
</Accordion>
</Accordions>
الملفات
اعرض أشجار الملفات:
<Files>
<Folder name="content" defaultOpen>
<Folder name="docs" defaultOpen>
<File name="index.mdx" />
<File name="getting-started.mdx" />
</Folder>
</Folder>
<File name="onedocs.config.ts" />
</Files>
تكبير الصور
صورة تُفتح بحجمها الكامل عند النقر عليها. يلزم width وheight للصور من public/:
<ImageZoom src="/screenshot.png" alt="Dashboard" width={1200} height={800} />
جدول الأنواع
وثّق خصائص أو خيارات API:
<TypeTable
type={{
title: {
type: "string",
description: "Site name shown in the navbar.",
},
description: {
type: "string",
description: "Used for meta tags and the home page.",
default: "undefined",
},
}}
/>
مكونات أخرى
InstallBlock وCodeBlock من onedocs غير موجودين في mdxComponents. لاستخدامهما في MDX، أضفهما إلى الكائن الذي تمرّره:
import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";
// In your page component:
<MDX components={{ ...mdxComponents, InstallBlock, CodeBlock }} />
لأي شيء آخر، استورده من Fumadocs UI في ملف MDX أو أضِفه بالطريقة نفسها:
import { Banner } from "fumadocs-ui/components/banner";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";
راجع توثيق Fumadocs للاطلاع على القائمة الكاملة.