X (Twitter)

Fumadocs UI는 문서에 대한 멋진 검색 UI를 제공하며, 대신 검색 기능이 Fumadocs Core에 제공되고 문서화되어 있습니다.

문서 검색.

검색 UI

⌘ K 또는 Ctrl K로 엽니다.

구성

루트 레이아웃의 Root Provider 구성 요소에서 검색 UI를 사용자 정의할 수 있습니다.

지정하지 않으면 Orama에서 제공하는 기본 fetch 검색 클라이언트를 사용합니다.

사용자 정의 링크

검색 대화 상자에 사용자 정의 링크 항목을 추가합니다. 쿼리가 비어 있으면 대체 항목으로 표시됩니다.

app/layout.tsx

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

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

검색 비활성화

문서 검색을 선택 해제하려면 루트 공급자에서 비활성화하세요.

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

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

핫키

검색 대화 상자를 실행하도록 단축키를 사용자 정의하세요.

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

태그 필터

필터를 변경할 수 있는 UI를 추가합니다. 먼저 검색 서버에서 Tag Filter를 구성하세요.

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

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

검색 옵션

Orama 검색 서버의 API 엔드포인트 변경과 같은 옵션을 검색 클라이언트에 전달합니다.

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

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

검색 바꾸기 대화 상자

기본 검색 대화 상자를 다음으로 바꿀 수 있습니다.

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

이를 루트 공급자에게 전달하려면 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>
  );
}

이전 루트 공급자 대신 사용하세요.

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

기타 솔루션

알골리아

설정 가이드는 Algolia Search 통합을 참조하세요.

일반적으로 클라이언트 측에서 자체 검색을 구축하는 것이 좋습니다. SDK에는 내장된 대화 인터페이스를 연결할 수도 있습니다.

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

appId, apiKey 및 indexName를 원하는 값으로 바꾸세요.
기본 검색 대화 상자를 새 구성 요소로 바꿉니다.

Note

내장된 구현은 즉시 검색을 사용하지 않습니다(공식 자바스크립트 클라이언트).

태그 필터

기본 검색 클라이언트와 마찬가지로 대화 상자에서 태그 필터를 구성할 수 있습니다.

components/search.tsx

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

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

오라마 클라우드

설정 가이드는 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 />;
}

endpoint, apiKey를 원하는 값으로 바꾸세요.
기본 검색 대화 상자를 새 구성 요소로 바꿉니다.

커뮤니티 통합

커뮤니티에서 유지 관리하는 통합 목록입니다.

검색 검색

내장 UI

자체 UI를 구축하는 대신 내장된 검색 대화상자 UI를 사용하고 싶다면, 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

Fumadocs UI는 문서에 대한 멋진 검색 UI를 제공하며, 대신 검색 기능이 Fumadocs Core에 제공되고 문서화되어 있습니다.

문서 검색.

검색 UI

⌘ K 또는 Ctrl K로 엽니다.

구성

루트 레이아웃의 Root Provider 구성 요소에서 검색 UI를 사용자 정의할 수 있습니다.

지정하지 않으면 Orama에서 제공하는 기본 fetch 검색 클라이언트를 사용합니다.

사용자 정의 링크

검색 대화 상자에 사용자 정의 링크 항목을 추가합니다. 쿼리가 비어 있으면 대체 항목으로 표시됩니다.

app/layout.tsx

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

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

검색 비활성화

문서 검색을 선택 해제하려면 루트 공급자에서 비활성화하세요.

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

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

핫키

검색 대화 상자를 실행하도록 단축키를 사용자 정의하세요.

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

태그 필터

필터를 변경할 수 있는 UI를 추가합니다. 먼저 검색 서버에서 Tag Filter를 구성하세요.

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

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

검색 옵션

Orama 검색 서버의 API 엔드포인트 변경과 같은 옵션을 검색 클라이언트에 전달합니다.

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

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

검색 바꾸기 대화 상자

기본 검색 대화 상자를 다음으로 바꿀 수 있습니다.

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

이를 루트 공급자에게 전달하려면 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>
  );
}

이전 루트 공급자 대신 사용하세요.

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

기타 솔루션

알골리아

설정 가이드는 Algolia Search 통합을 참조하세요.

일반적으로 클라이언트 측에서 자체 검색을 구축하는 것이 좋습니다. SDK에는 내장된 대화 인터페이스를 연결할 수도 있습니다.

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

appId, apiKey 및 indexName를 원하는 값으로 바꾸세요.
기본 검색 대화 상자를 새 구성 요소로 바꿉니다.

Note

내장된 구현은 즉시 검색을 사용하지 않습니다(공식 자바스크립트 클라이언트).

태그 필터

기본 검색 클라이언트와 마찬가지로 대화 상자에서 태그 필터를 구성할 수 있습니다.

components/search.tsx

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

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

오라마 클라우드

설정 가이드는 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 />;
}

endpoint, apiKey를 원하는 값으로 바꾸세요.
기본 검색 대화 상자를 새 구성 요소로 바꿉니다.

커뮤니티 통합

커뮤니티에서 유지 관리하는 통합 목록입니다.

검색 검색

내장 UI

자체 UI를 구축하는 대신 내장된 검색 대화상자 UI를 사용하고 싶다면, 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

검색

검색 UI

구성

사용자 정의 링크

검색 비활성화

핫키

태그 필터

검색 옵션

검색 바꾸기 대화 상자

기타 솔루션

알골리아

태그 필터

오라마 클라우드

커뮤니티 통합

내장 UI

목차

검색

검색 UI

구성

사용자 정의 링크

검색 비활성화

핫키

태그 필터

검색 옵션

검색 바꾸기 대화 상자

기타 솔루션

알골리아

태그 필터

오라마 클라우드

커뮤니티 통합

내장 UI

목차