Next BLOG DEV

快速开始

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 启动生产服务
npm run start

---

配置说明

站点配置 (content/settings.json)

站点的主要配置文件，包含以下部分：

基础信息

字段	说明	示例
siteTitle	网站标题	"My Blog"
siteDescription	网站描述（用于SEO）	"My Blog is a personal blog..."

头部信息 (header)

字段	说明	示例
title	博主名称	"Your Name"
bio	个人简介	"I'm a software engineer..."
avatarUrl	头像链接	"https://example.com/avatar.jpg"
heroImageUrl	首页横幅图片	"https://example.com/hero.jpg"

作者信息 (author)

字段	说明
name	作者名称
avatarUrl	作者头像

分页设置 (pagination)

字段	说明	默认值
postsPerPage	每页显示文章数	10

导航菜单 (navigation)

"navigation": [
  { "id": "1", "label": "首页", "href": "/" },
  { "id": "2", "label": "友链", "href": "https://example.com/friends" }
]

分类配置 (categories)

"categories": [
  { "id": "tech", "name": "技术", "color": "#3b82f6" },
  { "id": "server", "name": "服务器", "color": "#8b5cf6" },
  { "id": "thoughts", "name": "随笔", "color": "#f97316" }
]

字段	说明
id	分类标识（用于文章关联）
name	分类显示名称
color	分类颜色（十六进制）

页脚配置 (footer)

包含页脚文字、品牌信息、社交链接和链接分组。

主题配置 (theme)

字段	说明	示例
bodyFont	正文字体	"PT Sans"
headlineFont	标题字体	"Space Grotesk"

SEO 配置 (seo)

字段	说明
siteUrl	网站正式域名
keywords	SEO 关键词数组
twitterHandle	Twitter 账号

OG 图片配置 (ogImage)

用于生成社交媒体分享卡片的样式配置。

---

文章管理教程

文章结构

博客文章由两部分组成：

1. 文章元数据：content/sitedoc.json 中的 articles 数组
2. 文章内容：content/doc/ 目录下的 .md 文件

添加新文章

步骤 1：创建 Markdown 文件

在 content/doc/ 目录下创建新的 .md 文件，例如 10.md：

## 我的第一篇文章

这里是文章内容，支持完整的 Markdown 语法。

### 子标题

- 列表项 1
- 列表项 2

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

\`\`\`javascript
// 代码块
console.log("Hello World");
\`\`\`

如果你的代码真的很~~长，渲染之后的文章的代码块会自动出现一个小横条，你可以左右滑动查看完整代码，比如下面这个：

这是一个超级无敌长的代码块\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/\O/

步骤 2：注册文章元数据

在 content/sitedoc.json 的 articles 数组中添加：

{
  "id": "10",
  "slug": "my-first-post",
  "title": "我的第一篇文章",
  "contentPath": "content/doc/10.md",
  "publishedAt": "2024-08-10T12:00:00.000Z",
  "excerpt": "这是文章的摘要，会显示在文章列表中。",
  "imageUrl": "https://images.unsplash.com/photo-xxx",
  "imageHint": "描述图片内容",
  "categoryId": "tech"
}

字段说明

字段	必填	说明
id	✅	文章唯一标识（字符串）
slug	✅	URL 路径标识，如 my-first-post
title	✅	文章标题
contentPath	✅	Markdown 文件路径
publishedAt	✅	发布时间（ISO 8601 格式）
excerpt	✅	文章摘要（显示在列表页）
imageUrl	✅	封面图片 URL
imageHint	⬜	图片描述（用于无障碍访问）
categoryId	✅	分类 ID，对应 settings.json 中的分类

文章排序

文章按 publishedAt 时间倒序排列，最新的文章显示在最前面。

删除文章

1. 从 sitedoc.json 的 articles 数组中移除对应条目
2. （可选）删除对应的 .md 文件

修改文章

1. 直接编辑对应的 .md 文件修改内容
2. 如需修改标题、摘要等，编辑 sitedoc.json 中对应条目

---

目录结构

static-blog-dev/
├── content/
│   ├── settings.json    # 站点配置
│   ├── sitedoc.json     # 文章元数据
│   └── doc/             # Markdown 文章目录
│       ├── 1.md
│       ├── 2.md
│       └── ...
├── src/
│   ├── app/             # Next.js 页面
│   ├── components/      # React 组件
│   └── lib/             # 工具函数
├── public/              # 静态资源
└── package.json

---

注意事项

1. 修改配置后需要重启开发服务器
2. categoryId 必须与 settings.json 中的分类 id 匹配
3. 图片建议使用 CDN 链接，避免将大图片放入仓库
4. 发布时间格式：YYYY-MM-DDTHH:mm:ss.sssZ