Files
ドキュメント内にファイル構造を表示します
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 コンポーネントとしても使用できます。
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 プラグインです。
import { remarkMdxFiles } from 'fumadocs-core/mdx-plugins/remark-mdx-files';
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkMdxFiles],
},
});コードブロック構文
files コードブロックを、次のように <Files /> コンポーネントへ変換します。
```files
project
├── src
│ ├── index.js
│ └── utils
│ └── helper.js
├── package.json
```<auto-files>
glob パターンから <Files /> コンポーネントを生成します。
<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" />
<auto-files dir="./my-dir" pattern="**/*.{ts,tsx}" defaultOpenAll />信頼できない値を dir に渡さないでください。マシン上のあらゆるディレクトリのファイルが一覧表示されるおそれがあります。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep