安装包

已弃用

对于 Fumadocs MDX，现在默认已启用。

你可以改用 remarkNpm 插件。

使用

🌐 Usage

npm install fumadocs-docgen

添加 remark 插件。

🌐 Add the remark plugin.

source.config.ts

import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkInstall],
  },
});

定义所需组件。

🌐 Define the required components.

mdx-components.tsx (Fumadocs UI)

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    Tab,
    Tabs,
    ...components,
  };
}

组件
标签页	接受一个项目数组 (`items`)
标签	接受项目的名称 (`value`)

创建以 package-install 为语言的代码块。

🌐 Create code blocks with package-install as language.

```package-install
my-package
```

```package-install
npm i my-package -D
```

输出

🌐 Output

插件应生成以下结构。

🌐 The following structure should be generated by the plugin.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab value="npm">...</Tab>
  <Tab value="pnpm">...</Tab>
  <Tab value="yarn">...</Tab>
  <Tab value="bun">...</Tab>
</Tabs>

npm install my-package

选项

🌐 Options

持久的

🌐 Persistent

在使用 Fumadocs UI 时，你可以通过 persist 选项启用持久性。

🌐 When using with Fumadocs UI, you can enable persistence with the persist option.

source.config.ts

import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';

const remarkInstallOptions = {
  persist: {
    id: 'some-id',
  },
};

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [[remarkInstall, remarkInstallOptions]],
  },
});

这将生成以下内容：

🌐 This will instead generate:

<Tabs groupId="some-id" persist items={[...]}>
  ...
</Tabs>

使用

输出

选项

持久的

On this page