X (Twitter)

페이지는 문서의 기본 요소이며 목차, 바닥글 및 이동 경로.

사용법

page.tsx

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

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

Good to know

page.tsx에서 DocsTitle로 제목을 렌더링하는 대신 제목을 MDX 파일에 넣을 수 있습니다. 그러면 MDX 본문에 제목이 렌더링됩니다.

바디

Typography 스타일을 적용하고 콘텐츠를 내부에 래핑합니다.

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

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

범주

선택 사항으로 해당 (페이지 트리) 폴더의 다른 페이지를 카드와 연결합니다.

<DocsPage /> 없이 이 구성 요소를 사용할 수 있습니다.

page.tsx

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

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

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

데모:

구성

전체 모드

사용 가능한 모든 공간을 채우도록 페이지를 확장하려면 full를 페이지 구성 요소에 전달합니다. 이렇게 하면 TOC가 팝오버로 표시됩니다.

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

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

마지막 업데이트 시간

페이지의 마지막 업데이트 시간을 표시합니다.

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

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

다른 버전 제어(예: Github)가 있거나 출처가 다를 수 있으므로 Sanity, Fumadocs UI와 같은 원격 소스는 마지막 업데이트 시간을 표시하지 않습니다. 기본값.

Github 호스팅 문서의 경우 다음을 사용할 수 있습니다. 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)} />;

Note

문서의 마지막 업데이트 시간을 지정할 수도 있습니다(예: 머리말 사용). 먼저 Fumadocs MDX에서 스키마 유형 ](/docs/mdx/collections#schema)를 업데이트하는 것을 잊지 마십시오.

GitHub에서 편집

페이지에 "GitHub에서 편집" 버튼을 추가합니다.

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

바닥글

바닥글은 다음 페이지와 이전 페이지로 이동하는 두 개의 버튼이 있는 탐색 요소입니다. 지정하지 않으면 페이지 트리에서 찾은 이웃 페이지를 표시합니다.

footer 옵션을 사용하여 바닥글을 사용자 정의하세요.

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

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

탐색경로

사용자가 폴더를 탐색할 때만 표시되는 탐색 요소입니다.

MDX 페이지

Fumadocs MDX와 함께 page.mdx 파일을 생성하고 다음을 추가할 수 있습니다.

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

## Hello World

그러면 적절한 타이포그래피 스타일이 적용된 MDX가 포함된 페이지가 생성됩니다.

페이지는 문서의 기본 요소이며 목차, 바닥글 및 이동 경로.

사용법

page.tsx

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

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

Good to know

page.tsx에서 DocsTitle로 제목을 렌더링하는 대신 제목을 MDX 파일에 넣을 수 있습니다. 그러면 MDX 본문에 제목이 렌더링됩니다.

바디

Typography 스타일을 적용하고 콘텐츠를 내부에 래핑합니다.

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

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

범주

선택 사항으로 해당 (페이지 트리) 폴더의 다른 페이지를 카드와 연결합니다.

<DocsPage /> 없이 이 구성 요소를 사용할 수 있습니다.

page.tsx

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

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

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

데모:

구성

전체 모드

사용 가능한 모든 공간을 채우도록 페이지를 확장하려면 full를 페이지 구성 요소에 전달합니다. 이렇게 하면 TOC가 팝오버로 표시됩니다.

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

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

마지막 업데이트 시간

페이지의 마지막 업데이트 시간을 표시합니다.

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

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

다른 버전 제어(예: Github)가 있거나 출처가 다를 수 있으므로 Sanity, Fumadocs UI와 같은 원격 소스는 마지막 업데이트 시간을 표시하지 않습니다. 기본값.

Github 호스팅 문서의 경우 다음을 사용할 수 있습니다. 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)} />;

Note

GitHub에서 편집

페이지에 "GitHub에서 편집" 버튼을 추가합니다.

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

바닥글

footer 옵션을 사용하여 바닥글을 사용자 정의하세요.

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

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

탐색경로

사용자가 폴더를 탐색할 때만 표시되는 탐색 요소입니다.

MDX 페이지

Fumadocs MDX와 함께 page.mdx 파일을 생성하고 다음을 추가할 수 있습니다.

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

## Hello World

그러면 적절한 타이포그래피 스타일이 적용된 MDX가 포함된 페이지가 생성됩니다.

문서 페이지

사용법

바디

범주

구성

전체 모드

목차

스타일

팝오버 모드

마지막 업데이트 시간

GitHub에서 편집

바닥글

탐색경로

MDX 페이지

목차

문서 페이지

사용법

바디

범주

구성

전체 모드

목차

스타일

팝오버 모드

마지막 업데이트 시간

GitHub에서 편집

바닥글

탐색경로

MDX 페이지

목차