Hugo博客

flow — Hugo 博客模板

作者 BiosPlus

Flow 把 Hugo 博客做成桌面邮件客户端：左侧消息列表、右侧阅读窗格，支持 Pagefind 全文搜索与标签筛选。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。

仓库预览 1

查看源码在新标签页打开

作者提供的预览

来自项目仓库的原始界面图片。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

桌面邮件客户端式分栏：左侧常驻文章列表，右侧阅读窗格，浏览与阅读互不打断

分隔条可拖拽、双击复位，支持方向键与 Home/End 调整，宽度和滚动位置本地记忆

Pagefind 静态全文搜索，结果就地显示在侧栏并高亮关键词，支持 / 与 Cmd/Ctrl+K 唤起

标签条带计数与置顶标签，点击后客户端即时过滤，颜色由哈希映射到 M3 配色

零 npm 资产管线，CSS 与 JS 由 Hugo Extended 的 esbuild 打包并生成 SRI 指纹

图片与动图自动转出 JPEG XL、WebP、WebM 并保留原格式回退

模板详细介绍

Flow 是一个 Hugo 主题，把博客的浏览方式重新组织成桌面邮件客户端的形态：文章对应邮件，标签对应标签夹，页面左侧是常驻的消息列表，右侧是无干扰的阅读窗格。列表与正文并排存在，读者可以在不丢失当前位置的前提下切换文章、按标签过滤，而不是在索引页与文章页之间反复跳转。主题要求 Hugo Extended 0.165.0 及以上版本，样式与脚本由 Hugo 内置的 esbuild 处理，不依赖 npm、Tailwind、PostCSS 或 Sass。

在具体能力上，搜索基于 Pagefind，索引标题、摘要和正文，结果直接渲染在侧栏列表里并高亮匹配词；标签条支持置顶标签和客户端即时过滤，颜色由 FNV-1a 哈希映射到 Material Design 3 的配色对。分隔条可拖拽、可键盘调整，宽度和列表滚动位置会写入浏览器存储。媒体方面提供 JPEG XL、WebP、WebM 的自动转换与回退，并附带一个构建期的转码脚本。键盘快捷键覆盖搜索、分隔条和标签导航，默认 AMOLED 深色主题，同时跟随系统提供浅色模式。

需要留意的是，仓库星标很少，许可证状态在资料中标注为待核对，README 虽写明 MIT，正式使用前仍建议确认。生产构建除了 hugo --gc --minify，还要额外运行 Pagefind 生成索引，仓库提供的 build.sh 面向 Cloudflare Pages、Render 等 CI 环境；本地开发必须加 --disableFastRender，否则跨页面的侧栏列表可能显示过期内容。这些都是上手前值得先验证的部分。

Hugo博客

适合你的项目吗？

适用场景

技术长文、开发日志、随笔或日常笔记类个人博客，希望读者能连续浏览归档
文章数量较多、需要快速全文检索和标签筛选的内容站点
偏好键盘操作、不想引入 npm 工具链的 Hugo 用户
需要 Atom 与 RSS 订阅输出、并希望默认深色阅读体验的站点

适合人群

使用 Hugo Extended 0.165.0 或更高版本、愿意按主题要求调整配置的开发者
接受在 Hugo 构建之外额外执行 Pagefind 索引步骤的部署流程
能自行处理媒体转码脚本（cjxl、ffmpeg）或选择跳过该步骤的维护者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
Hugo Extended 版本需不低于 0.165.0，README 说明这是 css.ChromaStyles 与 importContext 的前提
2
本地开发必须使用 hugo server --disableFastRender，否则跨页面嵌入的侧栏列表可能过期
3
生产构建需依次执行媒体转码（可选）、hugo --gc --minify 与 pagefind --site build，搜索索引不会由 Hugo 自动生成
4
仓库星标数量很少，许可证状态在资料中为待核对，README 标注 MIT，正式采用前建议确认授权与维护状态
5
主题参数如 pinnedTags、pagerSize 需在 hugo.toml 中配置，分页与回退值应保持一致

查看仓库使用说明