Komponente

Prikaži kot Markdown Uredi na GitHub Dokumentacija za 7b38e05

Onedocs registrira nabor komponent Fumadocs UI za vaše datoteke MDX, zato jih lahko uporabljate brez uvažanja.

Uporaba komponent

Vsebini MDX podajte mdxComponents:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents vsebuje privzete elemente Fumadocs UI (naslove s sidrnimi povezavami, bloke kode, povezave, slike, tabele, Card, Cards in Callout) ter Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom in TypeTable. Vsi spodnji primeri delujejo brez sprememb.

Poudarek

Poudarite pomembne informacije. type je ena od možnosti info (privzeto), warn, error, success ali 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>

Dodajte naslov z title:

Mdx

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

Zavihki

Vsebino razvrstite v zavihke. Vsak Tab value se ujema z vnosom v 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>

Kartice

Do drugih strani se povežite z mrežo kartic:

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>

Koraki

Prikažite oštevilčene korake:

Mdx

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

Harmonika

Zložljiva vsebina za pogosta vprašanja in dodatne podrobnosti. Hkrati je odprt samo en element:

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>

Datoteke

Prikažite drevesa datotek:

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>

Povečava slike

Slika se ob kliku odpre v polni velikosti. Za slike iz public/ sta obvezna width in height:

Mdx

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

Tabela tipov

Dokumentirajte lastnosti ali možnosti za 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",
    },
  }}
/>

Druge komponente

InstallBlock in CodeBlock iz onedocs nista vključena v mdxComponents. Če ju želite uporabiti v MDX, ju dodajte v objekt, ki ga podate:

TSX

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

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

Vse drugo uvozite iz Fumadocs UI v datoteko MDX ali pa dodajte na enak način:

TypeScript

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

Celoten seznam najdete v dokumentaciji Fumadocs.