zola shortcodes
Table of contents
Since it feels like it’s hard to find a lot of good shortcode templates online for Zola, I figured that I’d list some that I created for use with my website! A lot of them are pretty one note, not super complex, but I figure it might be of use to someone.
This page will be occasionally updated to add more as I work on the website and find good use cases for more shortcodes.
Of course, the best reference to use is the documentation on Zola’s website.
audio element
shortcode
<audio
{% if controls %} controls {% endif %}
{% if preload %} preload="{{preload}}" {% endif %}
{% if controlslist %} controlslist="{{controlslist}}" {% endif %}
{% if type %}type="{{type}}"{% endif %}>
<source src="{{src}}">
Your browser does not support playback of this audio.</audio>
example usage
{{audio(
src="example.mp3",
type="audio/mp3",
preload="auto",
controls=true, // if omitted, will not show controls in the final render
controlslist="noremoteplayback"
)}}
All of the attributes for the audio element can be found on Mozilla Developer Network (MDN) documentation.
details dropdown
shortcode
<details {% if open %} open {% endif %}>
<summary>{{summary}}</summary>
{{body | safe}}
</details>
example usage
{% details(summary="details dropdown", open=true)}
- foo<br>
- bar
{% end %}
result
details dropdown
- foo- bar
Unfortunately, this implementation does not allow for formatting using Markdown, which is why <br> was used.
raw html
This method will not allow for putting code blocks inside either, so for that particular usage case, raw HTML within Markdown will still suffice. Note that there should be one empty line between the call of <details> or <summary> and the code block.
example usage
<details>
```txt
{% details(summary="details dropdown", open=true)}
- foo<br>
- bar
{% end %}
```
</details>
result
details no shortcode
{% details(summary="details dropdown", open=true)}
- foo<br>
- bar
{% end %}