Rainy Den

系列文章

静态博客搭建

第 3 / 3 篇

系列上一篇

静态导出与暗色模式实践

·技术

Mermaid 图表与 Pagefind 搜索

介绍博客中的 Mermaid 渲染、Pagefind 全文搜索，以及系列文章的写作约定。

nextjsmermaid搜索
目录 (5)

系列导读 · 静态博客搭建 第 3 / 3 篇（完结）
← 上一篇：静态导出与暗色模式

本篇是「静态博客搭建」系列的最后一篇，演示 代码块、Mermaid 流程图 和 全文搜索 的集成方式。

IMPORTANT

Pagefind 搜索索引在 pnpm build 完成后自动生成，开发模式下需先构建一次才能使用搜索。

内容渲染架构

下面是用 Mermaid 描述的文章处理流程：

flowchart LR A[Markdown 文件] --> B[gray-matter 解析] B --> C[Frontmatter 校验] C --> D[remark / rehype 管道] D --> E[Mermaid 占位] D --> F[代码高亮] E --> G[静态 HTML] F --> G G --> H[Pagefind 索引] H --> I[out/ 静态站点]

构建完成后，搜索模块会扫描 out/ 目录并建立索引：

sequenceDiagram participant Author as 作者 participant Git as Git 仓库 participant Build as pnpm build participant PF as Pagefind participant Site as 静态站点 Author->>Git: 提交 Markdown Git->>Build: 触发构建 Build->>Site: 导出 HTML 到 out/ Build->>PF: postbuild 生成索引 PF->>Site: 写入 /pagefind/ Site-->>Author: 支持 Ctrl/Cmd + K 搜索

系列文章 Frontmatter

系列文章通过 series 字段声明：

series:
  name: "静态博客搭建"
  order: 3

同一 name 的文章会自动聚合到 /series/ 页面，并在文章顶部显示系列导航。

搜索实现要点

Pagefind 是纯静态搜索方案，不需要后端服务。核心配置如下：

// package.json
{
  "scripts": {
    "build": "next build",
    "postbuild": "pagefind --site out --output-path out/pagefind"
  }
}

前端通过 Ctrl/Cmd + K 打开搜索面板，调用 /pagefind/pagefind.js 在浏览器中完成检索。

Mermaid 写法

在 Markdown 中使用 mermaid 代码块即可：

```mermaid
graph TD
  A[开始] --> B{是否通过校验}
  B -->|是| C[渲染文章]
  B -->|否| D[构建失败]
```

图表会在客户端渲染，并随浅色 / 深色主题切换风格。

下一步

系列完结后，你可以继续探索：

  1. 为文章添加 cover 封面图
  2. 用 updated 字段标记修订日期
  3. 部署 out/ 目录到任意静态托管平台
pnpm build   # 构建 + 生成 Pagefind 索引
pnpm preview # 预览 out/ 静态产物

相关文章