一个基于 Node.js 的现代化静态博客生成器，支持 Markdown 文章解析、响应式设计、分页功能和客户端搜索。
- 🎨 现代化设计 - 响应式布局，支持桌面和移动设备
- 📝 Markdown 支持 - 完整的 Markdown 语法和 YAML 前置内容
- 🔍 客户端搜索 - 基于 Fuse.js 的纯前端搜索功能
- 📄 智能分页 - 自动分页，支持跳转到首页、末页和指定页面
- 🎯 SEO 优化 - 自动生成 sitemap.xml 和语义化 HTML
- ⚡ 实时构建 - 开发模式下文件变更自动重新构建
- 🎨 代码高亮 - 支持多种编程语言的语法高亮
- 📱 移动优先 - 完全响应式设计，移动端体验优秀
- Node.js 16.0 或更高版本
- npm 或 yarn 包管理器
# 克隆项目
git clone <repository-url>
cd work7
# 安装依赖
npm install# 构建静态文件
npm run build
# 开发模式（监听文件变化）
npm run dev
# 本地预览
npx http-server public -p 3000访问 http://localhost:3000 查看效果。
work7/
├── src/ # 📝 Markdown 文章源文件
│ ├── hello-world.md # 示例文章
│ └── ... # 更多文章
├── templates/ # 🎨 EJS 模板文件
│ ├── index.ejs # 首页模板
│ ├── post.ejs # 文章详情页模板
│ ├── search.ejs # 搜索页面模板
│ └── layout.ejs # 布局模板
├── public/ # 🌐 生成的静态文件
│ ├── css/
│ │ └── style.css # 样式文件
│ ├── posts/ # 文章详情页
│ │ └── {filename}/
│ │ └── index.html
│ ├── page/ # 分页页面
│ │ └── {page}/
│ │ └── index.html
│ ├── search/ # 搜索页面
│ │ └── index.html
│ ├── index.html # 首页
│ ├── search.json # 搜索索引
│ └── sitemap.xml # 站点地图
├── build.js # 🔨 构建脚本
├── generate-posts.js # 📄 生成测试文章脚本
└── package.json # 📦 项目配置
| 依赖包 | 版本 | 用途 |
|---|---|---|
ejs |
^3.1.10 | 模板引擎，用于生成 HTML |
gray-matter |
^4.0.3 | 解析 Markdown 文件的 YAML 前置内容 |
markdown-it |
^14.1.0 | Markdown 解析器，支持 HTML、链接化和排版 |
fs-extra |
^11.3.0 | 扩展的文件系统操作库 |
fuse.js |
^7.1.0 | 模糊搜索库，用于客户端搜索 |
chokidar |
^4.0.3 | 文件监听库 |
| 依赖包 | 版本 | 用途 |
|---|---|---|
chokidar-cli |
^3.0.0 | 命令行文件监听工具，用于开发模式 |
在 src/ 目录下创建 .md 文件：
---
title: "文章标题"
date: 2025-01-20
category: "技术"
tags: [JavaScript, Node.js, 教程]
---
## 文章内容
这里是文章的 Markdown 内容...
### 代码示例
```javascript
console.log('Hello, World!');这是一段引用内容
### 前置内容字段
| 字段 | 类型 | 必需 | 说明 |
|------|------|------|------|
| `title` | String | 否 | 文章标题（默认使用文件名） |
| `date` | Date | 否 | 发布日期（默认使用文件创建时间） |
| `category` | String | 否 | 文章分类 |
| `tags` | Array | 否 | 文章标签数组 |
## 🎨 样式特性
### 文章详情页
- **白色背景容器** - 完整的白色背景，提升阅读体验
- **渐变头部** - 紫色渐变背景，现代化设计
- **代码高亮** - 深色主题，支持多种编程语言
- **响应式布局** - 完美适配各种屏幕尺寸
### 代码展示
```css
/* 内联代码 */
code {
background: #f8f9fa;
color: #e83e8c;
border: 1px solid #e9ecef;
}
/* 代码块 */
pre {
background: #2d3748;
color: #e2e8f0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
- 移动优先 - 优先考虑移动设备体验
- 断点设计 - 768px 断点，适配平板和桌面
- 弹性布局 - 使用 Flexbox 和 Grid 布局
- 触摸友好 - 适合触摸操作的按钮和链接
构建时自动生成 public/search.json，包含：
- 文章标题和内容
- 标签和分类信息
- 发布日期和 URL
- 文章摘要
- 模糊搜索 - 支持拼写错误和部分匹配
- 多字段搜索 - 同时搜索标题、内容、标签
- 权重配置 - 标题权重更高，结果更准确
- 实时搜索 - 输入时即时显示结果
在 build.js 中修改：
const CONFIG = {
postsPerPage: 15, // 每页显示的文章数
excerptLength: 200, // 摘要长度
paginationRange: 2 // 分页导航显示范围
};- 智能分页 - 自动计算总页数和当前页
- 导航链接 - 支持首页、末页、上一页、下一页
- 页码显示 - 显示当前页前后的页码
- 省略号 - 当页码过多时显示省略号
- sitemap.xml - 包含所有页面和文章
- 语义化 HTML - 使用正确的 HTML 标签
- Meta 标签 - 优化的页面元信息
- 结构化数据 - 支持搜索引擎理解
- 静态文件 - 纯静态 HTML，加载速度快
- CSS 优化 - 压缩和优化的样式文件
- 图片优化 - 响应式图片和懒加载
- 缓存策略 - 合理的缓存设置
生成的 public/ 目录可以部署到任何静态托管服务：
- GitHub Pages - 免费，适合个人项目
- Netlify - 功能丰富，支持自动部署
- Vercel - 快速部署，支持预览
- AWS S3 - 企业级，高可用性
- 阿里云 OSS - 国内访问速度快
# 构建项目
npm run build
# 上传 public/ 目录内容到服务器
# 或使用 Git 推送（GitHub Pages）- 新增模板 - 在
templates/目录添加.ejs文件 - 修改构建逻辑 - 在
build.js中添加生成逻辑 - 更新样式 - 在
public/css/style.css中添加样式
/* 添加自定义样式 */
.custom-component {
background: var(--primary-color);
color: white;
padding: 1rem;
border-radius: 8px;
}// 添加 markdown-it 插件
const md = require('markdown-it')({
html: true,
linkify: true,
typographer: true
});
// 添加代码高亮插件
md.use(require('markdown-it-highlightjs'));- Fork 项目
- 创建功能分支：
git checkout -b feature/new-feature - 提交更改：
git commit -am 'Add some feature' - 推送分支：
git push origin feature/new-feature - 提交 Pull Request
- 使用 ES6+ 语法
- 遵循 ESLint 规则
- 添加适当的注释
- 编写测试用例
本项目采用 ISC License 许可证。
感谢以下开源项目的支持：
- Node.js - JavaScript 运行时
- Markdown-it - Markdown 解析器
- Fuse.js - 模糊搜索库
- EJS - 模板引擎
⭐ 如果这个项目对你有帮助，请给它一个星标！
享受写作和分享的乐趣！ ✨