X (Twitter)

L'interface utilisateur de Fumadocs fournit une interface utilisateur de recherche attrayante pour vos documents, la fonctionnalité de recherche est plutôt fournie et documentée sur Fumadocs Core.

Voir Recherche de documents.

Interface utilisateur de recherche

Ouvrez avec ⌘ K ou Ctrl K.

###Configuration

Vous pouvez personnaliser l'interface utilisateur de recherche à partir du composant Root Provider dans la présentation racine.

Lorsqu'il n'est pas spécifié, il utilise le client de recherche par défaut fetch optimisé par Orama.

Liens personnalisés

Ajoutez des éléments de lien personnalisés à la boîte de dialogue de recherche. Ils sont affichés comme solutions de secours lorsque la requête est vide.

app/layout.tsx

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    links: [
      ['Home', '/'],
      ['Docs', '/docs'],
    ],
  }}
>
  {children}
</RootProvider>;

Désactiver la recherche

Pour désactiver la recherche de documents, désactivez-la depuis le fournisseur racine.

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    enabled: false,
  }}
>
  {children}
</RootProvider>;

Touches chaudes

Personnalisez les touches de raccourci pour déclencher la boîte de dialogue de recherche.

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    hotKey: [
      {
        display: 'K',
        key: 'k', // key code, or a function determining whether the key is pressed
      },
    ],
  }}
>
  {children}
</RootProvider>;

Filtre d'étiquette ### Tag

Ajoutez une interface utilisateur pour modifier les filtres. Assurez-vous d'abord de configurer Tag Filter sur le serveur de recherche.

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    options: {
      defaultTag: 'value',
      tags: [
        {
          name: 'Tag Name',
          value: 'value',
        },
      ],
    },
  }}
>
  {children}
</RootProvider>;

Options de recherche

Transmettez les options au client de recherche, comme la modification du point de terminaison de l'API pour le serveur de recherche Orama :

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    options: {
      api: '/api/search/docs',
    },
  }}
>
  {children}
</RootProvider>;

Remplacer la boîte de dialogue de recherche

Vous pouvez remplacer la boîte de dialogue de recherche par défaut par :

components/search.tsx

'use client';
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';

export default function CustomDialog(props: SharedProps) {
  // your own logic here
  return <SearchDialog {...props} />;
}

Pour le transmettre au fournisseur racine, vous avez besoin d'un wrapper avec la directive use client.

provider.tsx

'use client';
import { RootProvider } from 'fumadocs-ui/provider';
import dynamic from 'next/dynamic';
import type { ReactNode } from 'react';

const SearchDialog = dynamic(() => import('@/components/search')); // lazy load

export function Provider({ children }: { children: ReactNode }) {
  return (
    <RootProvider
      search={{
        SearchDialog,
      }}
    >
      {children}
    </RootProvider>
  );
}

Utilisez-le à la place de votre ancien fournisseur racine

layout.tsx

import { Provider } from './provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Autres solutions

Algolie

Pour le guide de configuration, voir Intégrer Algolia Search.

Bien que nous vous recommandons généralement de créer votre propre recherche avec leur côté client SDK, vous pouvez également brancher l'interface de dialogue intégrée.

components/search.tsx

'use client';
import algo from 'algoliasearch/lite';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

const client = algo('appId', 'apiKey');
const index = client.initIndex('indexName');

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog index={index} {...props} />;
}

Remplacez appId, apiKey et indexName par les valeurs souhaitées.
Remplacez la boîte de dialogue de recherche par défaut par votre nouveau composant.

Note

L'implémentation intégrée n'utilise pas de recherche instantanée (leur officiel client javascript).

Filtre d'étiquette #### Tag

Identique au client de recherche par défaut, vous pouvez configurer Tag Filter dans la boîte de dialogue.

components/search.tsx

import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

<SearchDialog
  defaultTag="value"
  tags={[
    {
      name: 'Tag Name',
      value: 'value',
    },
  ]}
/>;

Nuage Orama

Pour le guide de configuration, voir Intégrer Orama Cloud.

components/search.tsx

'use client';

import { OramaClient } from '@oramacloud/client';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-orama';

const client = new OramaClient({
  endpoint: 'endpoint',
  api_key: 'apiKey',
});

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} client={client} showOrama />;
}

Remplacez endpoint, apiKey par les valeurs souhaitées.
Remplacez la boîte de dialogue de recherche par défaut par votre nouveau composant.

Intégrations communautaires

Une liste des intégrations maintenues par communauté.

Recherche Trieve

Interface utilisateur intégrée

Si vous souhaitez utiliser l'interface utilisateur de la boîte de dialogue de recherche intégrée au lieu de créer la vôtre, vous pouvez utiliser le composant SearchDialog.

import {
  SearchDialog,
  type SharedProps,
} from 'fumadocs-ui/components/dialog/search';

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} />;
}

Unstable

It is an internal API, might break during iterations

L'interface utilisateur de Fumadocs fournit une interface utilisateur de recherche attrayante pour vos documents, la fonctionnalité de recherche est plutôt fournie et documentée sur Fumadocs Core.

Voir Recherche de documents.

Interface utilisateur de recherche

Ouvrez avec ⌘ K ou Ctrl K.

###Configuration

Vous pouvez personnaliser l'interface utilisateur de recherche à partir du composant Root Provider dans la présentation racine.

Lorsqu'il n'est pas spécifié, il utilise le client de recherche par défaut fetch optimisé par Orama.

Liens personnalisés

Ajoutez des éléments de lien personnalisés à la boîte de dialogue de recherche. Ils sont affichés comme solutions de secours lorsque la requête est vide.

app/layout.tsx

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    links: [
      ['Home', '/'],
      ['Docs', '/docs'],
    ],
  }}
>
  {children}
</RootProvider>;

Désactiver la recherche

Pour désactiver la recherche de documents, désactivez-la depuis le fournisseur racine.

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    enabled: false,
  }}
>
  {children}
</RootProvider>;

Touches chaudes

Personnalisez les touches de raccourci pour déclencher la boîte de dialogue de recherche.

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    hotKey: [
      {
        display: 'K',
        key: 'k', // key code, or a function determining whether the key is pressed
      },
    ],
  }}
>
  {children}
</RootProvider>;

Filtre d'étiquette ### Tag

Ajoutez une interface utilisateur pour modifier les filtres. Assurez-vous d'abord de configurer Tag Filter sur le serveur de recherche.

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    options: {
      defaultTag: 'value',
      tags: [
        {
          name: 'Tag Name',
          value: 'value',
        },
      ],
    },
  }}
>
  {children}
</RootProvider>;

Options de recherche

Transmettez les options au client de recherche, comme la modification du point de terminaison de l'API pour le serveur de recherche Orama :

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    options: {
      api: '/api/search/docs',
    },
  }}
>
  {children}
</RootProvider>;

Remplacer la boîte de dialogue de recherche

Vous pouvez remplacer la boîte de dialogue de recherche par défaut par :

components/search.tsx

'use client';
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';

export default function CustomDialog(props: SharedProps) {
  // your own logic here
  return <SearchDialog {...props} />;
}

Pour le transmettre au fournisseur racine, vous avez besoin d'un wrapper avec la directive use client.

provider.tsx

'use client';
import { RootProvider } from 'fumadocs-ui/provider';
import dynamic from 'next/dynamic';
import type { ReactNode } from 'react';

const SearchDialog = dynamic(() => import('@/components/search')); // lazy load

export function Provider({ children }: { children: ReactNode }) {
  return (
    <RootProvider
      search={{
        SearchDialog,
      }}
    >
      {children}
    </RootProvider>
  );
}

Utilisez-le à la place de votre ancien fournisseur racine

layout.tsx

import { Provider } from './provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Autres solutions

Algolie

Pour le guide de configuration, voir Intégrer Algolia Search.

Bien que nous vous recommandons généralement de créer votre propre recherche avec leur côté client SDK, vous pouvez également brancher l'interface de dialogue intégrée.

components/search.tsx

'use client';
import algo from 'algoliasearch/lite';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

const client = algo('appId', 'apiKey');
const index = client.initIndex('indexName');

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog index={index} {...props} />;
}

Remplacez appId, apiKey et indexName par les valeurs souhaitées.
Remplacez la boîte de dialogue de recherche par défaut par votre nouveau composant.

Note

L'implémentation intégrée n'utilise pas de recherche instantanée (leur officiel client javascript).

Filtre d'étiquette #### Tag

Identique au client de recherche par défaut, vous pouvez configurer Tag Filter dans la boîte de dialogue.

components/search.tsx

import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

<SearchDialog
  defaultTag="value"
  tags={[
    {
      name: 'Tag Name',
      value: 'value',
    },
  ]}
/>;

Nuage Orama

Pour le guide de configuration, voir Intégrer Orama Cloud.

components/search.tsx

'use client';

import { OramaClient } from '@oramacloud/client';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-orama';

const client = new OramaClient({
  endpoint: 'endpoint',
  api_key: 'apiKey',
});

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} client={client} showOrama />;
}

Remplacez endpoint, apiKey par les valeurs souhaitées.
Remplacez la boîte de dialogue de recherche par défaut par votre nouveau composant.

Intégrations communautaires

Une liste des intégrations maintenues par communauté.

Recherche Trieve

Interface utilisateur intégrée

Si vous souhaitez utiliser l'interface utilisateur de la boîte de dialogue de recherche intégrée au lieu de créer la vôtre, vous pouvez utiliser le composant SearchDialog.

import {
  SearchDialog,
  type SharedProps,
} from 'fumadocs-ui/components/dialog/search';

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} />;
}

Unstable

It is an internal API, might break during iterations

Rechercher

Interface utilisateur de recherche

Liens personnalisés

Désactiver la recherche

Touches chaudes

Options de recherche

Remplacer la boîte de dialogue de recherche

Autres solutions

Algolie

Nuage Orama

Intégrations communautaires

Interface utilisateur intégrée

Table des matières

Rechercher

Interface utilisateur de recherche

Liens personnalisés

Désactiver la recherche

Touches chaudes

Options de recherche

Remplacer la boîte de dialogue de recherche

Autres solutions

Algolie

Nuage Orama

Intégrations communautaires

Interface utilisateur intégrée

Table des matières