When first trying Hugo, I thought shortcode was the same as partial where I can call it from a template but I was wrong.
A shortcode will not work in a template file (
.html file) but inside a content file (
It is a simple snippet that Hugo will render using a predefined template.
Why using shortcodes?
Hugo uses markdown for its contents. But let’s say we want to post something richer like adding a video or image gallery to a post. How do we do that? Putting raw HTML to a markdown content contradicts the simplicity of Markdown’s syntax. We would want to make our markdown contents as clean as possible. That’s why Hugo created shortcodes.
Built-in and custom shortcodes
Of course, there are cases that can’t be cover by Hugo’s built-in shortcodes, but we can create our custom shortcodes easily in Hugo.
Image gallery using a custom shortcode
Following is a result of my experiment displaying images in a post using a custom shortcode. The images below are from my sunset-instagram-photos. Hover to see the effect and click on the image to see it on Instagram.
You can find more about creating your own Hugo’s custom shortcodes here.