创建文章指南

本指南将详细介绍如何在本博客系统中创建和发布文章，包括文章格式、Front Matter 配置、Markdown 语法支持等内容。

文章存储位置

所有文章都存储在 content/posts/ 目录下。文件名将成为文章的 URL slug（例如：创建文章指南.md 对应的 URL 为 /posts/创建文章指南）。

文章格式

每篇文章都需要使用 Markdown 格式（.md 或 .mdx 文件），并且必须包含 Front Matter 元数据。

Front Matter 配置

Front Matter 位于文章开头，使用三个短横线（---）包裹，采用 YAML 格式：

---
title: 文章标题          # 必需：文章标题
date: 2026-03-09         # 必需：发布日期（ISO 格式：YYYY-MM-DD）
excerpt: 文章摘要        # 可选：文章摘要，显示在列表页
tags:                    # 可选：文章标签（数组格式）
  - 标签1
  - 标签2
category: 分类名称       # 可选：文章分类
coverImage: /images/cover.jpg  # 可选：封面图片路径
---

字段说明

• title（必需）：文章标题，将显示在文章页面和列表页
• date（必需）：发布日期，格式为 YYYY-MM-DD，用于排序和归档
• excerpt（可选）：文章摘要，如果未提供，系统会自动截取文章开头部分
• tags（可选）：文章标签数组，用于分类和搜索
• category（可选）：文章分类，用于内容组织
• coverImage（可选）：封面图片路径，相对于 public 目录

文章内容

Front Matter 之后是文章正文，使用标准 Markdown 语法编写。

Markdown 语法支持

本博客系统支持丰富的 Markdown 语法，包括：

基础语法

• 标题：使用 # 到 ###### 表示一级到六级标题
• 段落：使用空行分隔段落
• 列表：有序列表和无序列表
• 链接：[链接文本](URL)
• 图片：![图片描述](图片路径)
• 代码：行内代码使用反引号 `代码`，代码块使用三个反引号

代码高亮

支持多种编程语言的语法高亮：

```javascript
function hello() {
  console.log('Hello, World!');
}
```

支持的编程语言包括：JavaScript、TypeScript、Python、Java、Go、Rust、PHP、Ruby、Swift、Kotlin、Vue、HTML、CSS、SQL 等。

GitHub Flavored Markdown (GFM)

支持 GitHub 风格的 Markdown，包括：

• 表格：使用 | 和 - 创建表格
• 删除线：使用 ~~删除的文本~~
• 任务列表：使用 - [ ] 和 - [x]

GFM Alerts（提示框）

支持 GitHub 风格的提示框，使用以下语法：

> [!NOTE]
> 这是一个提示信息

> [!TIP]
> 这是一个技巧提示

> [!IMPORTANT]
> 这是一个重要提示

> [!WARNING]
> 这是一个警告信息

> [!CAUTION]
> 这是一个注意信息

目录自动生成

文章中的二级及以上标题（## 到 ######）会自动生成目录，显示在文章侧边栏，方便快速导航。

创建文章的步骤

1. 准备文章内容

在开始之前，建议先规划好文章的结构和内容：

• 确定文章标题和主题
• 准备文章摘要
• 选择合适的分类和标签
• 准备封面图片（可选）

2. 创建 Markdown 文件

在 content/posts/ 目录下创建新的 .md 文件：

# 使用命令行创建文件
touch content/posts/我的文章.md

# 或直接在编辑器中创建

3. 编写 Front Matter

在文件开头添加 Front Matter：

---
title: 我的第一篇文章
date: 2026-03-09
excerpt: 这是文章的摘要
tags:
  - 标签1
  - 标签2
category: 技术
---

4. 编写文章内容

在 Front Matter 之后编写文章正文，使用 Markdown 语法。

5. 预览和发布

保存文件后，在开发环境中运行：

npm run dev

然后在浏览器中访问 http://localhost:3000 查看效果。