X (Twitter)

Die Fumadocs-Benutzeroberfläche bietet eine gut aussehende Suchoberfläche für Ihre Dokumente. Die Suchfunktion wird stattdessen auf Fumadocs Core bereitgestellt und dokumentiert.

Siehe Dokumentensuche.

Suchoberfläche

Öffnen Sie mit ⌘ K oder Ctrl K.

Konfigurationen

Sie können die Suchoberfläche über die Komponente Root Provider] im Root-Layout anpassen.

Wenn nicht angegeben, wird der Standard-fetch Search Client powered by Orama] verwendet.

Benutzerdefinierte Links

Fügen Sie dem Suchdialog benutzerdefinierte Linkelemente hinzu. Sie werden als Fallbacks angezeigt, wenn die Abfrage leer ist.

app/layout.tsx

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

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

Suche deaktivieren

Um die Dokumentensuche zu deaktivieren, deaktivieren Sie sie beim Stammanbieter.

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

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

Hotkeys

Passen Sie die Hotkeys an, um den Suchdialog auszulösen.

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>;

Tag-Filter

Fügen Sie eine Benutzeroberfläche hinzu, um Filter zu ändern. Stellen Sie sicher, dass Sie Tag Filter] zuerst auf dem Suchserver konfigurieren.

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

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

Suchoptionen

Übergeben Sie Optionen an den Suchclient, z. B. das Ändern des API-Endpunkts für den Orama-Suchserver:

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

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

Suchdialog ersetzen

Sie können das Standard-Suchdialogfeld ersetzen durch:

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

Um es an den Root-Provider zu übergeben, benötigen Sie einen Wrapper mit der Direktive 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>
  );
}

Verwenden Sie ihn anstelle Ihres bisherigen Root-Providers

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

Andere Lösungen

Algolia

Die Einrichtungsanleitung finden Sie unter Integrate Algolia Search.

Im Allgemeinen empfehlen wir jedoch, Ihre eigene Suche auf der Client-Seite zu erstellen SDK können Sie auch die integrierte Dialogschnittstelle anschließen.

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

Ersetzen Sie appId, apiKey und indexName durch Ihre gewünschten Werte.
Ersetzen Sie den Standardsuchdialog durch Ihre neue Komponente.

Note

Die integrierte Implementierung verwendet keine Sofortsuche (ihr offizieller Name). Javascript-Client).

Tag-Filter

Wie beim Standardsuchclient können Sie im Dialogfeld Tag Filter] konfigurieren.

components/search.tsx

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

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

Orama Cloud

Die Einrichtungsanleitung finden Sie unter Orama Cloud integrieren.

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

Ersetzen Sie endpoint, apiKey durch Ihre gewünschten Werte.
Ersetzen Sie den Standardsuchdialog durch Ihre neue Komponente.

Community-Integrationen

Eine Liste der von der Community verwalteten Integrationen.

Trieve-Suche

Integrierte Benutzeroberfläche

Wenn Sie die integrierte Suchdialog-Benutzeroberfläche verwenden möchten, anstatt eine eigene zu erstellen, Sie können die Komponente SearchDialog verwenden.

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

Die Fumadocs-Benutzeroberfläche bietet eine gut aussehende Suchoberfläche für Ihre Dokumente. Die Suchfunktion wird stattdessen auf Fumadocs Core bereitgestellt und dokumentiert.

Siehe Dokumentensuche.

Suchoberfläche

Öffnen Sie mit ⌘ K oder Ctrl K.

Konfigurationen

Sie können die Suchoberfläche über die Komponente Root Provider] im Root-Layout anpassen.

Wenn nicht angegeben, wird der Standard-fetch Search Client powered by Orama] verwendet.

Benutzerdefinierte Links

Fügen Sie dem Suchdialog benutzerdefinierte Linkelemente hinzu. Sie werden als Fallbacks angezeigt, wenn die Abfrage leer ist.

app/layout.tsx

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

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

Suche deaktivieren

Um die Dokumentensuche zu deaktivieren, deaktivieren Sie sie beim Stammanbieter.

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

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

Hotkeys

Passen Sie die Hotkeys an, um den Suchdialog auszulösen.

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>;

Tag-Filter

Fügen Sie eine Benutzeroberfläche hinzu, um Filter zu ändern. Stellen Sie sicher, dass Sie Tag Filter] zuerst auf dem Suchserver konfigurieren.

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

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

Suchoptionen

Übergeben Sie Optionen an den Suchclient, z. B. das Ändern des API-Endpunkts für den Orama-Suchserver:

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

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

Suchdialog ersetzen

Sie können das Standard-Suchdialogfeld ersetzen durch:

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

Um es an den Root-Provider zu übergeben, benötigen Sie einen Wrapper mit der Direktive 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>
  );
}

Verwenden Sie ihn anstelle Ihres bisherigen Root-Providers

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

Andere Lösungen

Algolia

Die Einrichtungsanleitung finden Sie unter Integrate Algolia Search.

Im Allgemeinen empfehlen wir jedoch, Ihre eigene Suche auf der Client-Seite zu erstellen SDK können Sie auch die integrierte Dialogschnittstelle anschließen.

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

Ersetzen Sie appId, apiKey und indexName durch Ihre gewünschten Werte.
Ersetzen Sie den Standardsuchdialog durch Ihre neue Komponente.

Note

Die integrierte Implementierung verwendet keine Sofortsuche (ihr offizieller Name). Javascript-Client).

Tag-Filter

Wie beim Standardsuchclient können Sie im Dialogfeld Tag Filter] konfigurieren.

components/search.tsx

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

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

Orama Cloud

Die Einrichtungsanleitung finden Sie unter Orama Cloud integrieren.

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

Ersetzen Sie endpoint, apiKey durch Ihre gewünschten Werte.
Ersetzen Sie den Standardsuchdialog durch Ihre neue Komponente.

Community-Integrationen

Eine Liste der von der Community verwalteten Integrationen.

Trieve-Suche

Integrierte Benutzeroberfläche

Wenn Sie die integrierte Suchdialog-Benutzeroberfläche verwenden möchten, anstatt eine eigene zu erstellen, Sie können die Komponente SearchDialog verwenden.

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

Suchen

Suchoberfläche

Konfigurationen

Benutzerdefinierte Links

Suche deaktivieren

Hotkeys

Tag-Filter

Suchoptionen

Suchdialog ersetzen

Andere Lösungen

Algolia

Tag-Filter

Orama Cloud

Community-Integrationen

Integrierte Benutzeroberfläche

Inhaltsverzeichnis

Suchen

Suchoberfläche

Konfigurationen

Benutzerdefinierte Links

Suche deaktivieren

Hotkeys

Tag-Filter

Suchoptionen

Suchdialog ersetzen

Andere Lösungen

Algolia

Tag-Filter

Orama Cloud

Community-Integrationen

Integrierte Benutzeroberfläche

Inhaltsverzeichnis