HugoHTML博客

hugo-theme-chunky-poster — Hugo 博客模板

作者 puresyntax71

基于 Bootstrap 4 的 Hugo 博客主题,设计参考 Prisma 博客,支持多作者、图片处理、基础 i18n、Prism 代码高亮、LazyLoad、Commento 评论与图片画廊。

看看你的网站会是什么样

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

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

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

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

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

值得关注的模板亮点

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

01

基于 Bootstrap 4 构建,设计参考 Prisma 博客

02

通过 Hugo author 分类法支持多作者,作者头像取自作者页面资源的第一张图片

03

内容图片集中存放于 content/images,文章 front matter 的 images 列表首图作为封面

04

支持 Prism 代码高亮、LazyLoad、Commento 评论与基础 i18n

05

图片画廊基于 ekko-lightbox 与 figure shortcode 实现

06

提供 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,字体、图标等第三方素材需按各自许可单独核对。

HugoHTML博客

适合你的项目吗?

适用场景

  • 搭建以文章列表和文章详情为主的个人博客
  • 需要多位作者共同发文并展示作者头像与作者页的团队博客
  • 希望在文章中使用 Prism 高亮代码块的技术博客
  • 需要为文章设置封面图并使用 lightbox 图片画廊的站点
  • 使用 Commento 作为评论系统并需要按文章控制分享开关的博客

适合人群

  • 熟悉 Hugo 并愿意通过 config.toml 与 front matter 配置站点的用户
  • 需要多作者与作者页结构的博客维护者
  • 希望基于 Bootstrap 4 与 SCSS 自行定制样式的开发者
  • 接受使用 yarn 构建前端资源的项目

上手与定制指南

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

  1. 1

    克隆仓库后参考 exampleSite/config.toml 配置 Hugo 站点。

  2. 2

    作者页通过 hugo new authors/<name>/_index.md 创建,并在配置中启用 author 分类法。

  3. 3

    内容图片放在 content/images 下,并创建带 headless: true 的 content/images/index.md。

  4. 4

    Prism、Commento 与分享功能分别在 params.prismJS、params.commento 与 params.share 中配置。

  5. 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 原文

For production, you can run `yarn build` for the assets to be updated.

README 原文
https://github.com/puresyntax71/hugo-theme-chunky-poster/blob/master/LICENSEhttps://github.com/puresyntax71/hugo-theme-chunky-poster/blob/master/README.md

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

[![CircleCI](https://img.shields.io/circleci/build/github/puresyntax71/hugo-theme-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

![Chunky poster](https://github.com/puresyntax71/hugo-theme-chunky-poster/raw/master/images/screenshot-responsive.png)

# 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).
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。