文件
在文档中显示文件结构
page.tsx
layout.tsx
page.tsx
global.css
package.json
Install to your codebase
Easier customisation & control.
使用
用 Files 包装文件组件。
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>作为代码块
您可以启用 remark-mdx-files 来使用代码块定义文件结构。
import { remarkMdxFiles } from 'fumadocs-core/mdx-plugins';
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkMdxFiles],
},
});它将 files 代码块转换为 MDX 用法，例如：
```files
project
├── src
│ ├── index.js
│ └── utils
│ └── helper.js
├── package.json
```文件
Prop
Type
文件夹
Prop
Type
How is this guide?
Last updated on