Hugo Pragmata — 一个 NASA 蓝图风格的博客主题

花了点时间给自己的博客写了一个 Hugo 主题，叫 Pragmata。

设计灵感

Pragmata 的视觉风格来自三个方向的混搭：

• NASA 工程蓝图 — 28px 工程网格背景、十字标记、数据面板
• Apollo 宇航服 — 米灰色系、缝线分割条、铆钉感边框
• 苏联工业控制台 — Space Mono 等宽字体、红蓝状态指示灯、仪表盘卡片

不是刻意复古，只是觉得这种「严肃工程感」和写技术博客的气质挺搭。

特性

• 全本地化字体（Inter、Space Mono、Barlow Condensed），零 CDN 依赖
• 首页侧边栏布局，文章页全宽沉浸阅读 + 左侧浮动 TOC
• 标签云（按文章数量动态调整大小和颜色）
• 项目展示页（三列卡片网格）
• RSS 自动发现 + 页面底部 GitInfo（commit 信息追溯）
• 顶部导航 Social 图标（GitHub、Gitee、微博、B站）
• 标题 Glitch 效果
• 响应式布局 + 移动端汉堡菜单
• 404 页面：SECTOR NOT FOUND

技术实现

纯 CSS 方案，没有用任何 CSS 框架或 JS 库：

• CSS Custom Properties 管理设计 token
• CSS Grid 处理页面布局
• position: sticky 实现 TOC 侧边栏浮动
• 内联 SVG 图标，无外部依赖
• @font-face 本地加载字体

安装

1git clone https://github.com/viperasi/hugo-pragmata.git themes/pragmata

在 hugo.toml 中配置：

 1theme = "pragmata"
 2
 3[taxonomies]
 4tag = "tags"
 5category = "categories"
 6
 7[params]
 8description = "your description"
 9toc = true
10showBreadCrumbs = true
11
12[[params.social]]
13name = "GitHub"
14label = "[GH]"
15url = "https://github.com/yourname"

详细配置参考 GitHub 仓库。

预览

正在看的就是这个主题。如果你也喜欢这种冷峻的工程美学，欢迎 fork 使用。