檔案 | Fumadocs

page.tsx

layout.tsx

page.tsx

global.css

package.json

Install to your codebase

Easier customization & control.

npx @fumadocs/cli@latest add files

使用方式

請用 Files 包裹檔案元件。您可以在 MDX 內容中使用它，也可以把它當成一般的 React.js 元件使用。

content.mdx

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

屬性

型別

資料夾

屬性

型別

Remark 外掛

remark-mdx-files 是一個 remark 外掛，可提供額外的功能與語法。

source.config.ts

import { remarkMdxFiles } from 'fumadocs-core/mdx-plugins/remark-mdx-files';
import { defineConfig } from 'fumadocs-mdx/config';

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

程式碼區塊語法

它會將 files 程式碼區塊轉換為 <Files /> 元件，例如：

content.md

```files
project
├── src
│   ├── index.js
│   └── utils
│       └── helper.js
├── package.json
```

`<auto-files>`

根據 glob 模式產生 <Files /> 元件。

content.mdx

<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" />

<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" defaultOpenAll />

請勿將不受信任的值傳入 dir，因為它能列出您電腦上任何目錄中的檔案。

檔案

使用方式複製錨點連結

File複製錨點連結

資料夾複製錨點連結

Remark 外掛複製錨點連結

程式碼區塊語法複製錨點連結

<auto-files>複製錨點連結

本頁目錄

使用方式

File

資料夾

Remark 外掛

程式碼區塊語法

`<auto-files>`