Render tag cloud on tags page (#37)

Tags page was quite boring and didn't use horizontal space efficiently.
This commit replaces plain tag list with tag cloud that gracefully scales
to any screen (Attila's responsive design principle is not violated).

Details:

- Tags are still sorted alphabetically
- Tags with more articles have bigger font size
- Number of font size steps is defined via TAG_CLOUD_STEPS variable.
  If that variable is not set or is zero, default value of 5 steps is
  used. Stylesheet is written to support up to 10 steps.
- Tag tooltip shows number of articles with that tag

There exists a separate plugin for tag cloud[1], but using it still
requires making changes to the theme. Trivial math calculations can be
done as easily in Jinja as in Python, so the dependency on external
package can and should be avoided.

Screenshots: before [[2]], after [[3]]

[1]: https://github.com/getpelican/pelican-plugins/tree/master/tag_cloud
[2]: https://i.imgur.com/ivZQIxi.png
[3]: https://i.imgur.com/fLNVKpj.png
This commit is contained in:
Vitaly Potyarkin 2018-09-29 11:01:14 +03:00 committed by Arul
parent 6de60cb90b
commit 84e7843aaa
3 changed files with 46 additions and 7 deletions

View file

@ -44,11 +44,16 @@
{% endblock header %}
{% block content %}
{% for tag, articles in tags|sort %}
<article class="post">
<div class="inner">
<a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})
</div>
</article>
{% endfor %}
{% set max_count = (tags|map('last')|map('count')|max) or 1 %}
{% set steps = (TAG_CLOUD_STEPS|default(5, true)) - 1 %}
<article class="post">
<div class="inner tag-cloud">
{% for tag, articles in tags|sort %}
{% set count = articles|count %}
<div class="tag tag-weight-{{ (count/(max_count/steps))|int + 1 }}">
<a href="{{ SITEURL }}/{{ tag.url }}" title="{{ count }} article(s) tagged '{{ tag }}'">{{ tag }}</a>
</div>
{% endfor %}
</div>
</article>
{% endblock content %}