For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
预约演示登录免费开始
  • 入门
    • 概览
    • 工作原理
    • 快速开始
    • 项目结构
    • Customer showcase
    • 变更日志
  • 配置
    • 概览
    • 站点级设置
    • 页面级设置
  • 编写内容
    • Markdown 基础
    • Markdown 中的富媒体
      • 概览
      • 折叠面板
      • 旁注
      • 按钮
      • 徽章
      • 下载
      • 提示框
      • 卡片
      • 代码块
      • 复制组件
      • 下载组件
      • 端点请求片段
      • 端点响应片段
      • 端点模式代码片段
      • Webhook 负载片段
      • 文件
      • 框架
      • 图标
      • If
      • 缩进
      • 参数字段
      • 提示词组件
      • Runnable endpoint
      • 模式组件
      • 步骤
      • 表格
      • 标签页
      • 工具提示
      • 版本
    • Fern 编辑器
    • 可复用代码片段
  • AI 功能
    • 概览
    • Fern Writer
    • AI 生成的示例
    • Markdown 访问
      • 概览
      • Agent 指令
      • 智能体指令
      • 分析与集成
    • MCP 服务器
    • API 目录发现
  • Public API
    • GETJWT from Fern API key
    • GETAlgolia search credentials
    • GETCurrent user information
  • Fern Writer API
    • GETGet Fern Writer Install Link
Checking status...
SOC2Soc 2 Type II
© 2026 Fern • Birch Solutions, Inc., a Postman company

Documentation

SDKsDocsAsk FernCLI Reference

API Definitions

OpenAPIAsyncAPIOpenRPCgRPC

Resources

BlogSupportPricing

Company

Brand KitPrivacy PolicyTerms of Service
LogoLogo
预约演示登录免费开始
在本页
  • 使用方法
  • 变体
  • 嵌套文件夹
  • 链接文件和文件夹
  • 默认打开的文件夹
  • 行高亮和注释
  • 属性
  • <Files> 属性
  • <Folder> 属性
  • <File> 属性
编写内容组件

Files

||以 Markdown 格式查看|
此页面是否有帮助?
在仪表板中编辑
上一个

Webhook 负载片段

下一个

Frame

<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 类名。