Use Jekyll and Bootstrap to create a tag-area with links to pages showing only the articles of the current tag

For my personal blog, which in based on Jekyll, I created a tag-area on the top of the homepage so that the visitors are able to navigate through the different articles in a tag-page by clicking on the tag that they are interested in. With this article I would like to present you the code of the tag-area:

1
2
3
4
5
6
7
<div class="well well-sm">Filter the articles:
    {% for tag in site.tags %}
        <a class="btn btn-warning" type="button" href="tags/{{ site.baseurl }}{{tag | first }}">
            {{ tag | first }} <span class="badge">{{ tag | last | size }}</span>
        </a>
    {% endfor %}
</div>

• The site.tags property returns a list of all tags that are defined in the posts of your blog. Each item of the list contains two properties. The first is the name of the tag and the second is the number of tagged posts. We can reach the number of tagged posts by using the size property.
• For each tag I create a link which has the design of a button by using the btn class from Bootstrap). To construct the URL of the tag-page I use the first property of the item.
• Then I use from Bootstrap the badge class to style the number of tagged posts and as text of the link I use the name of the tag.
• The complete area is styled using the well class from Bootstrap.

The final result looks like that: