BLOG_README.md 3.0 KB

Xmake 博客系统

这是一个基于 VitePress 的博客系统,支持自动从 markdown 文件生成博客列表。

功能特性

  • ✅ 自动读取 docs/postsdocs/zh/posts 目录下的 markdown 文件
  • ✅ 支持 frontmatter 解析(标题、日期、作者、标签、摘要)
  • ✅ 分页显示(每页 10 篇文章)
  • ✅ 响应式设计
  • ✅ 支持中英文双语
  • ✅ 自动排序(按日期倒序)

使用方法

1. 添加新文章

docs/posts 目录下创建新的 markdown 文件,格式如下:

---
title: "文章标题"
date: "2024-01-15"
author: "作者名"
tags: ["标签1", "标签2"]
excerpt: "文章摘要(可选)"
---

文章内容...

2. 生成博客数据

运行以下命令生成博客数据:

npm run generate-blog

或者直接运行:

node scripts/generate-blog-data.js

3. 启动开发服务器

npm run docs:dev

这会自动生成博客数据并启动开发服务器。

4. 构建生产版本

npm run docs:build

文件结构

docs/
├── posts/                    # 英文博客文章
│   ├── xmake-3-0-release.md
│   ├── building-cross-platform-apps.md
│   └── ...
├── zh/posts/                 # 中文博客文章
│   ├── xmake-3-0-release.md
│   ├── cross-platform-development.md
│   └── ...
├── blog/
│   └── index.md             # 英文博客首页
├── zh/blog/
│   └── index.md             # 中文博客首页
└── .vitepress/
    └── theme/
        ├── blog-data.js      # 英文博客数据(自动生成)
        └── zh-blog-data.js   # 中文博客数据(自动生成)

scripts/
└── generate-blog-data.js     # 博客数据生成脚本

Frontmatter 字段说明

字段 类型 必需 说明
title string 文章标题
date string 发布日期(YYYY-MM-DD 格式)
author string 作者名称
tags array 标签数组
excerpt string 文章摘要,如果不提供会自动生成

注意事项

  1. 自动生成: 每次运行 npm run docs:devnpm run docs:build 时,系统会自动重新生成博客数据
  2. 文件命名: 建议使用有意义的文件名,因为 URL 会基于文件名生成
  3. 日期格式: 日期必须使用 YYYY-MM-DD 格式
  4. 编码: 确保 markdown 文件使用 UTF-8 编码

故障排除

如果遇到问题:

  1. 确保所有 markdown 文件都有正确的 frontmatter
  2. 检查文件编码是否为 UTF-8
  3. 确保 gray-matter 包已正确安装
  4. 查看控制台错误信息

自定义

可以通过修改以下文件来自定义博客系统:

  • scripts/generate-blog-data.js: 修改数据生成逻辑
  • docs/blog/index.mddocs/zh/blog/index.md: 修改博客页面布局
  • CSS 样式可以通过 VitePress 主题配置进行自定义