痛点

每次写网页报告，样式和内容糊在一起。改个颜色要重新生成全文，换风格等于重写。更烦的是，内容写在一个专有编辑器里，换个工具就迁移不了。

解决方案：拆两层

内容层只管写什么——Markdown 文件，带 YAML 头信息。

样式层只管长什么样——独立的 HTML 模板，用 {{变量}} 占位符接收内容。

中间一个渲染脚本串起来，输入 MD 选模板，输出成品 HTML。

具体实现

目录结构

~/.hermes/
|-- scripts/
|   +-- render_page.py
|-- templates/
    |-- default.html
    |-- dark.html
    +-- magazine.html

模板文件是独立 HTML，用 {{title}}、{{content}}、{{toc}} 等占位符接收内容。想加新模板？写一个 HTML 丢进 templates/ 就行，脚本自动识别。

使用方法

python3 ~/.hermes/scripts/render_page.py 文章.md
python3 ~/.hermes/scripts/render_page.py 文章.md -t dark
python3 ~/.hermes/scripts/render_page.py 文章.md -t magazine

文章格式

每篇文章开头加 YAML 头信息：

---
title: 标题
date: 2026-08-06
description: 一句话描述
---
正文内容...

配合 Obsidian 使用

设置软链接

ln -s ~/Documents/Obsidian/Blog /path/to/hugo/content/posts

写作流程

  1. 在 Obsidian 里写文章，存到 Blog/ 文件夹
  2. 用标准 Markdown，不要用 [[双向链接]]
  3. 图片用 ![alt](path) 语法
  4. 保存后 Hugo 自动就能读到

发布流程

hugo
git add . && git commit -m "新文章" && git push

Cloudflare Pages 自动构建上线。

三套模板对比

模板 风格 字体 适合场景
default 干净报告 无衬线 日报、技术文档
dark 深色护眼 无衬线 夜间阅读、代码展示
magazine 杂志风 衬线 长文、深度阅读

实测效果

一份 1.5KB 的 MD 文件，生成三个 HTML：

  • default：6.8KB，侧边栏目录 + 蓝绿渐变标题
  • dark：6.5KB，深色背景 + 青绿强调
  • magazine：5.7KB，居中衬线排版

跟传统方式比

方面 传统方式 分离方式
改风格 重新生成整个 HTML 改模板，内容不动
多风格 维护多份 HTML 一份 MD + 多模板
模板复用 复制粘贴改样式 独立模板文件
学习成本 手写 HTML+CSS 写 MD 就行
工具锁定 用特定编辑器 任何文本编辑器都能写
版本管理 二进制文件 纯文本，Git 友好

本文由 AI 辅助生成。