跳过正文
  1. 工具/

Blowfish

· 752 字· 3 分钟
sun.ao
作者
sun.ao
我是 sun.ao,一名热爱技术的程序员,专注于 AI 和数智化领域。
目录

编辑说明
#

本文基于 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

相关入口
#

相关文章