Hugo Short Codes

Short Codes

Add a .html file into your $root/layouts/shortcodes/somehtml.html Then you can call that shortcode and it will do whatever that included html says to do. For example all of my site indexes automatically list all folders and files with a shortcode. You could use advertiser blocks, etc too.

Sample Short Code (Auto Indexes)

Here is a sample shortcode file I’m using to create all of my indexes. It sorts by weight, a parameter in the front matter:

<!-- list all subcategories (sections) in this directory -->
{{ $subcategories := where .Page.Pages "Kind" "section" }}
{{ $sortedSubcategories := sort $subcategories "Params.weight" }}
{{ if $sortedSubcategories }}
    <h3>Subcategories of {{ .Page.Title }}:</h3>
    <ul>
        {{ range $sortedSubcategories }}
            <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
        {{ end }}
    </ul>
{{ end }}

<!-- list all articles (regular pages) in this directory -->
{{ $articles := where .Page.Pages "Kind" "page" }}
{{ $sortedArticles := sort $articles "Params.weight" }}
{{ if $sortedArticles }}
    <h3>Articles, Tips, Tricks in the {{ .Page.Title }} Category:</h3>
    <ul>
        {{ range $sortedArticles }}
            <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
        {{ end }}
    </ul>
{{ end }}

Add Shortcodes to all Pages via Script

And here is the bash script that I used to add the shortcode to all of the files in my wordpress dump.

#!/bin/bash

# Path to your Hugo content directory
CONTENT_DIR="/home/james/site.grimoire.jamesfraze/content"

# Function to append shortcode to _index.md files
append_shortcode() {
  for i in $(find "$CONTENT_DIR" -name "_index.md"); do
    echo "$i"
    # I added the extra | because I cannot display shortcode within code
    echo -e "\n{|{< jameslist >}|}" >> "$i"
  done
}

# Call the function
append_shortcode

Short code to render HTML

HTML and Markdown can work together, but doing it gracefully was harder. Here is a shortcode to render html that can be put that the beginning and end of any static html that you want to actually render instead of display:

<!-- raw html -->
{{.Inner}}

And here is an example of using that short code:

{|{< rawhtml >}|}
<div id="twocol_div">
  <div class="inner-container">

    You would not use the pipes "|" at all.  I had to add them to the markdown to explain and render properly.
    Remove the | from the rawhtml short code, that's not how short codes normally look (the pipes are added to work with markdown only)

  </div>
</div>
{|{< /rawhtml >}|}