跳转到内容
Starlight
Filters

    文件树

    要显示带有文件图标和可折叠子目录的目录结构，请使用 <FileTree> 组件。

    预览
    • astro.config.mjs 一个 重要 文件
    • package.json
    • README.md
    • 文件夹src
      • 文件夹components
        • Header.astro
      • …
    • 文件夹pages/
      • …

    导入

    Section titled “导入”
    import { FileTree } from '@astrojs/starlight/components';

    用法

    Section titled “用法”

    使用 <FileTree> 组件可以显示带有文件图标和可折叠子目录的文件树。

    使用 <FileTree> 内的 无序 Markdown 列表 来指定文件和目录的结构。 使用嵌套列表可以创建子目录，或在列表项末尾添加 / 以将其渲染为没有特定内容的目录。

    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/
        • …

    高亮显示条目

    Section titled “高亮显示条目”

    通过将文件或目录的名称加粗，来使文件或目录从中脱颖而出，例如 **README.md**。

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

    <FileTree>
    

    - src
      - components
        - **Header.astro**
        - Title.astro
    

    </FileTree>
    预览
    • 文件夹src
      • 文件夹components
        • Header.astro
        • Title.astro

    添加注释

    Section titled “添加注释”

    通过在名称后添加更多文本来向文件或目录添加注释。 注释中支持内联 Markdown 格式，例如粗体和斜体。

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

    <FileTree>
    

    - src
      - components
        - Header.astro 一个 **重要** 文件
        - Title.astro
    

    </FileTree>
    预览
    • 文件夹src
      • 文件夹components
        • Header.astro 一个 重要 文件
        • Title.astro

    添加占位符

    Section titled “添加占位符”

    将 ... 或 … 作为名称来添加占位符文件和目录。 这可用于向读者指示文件夹应包含更多项目，而无需明确指定所有项目。

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

    <FileTree>
    

    - src
      - components
        - Header.astro
        - …
    

    </FileTree>
    预览
    • 文件夹src
      • 文件夹components
        • Header.astro
        • …

    <FileTree> 的属性

    Section titled “<FileTree> 的属性”

    实现： FileTree.astro

    <FileTree> 组件不接受任何 props。