如何发布你的第一篇文章

欢迎使用 Taco！这篇文章将教你如何在这个博客系统中发布你的第一篇文章。

📝 文章存放位置

所有的文章都存放在 data/posts/ 目录下，按分类组织：

data/posts/
├── essays/          # 技术文章
├── pieces/          # 随笔文章
└── yearly/          # 年度总结

🎯 创建新文章

1. 选择合适的分类目录

根据你的文章类型，在相应的分类目录下创建 .md 文件：

• essays/: 技术文章、教程、深度思考
• pieces/: 生活随笔、短文、感悟
• yearly/: 年度总结、回顾文章

2. 文件命名规范

建议使用有意义的中文文件名，例如：

• React开发技巧.md
• 编程心得分享.md
• 2024年终总结.md

📋 Front Matter 配置

每篇文章都必须以 Front Matter 开头，这是文章的元数据：

---
title: '文章标题'
date: '2024-01-15'
category: 'essays'
banner:
    img: "https://example.com/banner-image.jpg"
    title: "横幅标题"
    subtitle: "横幅副标题"
---

必需字段说明

title (必需)

• 文章的显示标题
• 会显示在文章页面和列表中

date (必需)

• 文章发布日期
• 格式：YYYY-MM-DD
• 用于文章排序

category (必需)

• 文章分类，必须是以下之一：
  • essays - 技术文章
  • pieces - 随笔文章
  • yearly - 年度总结

可选字段说明

banner (可选)

文章顶部的横幅配置：

• img: 横幅背景图片链接
• title: 横幅显示的标题
• subtitle: 横幅副标题

如果不设置 banner，文章页面将使用默认样式。

✍️ 编写文章内容

Front Matter 之后就是文章的正文内容，使用标准的 Markdown 语法：

# 一级标题

## 二级标题

这是一段普通文本。

**粗体文本** 和 *斜体文本*。

### 代码块示例

\`\`\`javascript
function hello() {
  console.log('Hello, Taco!')
}
\`\`\`

### 列表

- 列表项 1
- 列表项 2
- 列表项 3

### 链接和图片

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

![图片描述](https://example.com/image.jpg)

🎨 支持的 Markdown 特性

1. 语法高亮

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

const greeting = 'Hello, World!'
console.log(greeting)

def hello():
    print("Hello, World!")

.container {
  max-width: 1200px;
  margin: 0 auto;
}

2. 表格

功能	支持情况	说明
Markdown	✅	完整支持
语法高亮	✅	Prism.js
数学公式	❌	暂不支持

3. 引用块

这是一个引用块的示例。 可以用来突出显示重要内容。

4. 任务列表

• 完成的任务
• 待完成的任务
• 另一个待完成的任务

🖼️ 图片处理建议

1. 图片来源推荐

• Unsplash: 高质量免费图片
• Pexels: 免费商用图片
• 自己的图片: 确保有使用权

2. 图片规格建议

• 横幅图片: 推荐 2070x1380 像素
• 文章配图: 建议不超过 1920 像素宽
• 格式: 推荐 WebP 或 JPEG

3. 图片优化

博客系统会自动优化图片：

• 自动格式转换
• 响应式图片
• 懒加载支持

📱 预览和发布

1. 本地预览

保存文章后，在开发环境中可以立即预览：

pnpm dev

访问 http://localhost:3000/blog 查看文章列表。

2. 文章链接

文章的访问链接格式为：

/blog/[文件名不含扩展名]

例如：如何发布文章.md → /blog/如何发布文章

🔧 高级技巧

1. 使用锚点链接

可以在文章中创建锚点链接：

## 重要章节 {#important-section}

[跳转到重要章节](#important-section)

2. 内联 HTML

Markdown 中可以使用一些 HTML 标签：

<div align="center">
  <strong>居中的粗体文本</strong>
</div>

3. 换行技巧

• 段落之间：空一行
• 强制换行：行末加两个空格
• 列表项换行：缩进四个空格

🎉 完成发布

恭喜！现在你已经掌握了在 Taco 中发布文章的完整流程：

1. ✅ 选择合适的分类目录
2. ✅ 创建 Markdown 文件
3. ✅ 配置 Front Matter
4. ✅ 编写文章内容
5. ✅ 本地预览效果

开始你的写作之旅吧！🚀