iFluxArt Docs

Hey，同学！想创建第一篇技术文档吗？这一篇手把手教你在 Docs 中添加新文档～ ✍️

📁 文档存放位置

所有文档都在这个目录下：

text

apps/docs/src/content/
├── _meta.json              # 根导航配置
├── introduction.mdx        # 根级文档
├── getting-started/
│   ├── _meta.json
│   └── quick-start.mdx
└── ...

📝 创建步骤

1. 新建 .mdx 文件

在 content/ 下的任意文件夹中，创建 .mdx 文件：

bash

# 例如在 guide 文件夹下
touch content/guide/my-first-doc.mdx

2. 编写 Frontmatter

文件开头添加元数据：

markdown

---
title: 我的第一篇文档
description: 这是文档的简要描述
---

3. 编写正文

markdown

# 欢迎

这是我的第一篇文档！

## 开始

让我们开始吧...

📋 Frontmatter 字段

字段	必填	说明	示例
`title`	✅	文档标题	快速开始
`description`	❌	文档描述	5分钟上手...
`order`	❌	排序数字	1
`tags`	❌	标签数组	[React, Tutorial]
`index`	❌	是否索引	true/false

🎨 常用语法

标题

markdown

# 一级标题
## 二级标题
### 三级标题

列表

markdown

- 无序列表
- 项目 2

1. 有序列表
2. 项目 2

代码块

javascript
const hello = 'world';
console.log(hello);

链接

markdown

[链接文字](https://example.com)

图片

markdown

![图片描述](/images/screenshot.png)

🧩 使用 MDX 组件

Docs 内置了丰富的组件，直接在 MDX 中使用：

Callout 提示框

markdown

<Callout type="info">
  这是一个提示信息！
</Callout>

Steps 步骤

markdown

<Steps>
  <Step>
    第一步的内容
  </Step>
  <Step>
    第二步的内容
  </Step>
</Steps>

Tabs 分页

markdown

<MDXTabs>
  <MDXTab label="macOS">
    macOS 的说明...
  </MDXTab>
  <MDXTab label="Windows">
    Windows 的说明...
  </MDXTab>
</MDXTabs>

📂 组织结构

文件夹层级

text

content/
├── _meta.json
├── 入门/
│   ├── _meta.json
│   ├── 01-intro.mdx
│   └── 02-install.mdx
├── 进阶/
│   ├── _meta.json
│   └── ...
└── API/
    ├── _meta.json
    └── ...

_meta.json 导航配置

json

{
  "01-intro": "介绍",
  "02-install": "安装",
  "01-advanced": "进阶"
}

命名规则：

数字前缀控制顺序
key 是文件名（不含 .mdx）
value 是显示名称

💡 最佳实践

1. 命名规范

使用英文文件名：getting-started.mdx
可以用数字排序：01-intro.mdx、02-setup.mdx

2. 描述重要性

Frontmatter 中的 description 会用于：

SEO meta 描述
搜索结果摘要
卡片展示

3. 保持简洁

一篇文档只讲一个主题，长文档可以拆分。

🔗 下一步

MDX 组件 —— 了解更多组件
分类管理 —— 组织文档目录
SEO 优化 —— 提升搜索可见性

✍️ 文档是最好的知识沉淀方式，开始写吧！

Hey，同学！想创建第一篇技术文档吗？这一篇手把手教你在 Docs 中添加新文档～ ✍️

📁 文档存放位置

所有文档都在这个目录下：

text

apps/docs/src/content/
├── _meta.json              # 根导航配置
├── introduction.mdx        # 根级文档
├── getting-started/
│   ├── _meta.json
│   └── quick-start.mdx
└── ...

📝 创建步骤

1. 新建 .mdx 文件

在 content/ 下的任意文件夹中，创建 .mdx 文件：

bash

# 例如在 guide 文件夹下
touch content/guide/my-first-doc.mdx

2. 编写 Frontmatter

文件开头添加元数据：

markdown

---
title: 我的第一篇文档
description: 这是文档的简要描述
---

3. 编写正文

markdown

# 欢迎

这是我的第一篇文档！

## 开始

让我们开始吧...

📋 Frontmatter 字段

字段	必填	说明	示例
`title`	✅	文档标题	快速开始
`description`	❌	文档描述	5分钟上手...
`order`	❌	排序数字	1
`tags`	❌	标签数组	[React, Tutorial]
`index`	❌	是否索引	true/false

🎨 常用语法

标题

markdown

# 一级标题
## 二级标题
### 三级标题

列表

markdown

- 无序列表
- 项目 2

1. 有序列表
2. 项目 2

代码块

javascript
const hello = 'world';
console.log(hello);

链接

markdown

[链接文字](https://example.com)

图片

markdown

![图片描述](/images/screenshot.png)

🧩 使用 MDX 组件

Docs 内置了丰富的组件，直接在 MDX 中使用：

Callout 提示框

markdown

<Callout type="info">
  这是一个提示信息！
</Callout>

Steps 步骤

markdown

<Steps>
  <Step>
    第一步的内容
  </Step>
  <Step>
    第二步的内容
  </Step>
</Steps>

Tabs 分页

markdown

<MDXTabs>
  <MDXTab label="macOS">
    macOS 的说明...
  </MDXTab>
  <MDXTab label="Windows">
    Windows 的说明...
  </MDXTab>
</MDXTabs>

📂 组织结构

文件夹层级

text

content/
├── _meta.json
├── 入门/
│   ├── _meta.json
│   ├── 01-intro.mdx
│   └── 02-install.mdx
├── 进阶/
│   ├── _meta.json
│   └── ...
└── API/
    ├── _meta.json
    └── ...

_meta.json 导航配置

json

{
  "01-intro": "介绍",
  "02-install": "安装",
  "01-advanced": "进阶"
}

命名规则：

数字前缀控制顺序
key 是文件名（不含 .mdx）
value 是显示名称

💡 最佳实践

1. 命名规范

使用英文文件名：getting-started.mdx
可以用数字排序：01-intro.mdx、02-setup.mdx

2. 描述重要性

Frontmatter 中的 description 会用于：

SEO meta 描述
搜索结果摘要
卡片展示

3. 保持简洁

一篇文档只讲一个主题，长文档可以拆分。

🔗 下一步

MDX 组件 —— 了解更多组件
分类管理 —— 组织文档目录
SEO 优化 —— 提升搜索可见性

✍️ 文档是最好的知识沉淀方式，开始写吧！