Seite „Dokumente“.

Die Seite ist das Basiselement einer Dokumentation. Sie umfasst das Inhaltsverzeichnis, Fußzeile und Breadcrumb.

Verwendung

import {
  DocsPage,
  DocsDescription,
  DocsTitle,
  DocsBody,
} from 'fumadocs-ui/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>...</DocsBody>
</DocsPage>;

Körper

Es wendet die Typography-Stile an und verpackt Ihren Inhalt darin.

import { DocsBody } from 'fumadocs-ui/page';

<DocsBody>
  <h1>This heading looks good!</h1>
</DocsBody>;

Kategorie

Verknüpfen Sie optional die anderen Seiten in seinem (Seitenbaum-)Ordner mit Karten.

import { source } from '@/lib/source';
import { DocsCategory } from 'fumadocs-ui/page';

const page = source.getPage(['...']);

<DocsCategory page={page} from={source} />;

Demo:

Konfigurationen

Vollmodus

Um die Seite so zu erweitern, dass sie den gesamten verfügbaren Platz ausfüllt, übergeben Sie full an die Seitenkomponente. Dadurch wird das Inhaltsverzeichnis als Popover angezeigt.

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage full>...</DocsPage>;

TInhaltsverzeichnis

Eine Übersicht über alle Überschriften in Ihrem Artikel. Dazu ist eine Reihe von Überschriften erforderlich.

Für Markdown- und MDX-Dokumente können Sie es über die erhalten Inhaltsverzeichnis-Dienstprogramm. Inhaltsquellen wie Fumadocs MDX bieten dies sofort einsatzbereit.

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage toc={headings}>...</DocsPage>;

Passen Sie das Inhaltsverzeichnis Ihrer Dokumentation mit der Option tableOfContent an oder deaktivieren Sie es.

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage tableOfContent={options}>...</DocsPage>;

Stil

Sie können einen anderen Stil für das Inhaltsverzeichnis auswählen, z. B. clerk, inspiriert von https://clerk.com:

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage
  tableOfContent={{
    style: 'clerk',
  }}
>
  ...
</DocsPage>;

Popover-Modus

Auf kleineren Geräten wird es stattdessen in einem Popover angezeigt. Passen Sie es mit der Option tableOfContentPopover an.

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage tableOfContentPopover={options}>...</DocsPage>;

Letzte Aktualisierungszeit

Zeigt den Zeitpunkt der letzten Aktualisierung der Seite an.

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage lastUpdate={new Date(lastModifiedTime)} />;

Da Sie möglicherweise unterschiedliche Versionskontrollen haben (z. B. Github) oder es von stammt Remote-Quellen wie Sanity, Fumadocs UI zeigen nicht die letzte Aktualisierungszeit an Standard.

Für von Github gehostete Dokumente können Sie verwenden das getGithubLastEdit-Dienstprogramm.

import { DocsPage } from 'fumadocs-ui/page';
import { getGithubLastEdit } from 'fumadocs-core/server';

const time = await getGithubLastEdit({
  owner: 'fuma-nama',
  repo: 'fumadocs',
  path: `content/docs/${page.file.path}`,
});

<DocsPage lastUpdate={new Date(time)} />;

Edit auf GitHub

Fügen Sie der Seite die Schaltfläche „Auf GitHub bearbeiten“ hinzu.

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage
  editOnGithub={{
    owner: 'fuma-nama',
    repo: 'fumadocs',
    sha: 'main',
    // file path, make sure it's valid
    path: `content/docs/${page.file.path}`,
  }}
/>;

Fußzeile

Die Fußzeile ist ein Navigationselement mit zwei Schaltflächen zum Springen zur nächsten und vorherigen Seite. Wenn nicht angegeben, werden die im Seitenbaum gefundenen Nachbarseiten angezeigt.

Passen Sie die Fußzeile mit der Option footer an.

import { DocsPage, DocsBody } from 'fumadocs-ui/page';

<DocsPage footer={options}>
  <DocsBody>...</DocsBody>
</DocsPage>;

Semmelbrösel

Ein Navigationselement, das nur angezeigt wird, wenn der Benutzer in Ordnern navigiert.

Seite ### MDX

In Verbindung mit Fumadocs MDX können Sie eine page.mdx-Datei erstellen und Folgendes hinzufügen.

export { withArticle as default } from 'fumadocs-ui/page';

## Hello World

Dadurch wird eine Seite mit MDX erstellt, auf die die richtigen Typografiestile angewendet werden.