X (Twitter)

L'interfaccia utente di Fumadocs fornisce un'interfaccia utente di ricerca di bell'aspetto per i tuoi documenti, la funzionalità di ricerca è invece fornita e documentata su Fumadocs Core.

Vedere Ricerca documenti.

Interfaccia utente di ricerca

Apri con ⌘ K o Ctrl K.

Configurazioni

È possibile personalizzare l'interfaccia utente di ricerca dal componente Root Provider nel layout root.

Quando non specificato, utilizza il fetch Search Client predefinito basato su Orama.

Collegamenti personalizzati

Aggiungi elementi di collegamento personalizzati alla finestra di dialogo di ricerca. Vengono visualizzati come fallback quando la query è vuota.

app/layout.tsx

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

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

Disabilita ricerca

Per disattivare la ricerca dei documenti, disabilitala dal provider root.

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

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

Tasti di scelta rapida

Personalizza i tasti di scelta rapida per attivare la finestra di dialogo di ricerca.

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

Tiltro tag

Aggiungi l'interfaccia utente per modificare i filtri. Assicurati di configurare prima Filtro tag sul server di ricerca.

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

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

Opzioni di ricerca

Passa le opzioni al client di ricerca, come la modifica dell'endpoint API per il server di ricerca Orama:

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

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

Finestra di dialogo di ricerca Sostituisci

È possibile sostituire la finestra di dialogo di ricerca predefinita con:

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

Per passarlo al Root Provider è necessario un wrapper con la direttiva 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>
  );
}

Usalo al posto del tuo precedente Root Provider

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

Altre soluzioni

###Algolia

Per la guida all'installazione, vedere Integrazione di Algolia Search.

Sebbene in genere consigliamo di creare la propria ricerca con il loro lato client SDK, puoi anche collegare l'interfaccia di dialogo integrata.

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

Sostituisci appId, apiKey e indexName con i valori desiderati.
Sostituisci la finestra di dialogo di ricerca predefinita con il tuo nuovo componente.

Note

L'implementazione integrata non utilizza la ricerca istantanea (il loro file ufficiale client Javascript).

Tiltro tag

Come il client di ricerca predefinito, puoi configurare Filtro tag nella finestra di dialogo.

components/search.tsx

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

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

Orama Cloud

Per la guida alla configurazione, vedere Integrazione di 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 />;
}

Sostituisci endpoint, apiKey con i valori desiderati.
Sostituisci la finestra di dialogo di ricerca predefinita con il tuo nuovo componente.

Integrazioni della comunità

Un elenco di integrazioni gestite dalla community.

Cerca ricerca

Interfaccia utente integrata

Se desideri utilizzare l'interfaccia utente della finestra di dialogo di ricerca integrata invece di crearne una tua, è possibile utilizzare il componente 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'interfaccia utente di Fumadocs fornisce un'interfaccia utente di ricerca di bell'aspetto per i tuoi documenti, la funzionalità di ricerca è invece fornita e documentata su Fumadocs Core.

Vedere Ricerca documenti.

Interfaccia utente di ricerca

Apri con ⌘ K o Ctrl K.

Configurazioni

È possibile personalizzare l'interfaccia utente di ricerca dal componente Root Provider nel layout root.

Quando non specificato, utilizza il fetch Search Client predefinito basato su Orama.

Collegamenti personalizzati

Aggiungi elementi di collegamento personalizzati alla finestra di dialogo di ricerca. Vengono visualizzati come fallback quando la query è vuota.

app/layout.tsx

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

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

Disabilita ricerca

Per disattivare la ricerca dei documenti, disabilitala dal provider root.

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

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

Tasti di scelta rapida

Personalizza i tasti di scelta rapida per attivare la finestra di dialogo di ricerca.

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

Tiltro tag

Aggiungi l'interfaccia utente per modificare i filtri. Assicurati di configurare prima Filtro tag sul server di ricerca.

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

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

Opzioni di ricerca

Passa le opzioni al client di ricerca, come la modifica dell'endpoint API per il server di ricerca Orama:

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

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

Finestra di dialogo di ricerca Sostituisci

È possibile sostituire la finestra di dialogo di ricerca predefinita con:

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

Per passarlo al Root Provider è necessario un wrapper con la direttiva 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>
  );
}

Usalo al posto del tuo precedente Root Provider

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

Altre soluzioni

###Algolia

Per la guida all'installazione, vedere Integrazione di Algolia Search.

Sebbene in genere consigliamo di creare la propria ricerca con il loro lato client SDK, puoi anche collegare l'interfaccia di dialogo integrata.

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

Sostituisci appId, apiKey e indexName con i valori desiderati.
Sostituisci la finestra di dialogo di ricerca predefinita con il tuo nuovo componente.

Note

L'implementazione integrata non utilizza la ricerca istantanea (il loro file ufficiale client Javascript).

Tiltro tag

Come il client di ricerca predefinito, puoi configurare Filtro tag nella finestra di dialogo.

components/search.tsx

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

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

Orama Cloud

Per la guida alla configurazione, vedere Integrazione di 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 />;
}

Sostituisci endpoint, apiKey con i valori desiderati.
Sostituisci la finestra di dialogo di ricerca predefinita con il tuo nuovo componente.

Integrazioni della comunità

Un elenco di integrazioni gestite dalla community.

Cerca ricerca

Interfaccia utente integrata

Se desideri utilizzare l'interfaccia utente della finestra di dialogo di ricerca integrata invece di crearne una tua, è possibile utilizzare il componente 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

Cerca

Interfaccia utente di ricerca

Configurazioni

Collegamenti personalizzati

Disabilita ricerca

Tasti di scelta rapida

Tiltro tag

Opzioni di ricerca

Finestra di dialogo di ricerca Sostituisci

Altre soluzioni

Tiltro tag

Orama Cloud

Integrazioni della comunità

Interfaccia utente integrata

Sommario

Cerca

Interfaccia utente di ricerca

Configurazioni

Collegamenti personalizzati

Disabilita ricerca

Tasti di scelta rapida

Tiltro tag

Opzioni di ricerca

Finestra di dialogo di ricerca Sostituisci

Altre soluzioni

Tiltro tag

Orama Cloud

Integrazioni della comunità

Interfaccia utente integrata

Sommario