コンテンツにスキップ
Starlight

ファイルツリー

ファイルアイコンや折りたたみ可能なサブディレクトリを使ってディレクトリ構造を表示するには、<FileTree>コンポーネントを使用します。

プレビュー
  • astro.config.mjs 重要なファイル
  • package.json
  • README.md
  • ディレクトリsrc
    • ディレクトリcomponents
      • Header.astro
    • …
  • ディレクトリpages/
    • …

インポート

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

使用方法

<FileTree>コンポーネントを使用して、ファイルアイコンや折りたたみ可能なサブディレクトリを含むファイルツリーを表示します。

ファイルやディレクトリの構造を指定するには、Markdownの箇条書きリストを<FileTree>の内部で使用します。サブディレクトリを作成するには、ネストしたリストを作成するか、リスト項目の末尾に / を追加して、特定の内容を持たないディレクトリとして表示します。

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


<FileTree>


- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/


</FileTree>
プレビュー
  • astro.config.mjs
  • package.json
  • ディレクトリsrc
    • ディレクトリcomponents
      • Header.astro
      • Title.astro
    • ディレクトリpages/
      • …

エントリを強調表示する

ファイルやディレクトリの名前を太字にして目立たせることができます。例: **README.md**。

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


<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>
プレビュー
  • ディレクトリsrc
    • ディレクトリcomponents
      • Header.astro 重要なファイル
      • Title.astro

プレースホルダーを追加する

...または…を名前として使用することで、プレースホルダーファイルやディレクトリを追加できます。これは、フォルダがさらに多くのアイテムを含むことが期待されていることを読者に示しながら、それらをすべて明示的に指定する必要がない場合に便利です。

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


<FileTree>


- src
  - components
    - Header.astro
    - …


</FileTree>
プレビュー
  • ディレクトリsrc
    • ディレクトリcomponents
      • Header.astro
      • …

<FileTree> プロパティ

実装: FileTree.astro

<FileTree>コンポーネントはプロパティを受け付けません。