Goal: To replicate the old tags page I had in Jekyll. Here is a screenshot of that page.
Set up tags
Enable taxonomies and add “tags” as a taxonomy in the config.toml
. Additionally, I’m choosing not to render taxonomy pages, because I don’t want individual tag pages.
= [
{ = "tags", = false}
]
Add Zola-style tags to blog posts
Use the correct syntax in your frontmatter. Make sure to put it after any other frontmatter fields.
+++
= 2023-08-17
= "Setting up blog tags in Zola"
[]
= ['zola', 'webdev']
+++
I wrote a Python script to convert my YAML frontmatter the above format.
My hacked-together Python script
# this particular line is specific to my blog posts
= -1
=
# already using TOML
break
# after processing frontmatter
# after building frontmatter dict,
# print out TOML-formatted frontmatter
= + 1
# within YAML frontmatter
= + 1
=
=
=
= +
= + +
=
= +
=
continue
Display tags on the blog post pages. Modify the template to include printing tags.
Tags:
<a href="/tag-listing#{{ tag | slugify }}"></a>
Create a page for the tag listing
Create templates/tags.html
.
<header>
<h2>
Tags
</h2>
</header>
Create content/tag-listing.md
.
+++
= "Tags"
= "tags.html"
+++
List posts under each tag
{% for tag in blogtags.items %}
{{ tag.name }}
{% for post in tag.pages %}
{{ post.date }}
–
{{ post.title }}
{% endfor %}
{% endfor %}
Create a tag cloud
There might be a more efficient way to do this; I just hacked this together with what I know of Tera.
<span>
<a
href="#{{ tag.name | slugify }}"
style="font-size: calc(1rem + ({{ tag.page_count }} - {{ lowest_weight }}) / ({{ highest_weight }} - {{ lowest_weight }}) * 1rem);"
></a>
</span>
Et voilà! View the final result.
References: