How to set up easy inclusion of an HTML snippet?

Support
1

I’m trying to set up Zola to enable me to repeatedly include little bits of HTML (e.g. <span class="blue-tag">blue</span>). I thought maybe I could define these as variables and then use {{ blue_tag | safe }} in my Markdown, but this directive isn’t evaluated.

Is the reason for this just that directives like this are only usable in templates? Is there any way to do this sort of simple macro expansion from Zola Markdown sources?

2

Which version of Zola are you using? In 0.23 the whole content is a template so you can just use components for that.

3

My advice: just invent custom HTML tags.

It is not in the HTML spec, so it will fail HTML validators but it works in all browsers. And you can use it everywhere, not only Zola.

Define some CSS the way you want (templates, css files, even inline in the MD)

<style>blue {color:blue;}</style>

And then you can use it <blue>as simply as that!</blue>, this is even more readable and less verbose than shortcodes.

Important points:

  • It works with search engines: Google for instance interprets them as span elements.
  • It does not impair your SEO
  • Actually, you can make them valid by just adding an hyphen in the name: e.g . Cf Custom Elements spec
  • If needed, You can ensure they are accessible by explicitely adding ARIA properties (no need to add these by hand, some JS code can do it)
<!-- Decorative or custom text emphasis -->
<blue role="text" aria-label="Highlighted note">Important information</blue>

<!-- Custom interactive component -->
<blue role="button" tabindex="0" aria-pressed="false">Toggle Option</blue>
4

Ah, 0.15.3 so I could use an upgrade. I’ll do that and then follow the Tera documentation here to get going with components. Thanks!