编辑说明#
本文基于 Blowfish 官方文档与社区资料整理。Blowfish 持续更新,具体功能以官方最新版本为准。
Blowfish 是什么#
Blowfish 是 Hugo 生态中最受欢迎的个人博客与网站主题之一,由 Nuno Coração 创建并维护。它基于 Tailwind CSS 3.0 构建,设计理念是"让内容成为主角"——极简、干净、不抢戏。
Blowfish 是 Congo 主题的 fork,在保持同样简洁骨架的同时,增加了更多自定义选项和集成能力。
| 维度 | 说明 |
|---|---|
| 核心能力 | Hugo 个人博客 / 作品集 / 文档站主题 |
| 技术栈 | Tailwind CSS 3.0 + Hugo Pipes |
| 配色方案 | 18+ 内置方案 + 完全自定义 |
| 开源协议 | MIT |
| 安装方式 | Git Submodule / Hugo Module / 手动 |
为什么选 Blowfish:核心亮点#
1. 外观即正义:多配色 + 暗色模式#
Blowfish 内置了 18+ 种配色方案(blowfish、congo、fire、ocean、neon、slate 等),每套配色都是一个三色调色板,在 Tailwind CSS 色阶上精调而成。不满意?可以完全自定义。
暗色模式支持三种策略:强制开启、强制关闭、跟随系统自动切换(带手动切换按钮)。
2. 多种首页布局#
Blowfish 不像大部分主题只给一种首页——它提供了 page、profile、hero、card、background、custom 六种布局。本博客使用的魔方启动页就是基于 custom 布局开发的。
3. 丰富的内容组件#
主题内置了大量 短代码(Shortcodes):
- 图表:Mermaid 流程图、Chart.js 数据图表
- 媒体:响应式视频、YouTube 嵌入、图片轮播、画廊灯箱
- 排版:时间轴、手风琴、标签页、徽章、按钮
- 数学:KaTeX 公式渲染
- 代码:GitHub/GitLab/Gitea 代码卡片、语法高亮、一键复制
4. 开箱即用的高级功能#
- 多作者模式:支持多位作者归档,每人有独立页面
- 文章系列:将文章组合成选集,自动生成前后篇导航
- 全文搜索:Fuse.js 驱动的客户端搜索,无需后端
- 多语言:完整 i18n 支持,含 RTL 语言
- 评论系统:集成 Disqus、Commento、Utterances 等
- 数据分析:Fathom、Google Analytics、Umami 均支持
- Firebase 集成:动态浏览量和点赞统计
5. Lighthouse 满分#
Blowfish 在性能、可访问性、SEO、最佳实践四项 Lighthouse 指标上均能拿到接近满分的成绩——得益于 Tailwind CSS 的按需生成、原生图片懒加载、最小化 JS 等优化策略。
适合谁#
- 追求极简设计但不想牺牲功能的博主
- 需要展示作品集的设计师、开发者
- 想做技术文档站的团队
- 喜欢"改一行配置就能换风格"的人
快速开始#
# 在你的 Hugo 站点目录下
git submodule add https://github.com/nunocoracao/blowfish.git themes/blowfish
# 复制配置文件
cp -r themes/blowfish/config/_default/* config/_default/
# 修改 hugo.toml
echo 'theme = "blowfish"' >> config/_default/hugo.toml
# 启动
hugo server -D