Hugo 博客配置 Mermaid 图表支持

Tue, 05 May 2026 16:30:00 +0800

Hugo 博客配置 Mermaid 图表支持链接到标题

本文说明基于 hugo-coder 主题的博客如何集成 Mermaid 图表。

前提条件链接到标题

使用支持 Mermaid shortcode 的 Hugo 主题（如 hugo-coder）
主题的 baseof.html 中包含以下逻辑：

{{ if .HasShortcode "mermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true});</script>
{{ end }}

正确写法链接到标题

Mermaid 图表必须使用 Hugo Shortcode 语法，而非标准 Markdown 代码块：

类型	写法
✅ Shortcode	`{{< mermaid >}} ... {{< /mermaid >}}`
❌ Markdown 代码块	```mermaid ... ```

图表类型示例链接到标题

流程图链接到标题

flowchart TD A[开始] --> B{判断} B -->|条件A| C[处理A] B -->|条件B| D[处理B] C --> E[结束] D --> E

时序图链接到标题

sequenceDiagram participant 客户端 participant 服务器 participant 数据库客户端->>服务器: 请求服务器->>数据库: 查询数据库-->>服务器: 返回结果服务器-->>客户端: 响应

gantt title 项目计划 dateFormat YYYY-MM-DD section 设计设计方案 :done, d1, 2026-05-01, 3d 设计评审 :done, d2, after d1, 1d section 开发编码实现 :active, dev1, after d2, 5d 单元测试 :dev2, after dev1, 2d section 部署部署上线 :deploy, after dev2, 1d

注意事项链接到标题

必须使用 Hugo Shortcode 语法 {{< mermaid >}}，不要用 ```mermaid Markdown 代码块
编写时注意 Shortcode 前后各有一个空行，确保 Hugo 正确解析
提交后等待 Cloudflare Pages 自动构建部署（约 1-2 分钟）
如需本地预览，运行 hugo server 后访问 http://localhost:1313

Hello World - 用 Hugo 建博客

Fri, 03 Apr 2026 19:30:00 +0800

Hugo 初体验链接到标题

Hugo 是一个用 Go 语言写的静态网站生成器，速度极快，主题丰富，适合搭建博客、文档、个人站点。

只需要一个 hugo.toml 配置文件 + content/ 目录下的 Markdown 文件，几秒钟就能编译出完整的静态网站。

部署流程：Hugo → GitHub → Cloudflare Pages，完全自动化，域名和托管都不依赖任何单一平台，永久可访问。

Hello World（Go 语言）链接到标题

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

运行：

go run hello.go

输出：

Hello, World!

博客搭好了，接下来会陆续把一些可公开的笔记整理发上来。

Hugo on OHTLY Blog

Hugo 博客配置 Mermaid 图表支持

Hugo 博客配置 Mermaid 图表支持链接到标题

前提条件链接到标题

正确写法链接到标题

图表类型示例链接到标题

流程图链接到标题

时序图链接到标题

甘特图链接到标题

注意事项链接到标题

Hello World - 用 Hugo 建博客

Hugo 初体验链接到标题

Hello World（Go 语言）链接到标题

Hugo on OHTLY Blog

Hugo 博客配置 Mermaid 图表支持

Hugo 博客配置 Mermaid 图表支持 链接到标题

前提条件 链接到标题

正确写法 链接到标题

图表类型示例 链接到标题

流程图 链接到标题

时序图 链接到标题

甘特图 链接到标题

注意事项 链接到标题

Hello World - 用 Hugo 建博客

Hugo 初体验 链接到标题

Hello World（Go 语言） 链接到标题

Hugo 博客配置 Mermaid 图表支持链接到标题

前提条件链接到标题

正确写法链接到标题

图表类型示例链接到标题

流程图链接到标题

时序图链接到标题

甘特图链接到标题

注意事项链接到标题

Hugo 初体验链接到标题

Hello World（Go 语言）链接到标题