文件
在文档中显示文件结构
page.tsx
layout.tsx
page.tsx
global.css
package.json
Install to your codebase
Easier customisation & control.
使用
🌐 Usage
将文件组件封装在 Files 中，你可以在 MDX 内容中使用它，也可以作为普通的 React.js 组件使用。
🌐 Wrap file components in Files, you can use it in your MDX content, or as a normal React.js component.
import { File, Folder, Files } from 'fumadocs-ui/components/files';
<Files>
<Folder name="app" defaultOpen>
<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>文件
🌐 File
Prop
Type
文件夹
🌐 Folder
Prop
Type
备注插件
🌐 Remark Plugin
你可以启用 remark-mdx-files 以获得额外的功能和语法。
🌐 You can enable remark-mdx-files for additional feature & syntax.
import { remarkMdxFiles } from 'fumadocs-core/mdx-plugins/remark-mdx-files';
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkMdxFiles],
},
});代码块语法
🌐 CodeBlock Syntax
它会将 files 代码块转换为 <Files /> 组件，如下所示：
🌐 It will convert files codeblocks into <Files /> component, like:
```files
project
├── src
│ ├── index.js
│ └── utils
│ └── helper.js
├── package.json
```<auto-files>
从全局生成 <Files /> 组件。
🌐 Generate <Files /> component from glob.
<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" />
<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" defaultOpenAll />Last updated on