Fumadocs

Vite

在 Vite 中使用 Fumadocs MDX

安装

🌐 Setup

安装

🌐 Installation

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

创建配置文件:

🌐 Create the configuration file:

source.config.ts
import { defineDocs } from 'fumadocs-mdx/config';

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

添加 Vite 插件:

🌐 Add the Vite plugin:

vite.config.ts
import { defineConfig } from 'vite';
import mdx from 'fumadocs-mdx/vite';
import * as MdxConfig from './source.config';

export default defineConfig({
  plugins: [
    mdx(MdxConfig),
    // ...
  ],
});

Setup an import alias (recommended):

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "fumadocs-mdx:collections/*": [".source/*"]
    }
  }
}

你可能需要为路径别名配置 vite-tsconfig-paths 插件。

与 Fumadocs 集成

🌐 Integrate with Fumadocs

要与 Fumadocs 集成,请创建一个 lib/source.ts 文件:

🌐 To integrate with Fumadocs, make a lib/source.ts file:

app/lib/source.ts
import { docs } from 'fumadocs-mdx:collections/server';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

当你运行开发服务器或生产构建时,将生成 .source 文件夹。

🌐 The .source folder will be generated when you run development server or production build.

完成

🌐 Done

你现在可以在 content/docs 文件夹中编写内容。

🌐 You can now write content in content/docs folder.

下一步是什么?

🌐 What is Next?

Last updated on

On this page