I’ve been writing code for a long time. So once I find I am using very similar code in multiple places …
… the urge to be DRY - the Don’t Repeat Yourself principle - that discourages copy and paste or Clone and Modify development in favor of creating re-usable modules kicks in.
Hugo version 0.42 added the ability to use a composite of multiple themes in the form of theme components. Since this, my wife’s, and my home owner association’s web sites, all Hugo-based, were now sharing these responsive image generating partials and shortcodes it made sense to start defining those in a single sharable theme.
Step one was to create the required theme contents and skeleton
directory structure for a responsive component theme:
hugo new theme responsive
Step two was to git mv the layout partials and shortcodes from the websites'
own layout directory structure to that of the theme.
Step three: convert the responsive component theme into its own small git repo and enable that to be shared among each websites' individual project code.
Step four: Incorporate the now modular theme components into each website’s
local git repo. For that
I prefer to use git subrepo rather
than alternatives like git submodule or git subtree
git subrepo clone git@github.com:JonathanDoughty/hugo-responsive-components.git themes/responsive-components
Step five, along with step four repeated for each webite’s git repos: add
the new theme as a component theme in the website’s config.toml, before the
theme that provides the overall look and feel:
theme = ["responsive-components", "gohugo-theme-ananke"]
Since hugo added these capabilities I have made several such reusable components.
[*] With apologies for the reference to Jean Sheperd’s classic “Christmas Story” and Miss Shields.