编写内容组件

Files

以 Markdown 格式查看

<Files> 组件创建可视化的文件树结构，具有可展开的文件夹和嵌套文件。使用它来展示项目结构、目录布局或文档中的任何层次文件组织。

该组件由三部分组成：<Files> 作为容器，<Folder> 用于目录，<File> 用于单个文件。

使用方法

components
accordion.mdx
button.mdx
card.mdx
tabs.mdx
assets
markdown-basics.mdx
README.md
Markdown
1<Files>
2  <Folder name="components" defaultOpen>
3    <File name="accordion.mdx" />
4    <File name="button.mdx" />
5    <File name="card.mdx" />
6    <File name="tabs.mdx" />
7  </Folder>
8  <Folder name="assets">
9    <File name="styles.css" />
10  </Folder>
11  <File name="markdown-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
12  <File name="README.md" />
13</Files>

变体

嵌套文件夹

您可以在文件夹中嵌套文件夹来创建深层目录结构。组件会自动添加可视化嵌套线来显示层次结构。

components
layout
header.mdx
footer.mdx
sidebar.mdx
ui
accordion.mdx
assets
markdown-basics.mdx
README.md
Markdown
1<Files>
2  <Folder name="components" defaultOpen>
3    <Folder name="layout" defaultOpen>
4      <File name="header.mdx" />
5      <File name="footer.mdx" />
6      <File name="sidebar.mdx" />
7    </Folder>
8    <Folder name="ui">
9      <File name="button.mdx" />
10      <File name="card.mdx" />
11      <File name="tabs.mdx" />
12    </Folder>
13    <File name="accordion.mdx" />
14  </Folder>
15  <Folder name="assets">
16    <File name="styles.css" />
17  </Folder>
18  <File name="markdown-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
19  <File name="README.md" />
20</Files>

链接文件和文件夹

添加 href 属性以使文件或文件夹可点击。这对于链接到文档页面、GitHub 仓库或其他资源很有用。带有 href 属性的文件和文件夹会显示下划线。

components
assets
markdown-basics.mdx
README.md
Markdown
1<Files>
2  <Folder name="components">
3    <File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
4    <File name="button.mdx" href="/docs/writing-content/components/button" />
5    <File name="card.mdx" href="/docs/writing-content/components/cards" />
6    <File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
7  </Folder>
8  <Folder name="assets">
9    <File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
10  </Folder>
11  <File name="markdown-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
12  <File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
13</Files>

默认打开的文件夹

使用 defaultOpen 属性让特定文件夹在页面加载时展开。这对于突出显示重要目录或展示文件结构最相关的部分很有用。

components
accordion.mdx
button.mdx
card.mdx
tabs.mdx
assets
markdown-basics.mdx
README.md
Markdown
1<Files>
2  <Folder name="components" defaultOpen>
3    <File name="accordion.mdx" />
4    <File name="button.mdx" />
5    <File name="card.mdx" />
6    <File name="tabs.mdx" />
7  </Folder>
8  <Folder name="assets">
9    <File name="styles.css" />
10  </Folder>
11  <File name="markdown-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
12  <File name="README.md" />
13</Files>

行高亮和注释

使用 highlighted 属性来高亮显示特定的文件或文件夹，以强调背景颜色。使用 comment 属性添加出现在项目旁边的解释性文本。这些属性对于引起对重要文件的注意或提供额外上下文很有用，类似于代码块支持行高亮和内联注释。

components
accordion.mdx# 可折叠内容部分
button.mdx
card.mdx
tabs.mdx
assets
markdown.mdx
README.md# 为文档做贡献
Markdown
1<Files>
2  <Folder name="components" defaultOpen highlighted>
3    <File name="accordion.mdx" comment="可折叠内容部分"/>
4    <File name="button.mdx" />
5    <File name="card.mdx" />
6    <File name="tabs.mdx" highlighted/>
7  </Folder>
8  <Folder name="assets">
9    <File name="styles.css" comment="自定义主题颜色"/>
10  </Folder>
11  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown"/>
12  <File name="README.md" highlighted comment="为文档做贡献"/>
13</Files>

属性

<Files> 属性

children
JSXRequired

文件树内容。应包含 <Folder> 和 <File> 组件。

className
string

用于自定义样式的可选 CSS 类名。

<Folder> 属性

name
stringRequired

要显示的文件夹名称。

defaultOpen
boolean

页面加载时文件夹是否应该展开。如果未指定，文件夹默认为折叠状态。

children
JSX

文件夹内的嵌套内容。可以包括 <File> 和其他 <Folder> 组件。

href
string

使文件夹名称可点击的可选 URL。提供链接时名称会显示下划线。

highlighted
boolean

包含文件夹的行是否应该用强调背景颜色进行可视化高亮。使用此功能来引起对重要目录的注意。

comment
string

出现在文件夹名称旁边的可选注释文本。注释如果还没有 # 前缀会自动添加，并以等宽字体和弱化颜色样式显示。

className
string

用于自定义样式的可选 CSS 类名。

<File> 属性

name
stringRequired

要显示的文件名。

href
string

使文件名可点击的可选 URL。提供链接时名称会显示下划线。

highlighted
boolean

包含文件的行是否应该用强调背景颜色进行可视化高亮。使用此功能来引起对重要文件的注意。

comment
string

出现在文件名旁边的可选注释文本。注释如果还没有 # 前缀会自动添加，并以等宽字体和弱化颜色样式显示。

className
string

用于自定义样式的可选 CSS 类名。