Bileşenler

Markdown olarak görüntüle GitHub üzerinde düzenle Dokümantasyon: 7b38e05

Onedocs, MDX dosyalarınız için bir dizi Fumadocs UI bileşeni kaydeder; böylece bunları içe aktarmadan kullanabilirsiniz.

Bileşenleri kullanma

mdxComponents öğesini MDX içeriğinize aktarın:

TSX

import { DocsPage, mdxComponents } from "onedocs";

// In your page component:
<MDX components={mdxComponents} />

mdxComponents, Fumadocs UI varsayılanlarını (bağlantılı başlıklar, kod blokları, bağlantılar, görseller, tablolar, Card, Cards ve Callout) ve ayrıca Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom ve TypeTable içerir. Aşağıdaki her örnek, olduğu gibi çalışır.

Bildirim kutusu

Önemli bilgileri vurgulayın. type, info (varsayılan), warn, error, success veya idea değerlerinden biridir:

Mdx

<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 ile başlık ekleyin:

Mdx

<Callout type="warn" title="Breaking change">
  The `docs` option was removed in version 2.
</Callout>

Sekmeler

İçeriği sekmeler halinde düzenleyin. Her Tab value, items içindeki bir girdiye karşılık gelir:

Mdx

<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>

Kartlar

Kart ızgaralarıyla diğer sayfalara bağlantı verin:

Mdx

<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>

Adımlar

Numaralı adımları gösterin:

Mdx

<Steps>
  <Step>Install Onedocs</Step>
  <Step>Create configuration</Step>
  <Step>Write documentation</Step>
</Steps>

Akordeon

SSS ve isteğe bağlı ayrıntılar için daraltılabilir içerik. Aynı anda yalnızca bir öğe açıktır:

Mdx

<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>

Dosyalar

Dosya ağaçlarını gösterin:

Mdx

<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>

Görsel yakınlaştırma

Tıklandığında tam boyutlu açılan bir görsel. public/ kaynaklı görseller için width ve height gereklidir:

Mdx

<ImageZoom src="/screenshot.png" alt="Dashboard" width={1200} height={800} />

Tür tablosu

Bir API öğesinin props veya seçeneklerini belgeleyin:

Mdx

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

Diğer bileşenler

onedocs kaynaklı InstallBlock ve CodeBlock, mdxComponents içinde yer almaz. Bunları MDX içinde kullanmak için, ilettiğiniz nesneye ekleyin:

TSX

import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";

// In your page component:
<MDX components={{ ...mdxComponents, InstallBlock, CodeBlock }} />

Diğer bileşenler için bunları MDX dosyanızdaki Fumadocs UI kaynağından içe aktarın veya aynı şekilde ekleyin:

TypeScript

import { Banner } from "fumadocs-ui/components/banner";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";

Listenin tamamı için Fumadocs belgelerine bakın.