Waku

设置

npm i fumadocs-mdx fumadocs-core fumadocs-ui @types/mdx

创建配置文件：

source.config.ts

import { defineConfig, defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
});

export default defineConfig();

添加 Vite 插件：

vite.config.ts

import { defineConfig } from 'waku/config';
import mdx from 'fumadocs-mdx/vite';
import * as MdxConfig from './source.config.js';
import tailwindcss from '@tailwindcss/vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  vite: {
    plugins: [tailwindcss(), mdx(MdxConfig), tsconfigPaths()],
  },
});

与 Fumadocs 集成

创建一个 lib/source.ts 文件：

src/lib/source.ts

import { loader } from 'fumadocs-core/source';
import { create, docs } from '../../source.generated.js';

export const source = loader({
  source: await create.sourceAsync(docs.doc, docs.meta),
  baseUrl: '/docs',
});

source.generated.ts 文件将在运行开发服务器或生产构建时生成。

完成

享受吧！

示例

渲染页面

由于 Waku 支持 RSC，您可以直接使用导出的 default 组件。

import { source } from '@/lib/source';
import type { PageProps } from 'waku/router';
import defaultMdxComponents from 'fumadocs-ui/mdx';
import {
  DocsBody,
  DocsDescription,
  DocsPage,
  DocsTitle,
} from 'fumadocs-ui/page';

export default async function DocPage({
  slugs,
}: PageProps<'/docs/[...slugs]'>) {
  const page = source.getPage(slugs);

  if (!page) {
    // ...
  }

  const MDX = page.data.default;
  return (
    <DocsPage toc={page.data.toc}>
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <DocsBody>
        <MDX
          components={{
            ...defaultMdxComponents,
          }}
        />
      </DocsBody>
    </DocsPage>
  );
}

设置

与 Fumadocs 集成

完成

示例

渲染页面

On this page