用户指南

安装

🌐 Installation

初始化 CLI 配置：

🌐 Initialize a config for CLI:

npx @fumadocs/cli

你可以在配置中更改组件的输出路径。

🌐 You can change the output paths of components in the config.

组件

🌐 Components

选择并安装组件。

🌐 Select and install components.

npx @fumadocs/cli add

你可以直接传递组件名称。

🌐 You can pass component names directly.

npx @fumadocs/cli add banner files

魔法是如何运作的？

🌐 How the magic works?

CLI 会从 Fumadocs 的 GitHub 仓库中获取组件的最新版本。安装组件时，可以保证它是最新的。

🌐 The CLI fetches the latest version of component from the GitHub repository of Fumadocs. When you install a component, it is guaranteed to be up-to-date.

此外，它还会转换导入路径。确保使用最新版本的 CLI

🌐 In addition, it also transforms import paths. Make sure to use the latest version of CLI

自定义

🌐 Customise

自定义 Fumadocs 布局的简单方法。

🌐 A simple way to customise Fumadocs layouts.

npx @fumadocs/cli customise

树

🌐 Tree

使用终端中的 tree 命令为 Fumadocs UI Files 组件生成文件树。

🌐 Generate files tree for Fumadocs UI Files component, using the tree command from your terminal.

npx @fumadocs/cli tree ./my-dir ./output.tsx

你也可以输出 MDX 文件：

🌐 You can output MDX files too:

npx @fumadocs/cli tree ./my-dir ./output.mdx

查看帮助以获取更多详细信息：

🌐 See help for further details:

npx @fumadocs/cli tree -h

示例输出

🌐 Example Output

import { File, Folder, Files } from 'fumadocs-ui/components/files';

export default (
  <Files>
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="global.css" />
    </Folder>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="tabs.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="package.json" />
  </Files>
);