ファイルツリー
ファイルアイコンや折りたたみ可能なサブディレクトリを使ってディレクトリ構造を表示するには、<FileTree>
コンポーネントを使用します。
インポート
使用方法
<FileTree>
コンポーネントを使用して、ファイルアイコンや折りたたみ可能なサブディレクトリを含むファイルツリーを表示します。
ファイルやディレクトリの構造を指定するには、Markdownの箇条書きリストを<FileTree>
の内部で使用します。サブディレクトリを作成するには、ネストしたリストを作成するか、リスト項目の末尾に /
を追加して、特定の内容を持たないディレクトリとして表示します。
エントリを強調表示する
ファイルやディレクトリの名前を太字にして目立たせることができます。例: **README.md**
。
import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src - components - **Header.astro** - Title.astro
</FileTree>
{% filetree %}- src - components - **Header.astro** - Title.astro{% /filetree %}
ディレクトリsrc
ディレクトリcomponents
- Header.astro
- Title.astro
コメントを追加する
ファイルやディレクトリにコメントを追加するには、名前の後にテキストを追加します。コメントには、太字や斜体などのMarkdownのインライン形式がサポートされています。
import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src - components - Header.astro **重要な**ファイル - Title.astro
</FileTree>
{% filetree %}- src - components - Header.astro **重要な**ファイル - Title.astro{% /filetree %}
ディレクトリsrc
ディレクトリcomponents
- Header.astro 重要なファイル
- Title.astro
プレースホルダーを追加する
...
または…
を名前として使用することで、プレースホルダーファイルやディレクトリを追加できます。これは、フォルダがさらに多くのアイテムを含むことが期待されていることを読者に示しながら、それらをすべて明示的に指定する必要がない場合に便利です。
import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src - components - Header.astro - …
</FileTree>
{% filetree %}- src - components - Header.astro - …{% /filetree %}
ディレクトリsrc
ディレクトリcomponents
- Header.astro
- …
<FileTree>
プロパティ
実装: FileTree.astro
<FileTree>
コンポーネントはプロパティを受け付けません。