基于 Bootstrap 4 构建,设计参考 Prisma 博客
hugo-theme-chunky-poster — Hugo 博客模板
作者 puresyntax71
基于 Bootstrap 4 的 Hugo 博客主题,设计参考 Prisma 博客,支持多作者、图片处理、基础 i18n、Prism 代码高亮、LazyLoad、Commento 评论与图片画廊。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
通过 Hugo author 分类法支持多作者,作者头像取自作者页面资源的第一张图片
内容图片集中存放于 content/images,文章 front matter 的 images 列表首图作为封面
支持 Prism 代码高亮、LazyLoad、Commento 评论与基础 i18n
图片画廊基于 ekko-lightbox 与 figure shortcode 实现
提供 src/js 与 src/scss 源码,可通过 yarn watch / yarn build 定制样式与脚本
模板详细介绍
Chunky Poster 是一个 Hugo 博客主题,使用 Bootstrap 4 构建,整体结构与设计参考 Prisma 博客。主题面向以文章内容为主的个人或团队博客,提供多作者、图片处理、基础 i18n、Prism 代码高亮、LazyLoad、Commento 评论和图片画廊等功能。
作者体系通过 Hugo 的 author 分类法实现:在配置中启用 author taxonomy,用 hugo new authors/john-doe/_index.md 创建作者页,在作者元数据中配置 twitter 与 images,图片作为作者页面资源存放,列表中的第一张图用作头像和作者页展示;文章 front matter 中通过 authors 字段关联作者。内容图片统一放在 content/images 下,并创建带 headless: true 的 content/images/index.md,文章 front matter 的 images 字段引用图片路径,列表中的第一张图作为文章封面。
代码高亮通过 params.prismJS 配置,设置 enable 为 true 并可选 theme;评论通过 params.commento 配置,设置 enable 与 url;分享功能由 params.share 控制,也可在单篇文章 front matter 中设置 share: false 关闭。图片画廊基于 ekko-lightbox 与 figure shortcode,属于该库的简单实现。
主题的样式与脚本需要自行构建:仓库提供 src/js/app.js 作为 JavaScript 入口,src/scss/style.scss 作为 SCSS 主入口,Bootstrap 变量可在 _variables.scss 中覆盖,主题样式位于 src/scss/chunky-poster.scss;开发时运行 yarn watch,生产构建运行 yarn build。仓库包含 .nvmrc,便于使用 nvm 管理 Node 版本。
主题以 MIT 许可发布,可免费使用、修改、商用和分发该版本代码,分发时需保留版权声明与完整 MIT 许可声明。演示图片来自 Unsplash 与 Freepik,字体、图标等第三方素材需按各自许可单独核对。
适合你的项目吗?
适用场景
- 搭建以文章列表和文章详情为主的个人博客
- 需要多位作者共同发文并展示作者头像与作者页的团队博客
- 希望在文章中使用 Prism 高亮代码块的技术博客
- 需要为文章设置封面图并使用 lightbox 图片画廊的站点
- 使用 Commento 作为评论系统并需要按文章控制分享开关的博客
适合人群
- 熟悉 Hugo 并愿意通过 config.toml 与 front matter 配置站点的用户
- 需要多作者与作者页结构的博客维护者
- 希望基于 Bootstrap 4 与 SCSS 自行定制样式的开发者
- 接受使用 yarn 构建前端资源的项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后参考 exampleSite/config.toml 配置 Hugo 站点。
- 2
作者页通过 hugo new authors/<name>/_index.md 创建,并在配置中启用 author 分类法。
- 3
内容图片放在 content/images 下,并创建带 headless: true 的 content/images/index.md。
- 4
Prism、Commento 与分享功能分别在 params.prismJS、params.commento 与 params.share 中配置。
- 5
定制样式或脚本时运行 yarn watch 开发、yarn build 生成生产资源;仓库提供 .nvmrc。
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 评论功能依赖第三方服务 Commento,需自行注册并配置其服务 URL 才能启用;不配置则无评论功能。
- 图片画廊依赖第三方库 ekko-lightbox,该库及其资源需按其自身许可单独核对使用。
- 演示图片来自 Unsplash 与 Freepik,需遵守各自平台许可,不可直接视为随主题 MIT 授权。
- 样式与脚本需通过 yarn 构建(yarn watch / yarn build)后才能用于生产,需具备 Node/yarn 环境。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Configure [Commento](https://commento.io/) under `[params.commento]`. Set `enable` to `true` and add the URL at `url`:
README 原文
The image gallery feature uses the [`ekko-lightbox`](https://github.com/ashleydw/lightbox/) and `figure` shortcode.
README 原文
Images from [Unsplash](https://unsplash.com/) and [Freepik](https://www.freepik.com/).
README 原文
https://github.com/puresyntax71/hugo-theme-chunky-poster/blob/master/LICENSEhttps://github.com/puresyntax71/hugo-theme-chunky-poster/blob/master/README.mdFor production, you can run `yarn build` for the assets to be updated.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 81 / 100
- 技术栈
- Hugo · HTML
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2023-01-05
- 截图检查日期
- 2026-10-01
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 0652b8e8b94354b382c4c089838a2a67308ca0e09846b178f17db9dc012e0afb
2026-10-01T14:28:21.554Z
来源文件 / 仓库# Chunky poster
[](https://circleci.com/gh/puresyntax71/hugo-theme-chunky-poster/tree/master)
A simple, bootstrap 4 based blog theme. The structure and design is based on the [Prisma blog](https://www.prisma.io/blog/).
[Demo](https://hugo-theme-chunky-poster.netlify.com) | [Demo 2](https://themes.gohugo.io/theme/hugo-theme-chunky-poster)
# Screenshot

# Features
* Multi-author
* Image processing
* Basic i18n
* Prism
* LazyLoad
* Commento
* Image gallery
# Usage
```shell
git clone https://github.com/puresyntax71/hugo-theme-chunky-poster.git
```
Check out the configuration at [`exampleSite/config.toml`](exampleSite/config.toml) for configuring your Hugo site.
## Authors
The authors structure is based on this [blog post](https://www.netlify.com/blog/2018/07/24/hugo-tips-how-to-create-author-pages/).
1. Add the taxonomy ["author"](exampleSite/config.toml#L28).
2. `hugo new authors/john-doe/_index.md`
3. Configure the author metadata `twitter`.
4. Configure the author metadata `images`. First image on the list will be used as the avatar and on the profile page. Images are page resources under the author e.g. `content/authors/john-doe/image.png`.
5. Assign the author to a content:
```yaml
---
authors: ["John Doe"]
---
```
## Content images
The images structure is based on this [blog post](https://forestry.io/blog/how-to-use-hugo-s-image-processing-with-forestry/).
Upload the images that will be used on content pages under `content/images` and create the file `content/images/index.md` with the front matter:
```yaml
---
headless: true
---
```
Set the path to the image in a `post` content under the `images` property:
```yaml
---
images: ["/images/image.png"]
---
```
The first image on the list will be used as the "cover" image on a post.
## Prism
Configure [Prism](https://prismjs.com/) under `[params.prismJS]` and set `enable` to `true`. Change the theme under `theme`.
```toml
[params]
[params.prismJS]
enable = true
theme = "okaidia"
```
## Commento
Configure [Commento](https://commento.io/) under `[params.commento]`. Set `enable` to `true` and add the URL at `url`:
```toml
[params]
[params.commento]
enable = true
url = "https://somename.commento.io"
```
## Share
Enable sharing under `params` with `share` set to `true` and disable per-post sharing by setting `share` to `false` in the front matter.
```toml
[params]
share = true
```
```yaml
---
share: false
---
```
## Image gallery
The image gallery feature uses the [`ekko-lightbox`](https://github.com/ashleydw/lightbox/) and `figure` shortcode. This is just a simple implementation of the lightbox gallery feature from the library.
# Customization
Fork the project and run `yarn watch` during development.
> The project has an `.nvmrc` if you wish to use [`nvm`](https://github.com/nvm-sh/nvm).
The application javascript file is located at `src/js/app.js`.
For customizing SCSS, the main entrypoint is at `src/scss/style.scss`. Bootstrap variables can be overridden in the `_variables.scss` file. The theme's styles are located at `src/scss/chunky-poster.scss`.
For production, you can run `yarn build` for the assets to be updated.
# Credits
* [Victor Hugo](https://github.com/netlify-templates/victor-hugo)
* [hugo-theme-even](https://github.com/olOwOlo/hugo-theme-even)
* [Blank](https://github.com/vimux/blank/)
* [CleanWhite](https://github.com/zhaohuabing/hugo-theme-cleanwhite)
Images from [Unsplash](https://unsplash.com/) and [Freepik](https://www.freepik.com/).
# License
This theme is released under the [MIT license](LICENSE).
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

hugo-PaperMod
PaperMod 是 Hugo 生态里知名度较高的主题之一,定位很明确:给博客和轻量作品集站点提供一套干净、响应式的阅读界面。
Hugo · 作品集

LoveIt
❤️A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题
Hugo · 博客

hugo-coder
A minimalist blog theme for hugo.
Hugo · 博客

blowfish
Personal Website & Blog Theme for Hugo
Hugo · 博客

hugo-paper
🪺 A simple, clean, customizable Hugo theme
Hugo · 博客

hextra
Hextra 是一个 Hugo 主题,定位在文档站与博客之间:既提供侧边栏导航、目录、面包屑、分页这类文档站结构,也能承载博客内容。
Hugo · 文档
