快速开始指南

本指南将帮助你快速上手这个博客系统。

创建新文章

在 content/posts/ 目录下创建一个新的 Markdown 文件（.md 或 .mdx），文件名将成为文章的 URL slug。

例如：content/posts/my-first-post.md 将生成 URL /posts/my-first-post

Front Matter 配置

每篇文章的开头需要包含 Front Matter（YAML 格式）：

---
title: 文章标题          # 必需：文章标题
date: 2024-01-16         # 必需：发布日期（ISO 格式）
excerpt: 文章摘要        # 可选：文章摘要，显示在列表页
tags:                    # 可选：文章标签
  - 标签1
  - 标签2
category: 分类          # 可选：文章分类
coverImage: /images/cover.jpg  # 可选：封面图片链接
---

封面图片说明

coverImage 字段用于设置文章的封面图片：

• 相对路径：将图片放在 public/images/ 目录下，使用 /images/filename.jpg 格式
• 绝对路径：使用完整的 URL，如 https://example.com/image.jpg
• 不设置：如果不添加此字段，文章将使用默认的渐变背景

封面图片会在以下位置显示：

• ✅ 文章详情页顶部（一体化设计，占满文章内容区域宽度）
• ✅ 首页和列表页的文章卡片顶部（悬停时有缩放效果）

Markdown 语法

支持标准的 Markdown 语法：

标题

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

列表

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

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

代码

行内代码：const x = 1

代码块：

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

链接和图片

[链接文本](https://example.com)
![图片描述](image-url)

开发命令

• npm run dev - 启动开发服务器（http://localhost:3000）
• npm run build - 构建生产版本
• npm run start - 启动生产服务器
• npm run lint - 运行代码检查

自定义样式

编辑 app/globals.css 来自定义全局样式。

部署

这个博客可以部署到任何支持 Next.js 的平台：

• Vercel（推荐）- 零配置部署
• Netlify - 支持 Next.js
• 自托管 - 使用 Node.js 服务器

需要帮助？

查看项目 README 或提交 Issue。