iFluxArt Docs

Hey，同学！想发表你的第一篇文章吗？这一篇手把手教你在 admin 后台创建博客，全程不需要写代码～ 🎉

📍 入口

在浏览器打开管理后台：

text

http://localhost:3001/blog/new

或者从 admin 首页点击「新建博客」按钮。

📝 填写文章信息

基本信息

字段	说明	示例
标题	文章标题，会显示在列表和 SEO 中	我的第一篇博客
Slug	URL 中的标识符，自动生成	my-first-blog
分类	文章所属分类	技术
标签	文章标签，可多个	React, Next.js

封面图

点击上传按钮，选择一张图片作为封面。建议尺寸：1200 x 630px（2:1 比例）。

💡 没有封面图时，会显示默认占位图。建议还是加一张，更有辨识度！

摘要

简要描述文章内容，会显示在列表页和 meta 描述中。建议 50-150 字。

📝 正文编辑器

MDX 编辑器

正文使用 MDX 格式，左边编辑，右边实时预览。

常用语法

1. 标题

markdown

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

2. 加粗、斜体

markdown

**加粗文字**
*斜体文字*
***加粗斜体***

3. 链接和图片

markdown

[链接文字](https://example.com)
![图片描述](https://example.com/image.png)

4. 代码块

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

5. 列表

markdown

- 无序列表项 1
- 无序列表项 2

1. 有序列表项 1
2. 有序列表项 2

6. 引用

markdown

> 这是一段引用
> 可以换行继续

🎨 MDX 组件

在正文中可以直接使用这些组件：

Callout 提示框

markdown

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

<Callout type="warning">
  这是一个警告提示！
</Callout>

<Callout type="error">
  这是一个错误提示！
</Callout>

Steps 步骤条

markdown

<Steps>
  <Step>
    第一步：安装依赖
  </Step>
  <Step>
    第二步：配置环境
  </Step>
  <Step>
    第三步：启动项目
  </Step>
</Steps>

Tabs 分页

markdown

<MDXTabs>
  <MDXTab label="macOS">
    macOS 的命令...
  </MDXTab>
  <MDXTab label="Windows">
    Windows 的命令...
  </MDXTab>
</MDXTabs>

📋 Frontmatter

文章顶部可以设置元数据：

markdown

---
title: 文章标题
description: 文章描述
date: 2024-01-15
tags: [React, Next.js]
category: 技术
cover: /images/cover.jpg
---

正文内容...

字段	说明
`title`	标题（必填）
`description`	描述
`date`	发布时间
`tags`	标签数组
`category`	分类
`cover`	封面图

💾 保存与发布

保存草稿

点击「保存草稿」按钮，文章保存在数据库中，状态为「草稿」。

预览

点击「预览」按钮，在新标签页查看文章实际效果。

发布

确认无误后，点击「发布」按钮：

状态变为「已发布」
出现在博客列表中
会被搜索引擎收录

⚠️ 注意：发布后文章会公开，请确保内容没有敏感信息！

📊 完整流程

text

1. 打开 /blog/new
2. 填写标题、分类、标签
3. 上传封面图（可选）
4. 编写正文（MDX）
5. 设置 Frontmatter
6. 预览效果
7. 保存草稿 或 发布

💡 写作建议

1. 先写大纲

动笔前先想好结构：

要讲什么？
分几个部分？
重点是什么？

2. 善用组件

Callout 突出重点
Steps 展示步骤
Tabs 对比方案
代码块展示代码

3. 图片处理

建议先上传到媒体库，复制链接使用
控制图片大小，建议 < 1MB
添加 alt 描述，便于 SEO

4. 多次迭代

写完初稿，放一放
回头再读，修改完善
让朋友帮忙 Review

🔗 下一步

编辑发布 —— 修改已有文章
MDX 组件 —— 更多组件用法
分类标签 —— 规划文章分类

✍️ 写作是一种表达，也是一种思考方式。开始你的第一篇文章吧！

Hey，同学！想发表你的第一篇文章吗？这一篇手把手教你在 admin 后台创建博客，全程不需要写代码～ 🎉

📍 入口

在浏览器打开管理后台：

text

http://localhost:3001/blog/new

或者从 admin 首页点击「新建博客」按钮。

📝 填写文章信息

基本信息

字段	说明	示例
标题	文章标题，会显示在列表和 SEO 中	我的第一篇博客
Slug	URL 中的标识符，自动生成	my-first-blog
分类	文章所属分类	技术
标签	文章标签，可多个	React, Next.js

封面图

点击上传按钮，选择一张图片作为封面。建议尺寸：1200 x 630px（2:1 比例）。

💡 没有封面图时，会显示默认占位图。建议还是加一张，更有辨识度！

摘要

简要描述文章内容，会显示在列表页和 meta 描述中。建议 50-150 字。

📝 正文编辑器

MDX 编辑器

正文使用 MDX 格式，左边编辑，右边实时预览。

常用语法

1. 标题

markdown

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

2. 加粗、斜体

markdown

**加粗文字**
*斜体文字*
***加粗斜体***

3. 链接和图片

markdown

[链接文字](https://example.com)
![图片描述](https://example.com/image.png)

4. 代码块

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

5. 列表

markdown

- 无序列表项 1
- 无序列表项 2

1. 有序列表项 1
2. 有序列表项 2

6. 引用

markdown

> 这是一段引用
> 可以换行继续

🎨 MDX 组件

在正文中可以直接使用这些组件：

Callout 提示框

markdown

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

<Callout type="warning">
  这是一个警告提示！
</Callout>

<Callout type="error">
  这是一个错误提示！
</Callout>

Steps 步骤条

markdown

<Steps>
  <Step>
    第一步：安装依赖
  </Step>
  <Step>
    第二步：配置环境
  </Step>
  <Step>
    第三步：启动项目
  </Step>
</Steps>

Tabs 分页

markdown

<MDXTabs>
  <MDXTab label="macOS">
    macOS 的命令...
  </MDXTab>
  <MDXTab label="Windows">
    Windows 的命令...
  </MDXTab>
</MDXTabs>

📋 Frontmatter

文章顶部可以设置元数据：

markdown

---
title: 文章标题
description: 文章描述
date: 2024-01-15
tags: [React, Next.js]
category: 技术
cover: /images/cover.jpg
---

正文内容...

字段	说明
`title`	标题（必填）
`description`	描述
`date`	发布时间
`tags`	标签数组
`category`	分类
`cover`	封面图

💾 保存与发布

保存草稿

点击「保存草稿」按钮，文章保存在数据库中，状态为「草稿」。

预览

点击「预览」按钮，在新标签页查看文章实际效果。

发布

确认无误后，点击「发布」按钮：

状态变为「已发布」
出现在博客列表中
会被搜索引擎收录

⚠️ 注意：发布后文章会公开，请确保内容没有敏感信息！

📊 完整流程

text

1. 打开 /blog/new
2. 填写标题、分类、标签
3. 上传封面图（可选）
4. 编写正文（MDX）
5. 设置 Frontmatter
6. 预览效果
7. 保存草稿 或 发布

💡 写作建议

1. 先写大纲

动笔前先想好结构：

要讲什么？
分几个部分？
重点是什么？

2. 善用组件

Callout 突出重点
Steps 展示步骤
Tabs 对比方案
代码块展示代码

3. 图片处理

建议先上传到媒体库，复制链接使用
控制图片大小，建议 < 1MB
添加 alt 描述，便于 SEO

4. 多次迭代

写完初稿，放一放
回头再读，修改完善
让朋友帮忙 Review

🔗 下一步

编辑发布 —— 修改已有文章
MDX 组件 —— 更多组件用法
分类标签 —— 规划文章分类

✍️ 写作是一种表达，也是一种思考方式。开始你的第一篇文章吧！