Hugo Shortcodes

By Adrian | October 27, 2019

This post I want to talk about how easy Hugo Shortcodes are to use and I’m totally kicking myself for not trying them out sooner!

I have a number of blog posts that have turned into a blog series and I wanted to have some kind of Table of Contents or reference in them and doing this manually each time, for every post just wasn’t sustainable. If I wanted to make a minor change, then every post would need updating, and there would be all this extra markdown in the post. Shortcodes change this and they are super simple to setup.

Steps to take

  • Within your Hugo structure on disk, ensure that the /layouts/shortcodes exists. If you need to create it, ensure the directory names are all lowercase.
  • Create a new shortcodename.html where shortcodename is the name you want to call within your markdown
  • Add the required HTML code you want to “inject” into a page

For example, I have created series-thehive-cortex-misp-toc.html with the following content

<p>
    <a href="/posts/2019/04/22/building-thehive/">Part I - Building TheHive</a><br>
    <a href="/posts/2019/04/24/setup-reverse-proxy-for-thehive/">Part II - Setup reverse proxy for TheHive</a><br>
    <a href="/posts/2019/04/29/building-misp/">Part III - Building MISP</a><br>
    <a href="/posts/2019/09/22/building-cortex/">Part IV - Building Cortex</a><br>
    <a href="/posts/2019/09/24/adding-analysers-to-cortex/">Part V - Adding analyzers to Cortex</a><br>
    <a href="/posts/2019/09/26/setup-reverse-proxy-for-cortex/">Part VI - Setup reverse proxy for Cortex</a><br>
    <a href="/posts/2019/09/27/integrate-thehive-and-cortex/">Part VII - Integrate TheHive and Cortex</a><br>
    <a href="/posts/2019/09/29/integrate-misp-to-thehive/">Part VIII - Integrate MISP to TheHive</a><br>
    <a href="/posts/2019/10/01/upgrading-thehive/">Part IX - Upgrading TheHive</a><br>
    <a href="/posts/2019/10/03/updating-misp/">Part X - Updating MISP</a><br>
    <a href="/posts/2019/10/05/upgrading-cortex/">Part XI - Upgrading Cortex</a><br>
    <a href="/posts/2019/10/12/wrapup-of-thehive-misp-cortex/">Part XII - Wrapup of TheHive, MISP, Cortex</a><br>
</p>
  • Within your target markdown post simply reference the shortcode with the following double curly braces syntax:
{{series-thehive-cortex-misp-toc}}

Whatever HTML code you specify in the shortcode will now be rendered in its place on next site rebuild which is a really neat trick.

Shortcodes would come in handy if you run a standard opening/closing text on your posts, or you have any text that you are duplicating in posts. Why I didn’t look into this sooner is beyond me. I’m probably only tapping 10% of Hugo’s abilities!

Search

Tags