Pagina Documenti

La pagina è l'elemento base di una documentazione, include il sommario, Piè di pagina e breadcrumb.

Utilizzo

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

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

Corpo

Applica gli stili Typography, avvolgi i tuoi contenuti all'interno.

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

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

Categoria

Facoltativo, collega le altre pagine nella sua cartella (albero delle pagine) con le carte.

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

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

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

Dimostrazione:

Configurazioni

Modalità completa

Per estendere la pagina in modo da riempire tutto lo spazio disponibile, passa full al componente della pagina. Ciò forzerà la visualizzazione del TOC come popover.

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

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

Tindice

Una panoramica di tutti i titoli del tuo articolo richiede una serie di titoli.

Per i documenti Markdown e MDX, puoi ottenerli utilizzando il file Utilità TOC. Fonti di contenuto come Fumadocs MDX offrono questo out-of-the-box.

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

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

Personalizza o disabilita il sommario dalla documentazione con l'opzione tableOfContent.

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

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

Stile

Puoi scegliere un altro stile per TOC, come clerk ispirato a https://clerk.com:

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

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

Modalità popover

Sui dispositivi più piccoli viene invece visualizzato in un popover. Personalizzalo con l'opzione tableOfContentPopover.

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

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

Lultimo aggiornamento

Visualizza l'ora dell'ultimo aggiornamento della pagina.

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

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

Poiché potresti avere controlli di versione diversi (ad esempio Github) o proviene da fonti remote come Sanity, l'interfaccia utente di Fumadocs non visualizza l'ora dell'ultimo aggiornamento di predefinito.

Per i documenti ospitati su Github, puoi utilizzare l'utilità getGithubLastEdit.

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)} />;

Modifica su GitHub

Aggiungi il pulsante "Modifica su GitHub" alla pagina.

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}`,
  }}
/>;

Piè di pagina

Il piè di pagina è un elemento di navigazione che dispone di due pulsanti per passare alla pagina successiva e a quella precedente. Quando non specificato, mostra le pagine vicine trovate dall'albero delle pagine.

Personalizza il piè di pagina con l'opzione footer.

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

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

Panagrattato

Un elemento di navigazione, mostrato solo quando l'utente naviga nelle cartelle.

MDX Pagina

Insieme a Fumadocs MDX, puoi creare un file page.mdx e aggiungere quanto segue.

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

## Hello World

Questo crea una pagina con MDX, con applicati gli stili tipografici corretti.