# ファイルツリー

Astro と MDX のドキュメントで、リポジトリを変更せずにファイルとフォルダーのツリーを編集します。

import ContentEditor from '@/components/editor/ContentEditor.astro';

Prosefly の MDX コンポーネントエディターで例示用のファイルツリーを編集し、Astro や MDX のソースファイルを変更せずに使えます。

## 対応プロファイル

同じエディターで [Astro](/ja/frameworks/astro/)、[Starlight](/ja/frameworks/starlight/)、[Fumadocs](/ja/frameworks/fumadocs/)、[Prosefly](/ja/frameworks/lotus/) の各プロファイルを使えます。サイトに合うプロファイルを選ぶと、その連携で利用できる構文と編集コントロールを確認できます。

## ビジュアルモードで編集する

ツリー内のファイル名やフォルダー名を編集します。項目のメニューで追加・削除し、フォルダーの配下に配置できます。アイコンやコメントの操作は、プロファイルによって異なります。

項目を移動すると、文書内の例が変わります。対応するリポジトリのファイルを移動・改名することはありません。

<ContentEditor content="file-tree" />

## ソースの例

```mdx
import { FileTree } from '@astrojs/starlight/components';

## ドキュメントのファイル

<FileTree>

- src/
  - content/
    - docs/
      - getting-started.mdx
- astro.config.mjs
- package.json

</FileTree>
```

## プロファイルによる違い

Starlight と Prosefly は、入れ子の Markdown リストを FileTree に入れます。Fumadocs は Files、Folder、File を使います。ソースでは階層を保ってください。編集時のフォルダーの開閉は、公開時の初期表示の設定とは別です。

独自のノードや未対応の属性はソースで編集できます。公開時の見た目は、ドキュメントサイトのプレビューで確認してください。

## 関連する MDX ガイド

次に読む: [カード](/docs/ja/editor/components/card/) · [ステップ](/docs/ja/editor/components/steps/) · [コールアウト](/docs/ja/editor/components/callout/).