Компоненти

Преглед като Markdown Редактиране в GitHub Документация за 7b38e05

Onedocs регистрира набор от компоненти Fumadocs UI за вашите файлове MDX, така че да можете да ги използвате без импортиране.

Използване на компоненти

Подайте mdxComponents към съдържанието си MDX:

TSX

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:

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:

Mdx

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

Раздели

Организирайте съдържанието в раздели. Всеки Tab value съответства на запис в items:

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>

Карти

Свързвайте други страници чрез мрежи от карти:

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>

Стъпки

Показвайте номерирани стъпки:

Mdx

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

Акордеон

Разгъващо се съдържание за често задавани въпроси и незадължителни подробности. Едновременно е отворен само един елемент:

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>

Файлове

Показвайте дървета на файлове:

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>

Мащабиране на изображения

Изображение, което се отваря в пълен размер при щракване. За изображения от public/ са необходими width и height:

Mdx

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

Таблица на типове

Документирайте свойствата или опциите на API:

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

Още компоненти

InstallBlock и CodeBlock от onedocs не са включени в mdxComponents. За да ги използвате в MDX, добавете ги към обекта, който подавате:

TSX

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

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

За всичко останало го импортирайте от Fumadocs UI във файла си MDX или го добавете по същия начин:

TypeScript

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

Вижте документацията на Fumadocs за пълния списък.