When I started using Hugo, I noticed a lack of plugins or shortcodes for lists of related or featured posts. Coming from the world of digital-marketing / content writers - I know it’s valuable to list: related posts, featured content, content in a series for your readers.
Shortcodes allow you write a code fragment in your markdown content, which then can embed images, content, forms, etc to be included - without the need to write lots of HTML or scripts.
In this article, you will
- Install the shortcode
- Learn to use
- Test and try it
- Resolve any issues you found
Shortcodes are saved to either of these locations
- your
/<Hugo project>/ Layouts / Shortcodes
- your
/<Hugo project>/ Theme / Theme Name / Layouts / Shortcodes
I prefer option 1 - in case you ever change the theme, you still have the shortcode
Install the Related Content in Series Shortcode
First we download the shortcode … then move the shortcode file to my preferred location
Here’s how to download ..
cd <your Hugo project>
git clone https://github.com/damien1/hugo-content-shortcodes.git
mv hugo-content-shortcodes/series.html layouts/shortcodes
Note: If you don’t have git / don’t want to use it - then go download this and unzip / save it to your preferred location
How to Use
In markdown content the shortcode looks like ..
{{< series >}}
The front matter must include a series
param for this to work and there are no options for this - it will list all articles in the series.
Test and Go …
So now you have the idea …
- Add the shortcode to one of your markdown files
- Check the
series
param is in the markdown file - Commit your changes to Git
- Run
Hugo server -D
and browse to http://Localhost to check every thing is work fine
If you find a problem
- do you have any series?
Tags:If you liked this please STAR it on Github.
Contact me today to find out how I can help you.