Page de documents

La page est l'élément de base d'une documentation, elle comprend la table des matières, Pied de page et fil d'Ariane.

Utilisation

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

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

Corps

Il applique les styles Typography, enveloppez votre contenu à l'intérieur.

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

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

Catégorie

Facultatif, liez les autres pages de son dossier (arborescence des pages) avec des cartes.

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

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

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

Démo :

##Configuration

Mode complet

Pour étendre la page afin de remplir tout l'espace disponible, transmettez full au composant de page. Cela forcera l'affichage de la table des matières sous forme de popover.

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

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

Table des matières

Un aperçu de tous les titres de votre article, il nécessite un tableau de titres.

Pour les documents Markdown et MDX, vous pouvez l'obtenir en utilisant le Utilitaire TOC. Les sources de contenu comme Fumadocs MDX offrent cette solution prête à l'emploi.

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

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

Personnalisez ou désactivez la table des matières de votre documentation avec l'option tableOfContent.

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

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

####Style

Vous pouvez choisir un autre style pour TOC, comme clerk inspiré de https://clerk.com:.

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

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

Mode Popover

Sur les appareils plus petits, il est affiché dans une fenêtre contextuelle. Personnalisez-le avec l'option tableOfContentPopover.

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

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

LHeure de la dernière mise à jour

Afficher l'heure de la dernière mise à jour de la page.

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

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

Puisque vous pouvez avoir des contrôles de version différents (par exemple Github) ou que cela provient de sources distantes comme Sanity, l'interface utilisateur de Fumadocs n'affiche pas l'heure de la dernière mise à jour par par défaut.

Pour les documents hébergés sur Github, vous pouvez utiliser l'utilitaire 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)} />;

Modifier sur GitHub

Ajoutez le bouton « Modifier sur GitHub » à la page.

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

Bas de page

Le pied de page est un élément de navigation doté de deux boutons permettant d'accéder aux pages suivantes et précédentes. Lorsqu'il n'est pas spécifié, il affiche les pages voisines trouvées dans l'arborescence des pages.

Personnalisez le pied de page avec l'option footer.

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

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

Fil d'Ariane

Un élément de navigation, affiché uniquement lorsque l'utilisateur navigue dans des dossiers.

Page ### MDX

En conjonction avec Fumadocs MDX, vous pouvez créer un fichier page.mdx et ajouter ce qui suit.

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

## Hello World

Cela crée une page avec MDX, avec les styles de typographie appropriés appliqués.