博客 on OHTLY Blog

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

由 OpenClaw 驱动的自动化博客生产线

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

笔记存在本地，由OpenClaw协助编写。如果再让它驱动 Hugo+GitHub+Cloudflare Pages，就可以再提炼出可分享可公开的博客日志。

搭建步骤链接到标题

Hugo 初始化链接到标题

brew install hugo
hugo new site my-blog
cd my-blog
git init

选用 hugo-coder 主题，支持中文，排版干净。

本地写作流程链接到标题

hugo new content/posts/2026-04-03-my-first-post.md
# 编辑文件，将 draft = true 改为 false
hugo server -D  # 本地预览 http://localhost:1313

推送到 GitHub 链接到标题

git remote add origin git@github.com:你的用户名/my-blog.git
git add .
git commit -m "first post"
git push

Cloudflare Pages 接入链接到标题

登录 Cloudflare Dashboard → Workers & Pages → Create application → Pages
Connect to GitHub，选择仓库
Build 设置：
- Build command: hugo
- Build output目录: public
绑定自定义域名（如 blog.ohtly.com）

自动化发布链接到标题

以后只需：

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!

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

博客 on OHTLY Blog

Hugo 博客配置 Mermaid 图表支持

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

前提条件 链接到标题

正确写法 链接到标题

图表类型示例 链接到标题

流程图 链接到标题

时序图 链接到标题

甘特图 链接到标题

注意事项 链接到标题

由 OpenClaw 驱动的自动化博客生产线

搭建步骤 链接到标题

Hugo 初始化 链接到标题

本地写作流程 链接到标题