Admonitions in Hugo
The problem
The ultimate goal of the Admonitions in CSS article was to create something that I can use relatively easily in for this blog site which is built using the Hugo staic site generator.
The research
I used the hugo-material-docs project as an exmple to build this component. The documentation for the usage is on the Adding Content / Admonitions page. In particular I used the layouts/shortcodes/note.html file as an example.
To build something that works (and is hopefully be more maintainable over time), I created a Hugo shortcode for the note shortcode.
<div class="admonition note">
<div class="title">{{ .Get "title" | default "Note" }}</div>
<div class="content">{{ printf "%s" .Inner | markdownify }}</div>
</div>
Things to note in this stanza:
- For the
<div class="title">element: - For the
<div class="content">element:- Use the .Inner
shortcode template variable to grab the text between the
notemarkers. - Use the markdownify function to interpret that context as markdown content.
- Use the Pipe feature to combine these functions.
- Use the .Inner
shortcode template variable to grab the text between the
No title!
Then to use it in a content page do this:
{{< note >}}
This is a note admonition using the default `title`.
{{< /note >}}
Which will create the following:
title.Fancy title!
To create an admonition with a title:
{{< note title="Custom Note" >}}
This is a note admonition using the default `title`.
{{< /note >}}
Which will create the following:
title.Tip, warning and important
I’ve also create short codes to match the other classes defined in the admonitions-in-css.md article.
title.title.title.title.title.title.And now a real tip:
layouts/shortcodes
directory.