Hugo Themes with Page Bundles and .Resources

Meta
1

If you know of any Hugo themes that use the new features please post them in this topic.

I think it would be useful to have a directory of themes that utilize Page Bundles and .Resources for users who are not familiar with these features and also for reference.

Also maybe there should be a new subsection tag for these kind of themes in the Hugo Themes repo.

Relevant Github Issue: https://github.com/gohugoio/hugoThemes/issues/342

2

Page bundles were added in v0.32, which released on December 31. Since that date, the following themes have been added to the themes repository:

When I search through the code of these repositories for ā€˜.Resourcesā€™, I donā€™t find any that uses that new feature. Perhaps you have more luck searching for page bundles features, but so far it seems that there isnā€™t a theme yet that uses such a feature.

Edit: and neither could find a mention of page bundles in their README files or when peaking in the /exampleSite/ folder.

3

From the themesā€™ perspective, ā€œ.Resourceā€ is the string to look for.

4

As to some just started theme stuff Iā€™ve been pondering on that uses .Resources:


5

I use all the latest templating conventions in my ā€œdebuggingā€ theme:

The theme is developed with a purpose of helping someone (me) better understand Hugo internals, and design templates the right way. Itā€™s not meant for final production.

Demo: https://hugo-sandbox.netlify.com/bundle-nesting/branch-bundle-1/

Few features:

  • Provides context dependent debug info on each page
  • Recognizes bundle types
  • Uses Resources and Image Processing
  • Use of baseof
  • Inline CSS using partial
  • Search using fuse.js
2 Likes
6

Version 3.7.0 of the After Dark theme adds a new feature called Post Images, enabling users to add responsive header images to post content. The theme update utilizes the following new Hugo features:

  • Image Processing for generation of responsive images using the srcset and sizes attributes.
  • Page Bundles together with Resources Metadata to enable config-driven post image generation.
  • Used in combination with lazysizes to produce low-quality image placeholders with blur-up.

See it in action here:

Reference to the After Dark docs for the ridiculously simple set-up.

3 Likes