Στοιχεία

Προβολή ως 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} />

Πίνακας τύπων

Τεκμηριώστε τα props ή τις επιλογές ενός 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 για την πλήρη λίστα.