文檔頁面 | Formion — 企業組織與營運的結構化引擎

可以渲染完整頁面的組件（標題、目錄等）。

正文

page.tsx

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

export default function Page({ params }: { params: { slug?: string[] } }) {
  const page = getPage(params);

  return (
    <DocsPage
      title={page.title}
      description={page.description}
      mdx={page.body}
      toc={page.toc}
    />
  );
}

SEO

為頁面添加 SEO 優化，有幾種方法。首先，允許文檔生成器提供 metadata 幫助程序：

api.ts

export { createMetadata } from 'fumadocs-core/docs';

預設值包括標題、描述、開放圖形（Open Graph）和 Twitter 圖片、規範（Canonical）URL 和 locale 元數據。

現在您可以直接使用它：

page.tsx

import type { Metadata } from 'next';
import { createMetadata } from '@/app/api';

export async function generateMetadata({
  params,
}: {
  params: { slug?: string[] };
}): Promise<Metadata> {
  const page = await getPage(params);

  return createMetadata({
    page,
    params,
  });
}

或者您可以手動構建它：

page.tsx

import type { Metadata } from 'next';
import { absoluteUrl } from 'fumadocs-core/utils/absolute-url';

export const metadata: Metadata = {
  title: 'My Page',
  description: 'Page Description',
  openGraph: {
    title: 'My Page',
    description: 'Page Description',
    type: 'article',
    url: absoluteUrl('/docs/my-page'),
  },
  twitter: {
    title: 'My Page',
    description: 'Page Description',
    card: 'summary_large_image',
  },
  alternates: {
    canonical: absoluteUrl('/docs/my-page'),
  },
};

內容目錄

支持無限級別的標題。從頁面內容中提取，您應該通過 toc 字段傳遞它。

page.tsx

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

export default function Page() {
  const toc = getToc(content);

  return <DocsPage toc={toc} />;
}

自定義內容目錄

可以客製 TOC（目錄）的呈現方式，但您仍然需要通過 toc 字段傳遞真實的 TOC 項目。

page.tsx

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

export default function Page() {
  return (
    <DocsPage tocClassName="hidden lg:block" toc={toc}>
      <div>Custom TOC</div>
    </DocsPage>
  );
}

最後更新時間

page.tsx

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

export default function Page() {
  return <DocsPage lastUpdatedAt={new Date()} />;
}

頁腳

layout.tsx

import { DocsPage } from 'fumadocs-ui/page';
import { baseOptions } from '@/app/layout.config';

export default function Page() {
  return (
    <DocsPage
      footer={{
        text: 'Built with Fumadocs',
      }}
    />
  );
}

使用基礎配置

您可以創建一個 baseOptions 對象，用於所有頁面和佈局組件。

layout.config.ts

import type { BasePageConfig } from 'fumadocs-ui/page';

export const baseOptions: BasePageConfig = {
  githubUrl: 'https://github.com/fuma-nama/fumadocs',
  footer: {
    text: 'Built with Fumadocs',
  },
};

page.tsx

import { DocsPage } from 'fumadocs-ui/page';
import { baseOptions } from '@/app/layout.config';

export default function Page() {
  return <DocsPage {...baseOptions} />;
}

編輯鏈接

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

export default function Page() {
  return (
    <DocsPage
      gitTimestamp={true}
      footer={{
        // Edit Link
        editLink: {
          text: 'Edit this page',
          url: 'https://github.com/username/repo/blob/main',
        },
      }}
    />
  );
}

頁面導航

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

export default function Page({ params }: { params: { slug?: string[] } }) {
  const pagePath = getPagesPath(params);
  const prev = getAdjacentPages({ current: pagePath, dir: 'prev' });
  const next = getAdjacentPages({ current: pagePath, dir: 'next' });

  return (
    <DocsPage
      footer={{
        navigation: {
          prev: prev?.url
            ? {
                title: prev.title,
                href: prev.url,
              }
            : undefined,
          next: next?.url
            ? {
                title: next.title,
                href: next.url,
              }
            : undefined,
        },
      }}
    />
  );
}

自定義獲取相鄰頁面

您可以在 createAdjacentPages 方法中應用 includeInPageNav 過濾器，該方法由文檔生成器創建：

api.ts

import { createAdjacentPages } from 'fumadocs-core/docs';
import { tree } from '@/app/source';

export const getAdjacentPages = createAdjacentPages(tree, {
  includeInPageNav: (page) => !page.data.preview,
});

可以渲染完整頁面的組件（標題、目錄等）。

正文

page.tsx

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

export default function Page({ params }: { params: { slug?: string[] } }) {
  const page = getPage(params);

  return (
    <DocsPage
      title={page.title}
      description={page.description}
      mdx={page.body}
      toc={page.toc}
    />
  );
}

SEO

為頁面添加 SEO 優化，有幾種方法。首先，允許文檔生成器提供 metadata 幫助程序：

api.ts

export { createMetadata } from 'fumadocs-core/docs';

預設值包括標題、描述、開放圖形（Open Graph）和 Twitter 圖片、規範（Canonical）URL 和 locale 元數據。

現在您可以直接使用它：

page.tsx

import type { Metadata } from 'next';
import { createMetadata } from '@/app/api';

export async function generateMetadata({
  params,
}: {
  params: { slug?: string[] };
}): Promise<Metadata> {
  const page = await getPage(params);

  return createMetadata({
    page,
    params,
  });
}

或者您可以手動構建它：

page.tsx

import type { Metadata } from 'next';
import { absoluteUrl } from 'fumadocs-core/utils/absolute-url';

export const metadata: Metadata = {
  title: 'My Page',
  description: 'Page Description',
  openGraph: {
    title: 'My Page',
    description: 'Page Description',
    type: 'article',
    url: absoluteUrl('/docs/my-page'),
  },
  twitter: {
    title: 'My Page',
    description: 'Page Description',
    card: 'summary_large_image',
  },
  alternates: {
    canonical: absoluteUrl('/docs/my-page'),
  },
};

內容目錄

支持無限級別的標題。從頁面內容中提取，您應該通過 toc 字段傳遞它。

page.tsx

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

export default function Page() {
  const toc = getToc(content);

  return <DocsPage toc={toc} />;
}

自定義內容目錄

可以客製 TOC（目錄）的呈現方式，但您仍然需要通過 toc 字段傳遞真實的 TOC 項目。

page.tsx

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

export default function Page() {
  return (
    <DocsPage tocClassName="hidden lg:block" toc={toc}>
      <div>Custom TOC</div>
    </DocsPage>
  );
}

最後更新時間

page.tsx

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

export default function Page() {
  return <DocsPage lastUpdatedAt={new Date()} />;
}

頁腳

layout.tsx

import { DocsPage } from 'fumadocs-ui/page';
import { baseOptions } from '@/app/layout.config';

export default function Page() {
  return (
    <DocsPage
      footer={{
        text: 'Built with Fumadocs',
      }}
    />
  );
}

使用基礎配置

您可以創建一個 baseOptions 對象，用於所有頁面和佈局組件。

layout.config.ts

import type { BasePageConfig } from 'fumadocs-ui/page';

export const baseOptions: BasePageConfig = {
  githubUrl: 'https://github.com/fuma-nama/fumadocs',
  footer: {
    text: 'Built with Fumadocs',
  },
};

page.tsx

import { DocsPage } from 'fumadocs-ui/page';
import { baseOptions } from '@/app/layout.config';

export default function Page() {
  return <DocsPage {...baseOptions} />;
}

編輯鏈接

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

export default function Page() {
  return (
    <DocsPage
      gitTimestamp={true}
      footer={{
        // Edit Link
        editLink: {
          text: 'Edit this page',
          url: 'https://github.com/username/repo/blob/main',
        },
      }}
    />
  );
}

頁面導航

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

export default function Page({ params }: { params: { slug?: string[] } }) {
  const pagePath = getPagesPath(params);
  const prev = getAdjacentPages({ current: pagePath, dir: 'prev' });
  const next = getAdjacentPages({ current: pagePath, dir: 'next' });

  return (
    <DocsPage
      footer={{
        navigation: {
          prev: prev?.url
            ? {
                title: prev.title,
                href: prev.url,
              }
            : undefined,
          next: next?.url
            ? {
                title: next.title,
                href: next.url,
              }
            : undefined,
        },
      }}
    />
  );
}

自定義獲取相鄰頁面

您可以在 createAdjacentPages 方法中應用 includeInPageNav 過濾器，該方法由文檔生成器創建：

api.ts

import { createAdjacentPages } from 'fumadocs-core/docs';
import { tree } from '@/app/source';

export const getAdjacentPages = createAdjacentPages(tree, {
  includeInPageNav: (page) => !page.data.preview,
});