Michael Daniel Kuc

Software Engineer

Zola's Embeddable Components

Zola expands upon Markdown's simplistic mark-up functionality and presents the ability to embed complex, configurable HTML components inline with your content.

Some of the existing shortcodes already available are:

  • {{ youtube(id="dQw4w9WgXcQ", autoplay=true, class="youtube") }}

For adding a video hosted by YouTube to your content.

  • {{ vimeo(id="124313553", class="vimeo") }}

For adding a video hosted by Vimeo to your content.

  • {{ gist(url="https://gist.github.com/Keats/e5fb6aad409f28721c0ba14161644c57", class="gist") }}

For adding a GitHub Gist to your content.

But see the official documentation to see the conclusive list.

To build your own, you simply need to add the template to the templates/shortcodes subdirectory, creating the shortcodes folder if it doesn't already exist.

For example, to create a shortcode quote, you would create the file templates/shortcodes/quote.html, in which you could stick:

<div class="quote {%- if capitalised %} capitalised {%- endif %-}">
	{{ body }}
</div>

Here, you could use the new quote shortcode with:

And it has been said:

{% quote(capitalised=true) %}
that most statistics are made up.
{% end %}

This can obviously help reduce the amount of copy-and-pasting involved in using a consistent set of components across your content.