文件树
要显示带有文件图标和可折叠子目录的目录结构,请使用 <FileTree>
组件。
- astro.config.mjs 一个重要的文件
- package.json
- README.md
目录src
目录components
- Header.astro
- …
目录pages/
- …
导入
“导入”部分import { FileTree } from '@astrojs/starlight/components';
用法
“用法”部分使用 <FileTree>
组件来显示带有文件图标和可折叠子目录的文件树。
在 <FileTree>
中使用无序 Markdown 列表来指定文件和目录的结构。使用嵌套列表创建一个子目录,或在列表项的末尾添加 /
,以将其渲染为一个没有指定内容的目录。
import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- astro.config.mjs- package.json- src - components - Header.astro - Title.astro - pages/
</FileTree>
{% 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>
{% 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 an **important** file - Title.astro
</FileTree>
{% filetree %}- src - components - Header.astro an **important** file - 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> 属性”部分实现: FileTree.astro
<FileTree>
组件不接受任何属性。