Adding tags to your Jekyll site

Github pages does not support rubygem jekyll-tagging so following this blog this work, we need to get our hands dirty.

1. Add tags

The tags entry should be added to teach of the .md files header section, like the following:

---
layout: post
title: Jekyll Tags on Github Pages
description: blablabla
tags: jekyll blog github-page
---

2. Collect tags

We need to collect the tags we just wrote in the md file, to achieve this, add a new html file called collecttags.html to _includes folder.

{% assign rawtags = "" %}
{% for post in site.posts %}
  {% assign ttags = post.tags | join:'|' | append:'|' %}
  {% assign rawtags = rawtags | append:ttags %}
{% endfor %}
{% assign rawtags = rawtags | split:'|' | sort %}

{% assign site.tags = "" %}
{% for tag in rawtags %}
  {% if tag != "" %}
    {% if tags == "" %}
      {% assign tags = tag | split:'|' %}
    {% endif %}
    {% unless tags contains tag %}
      {% assign tags = tags | join:'|' | append:'|' | append:tag | split:'|' %}
    {% endunless %}
  {% endif %}
{% endfor %}

This liquid script creates the list called site.tags.

3. Execute the collection

To enable Jekyll to use collecttags.html, we need to add the following lines to _includes/head.html:

{% if site.tags != "" %}
  {% include collecttags.html %}
{% endif %}

Anywhere between <head> and </head> should be fine.

4. Display the tags of a post

To actually show the tags in the blog posts, add the following to _layout/post.html:

<p> <span>
  {% for tag in page.tags %}
    {% capture tag_name %}{{ tag }}{% endcapture %}
    <a href="/tag/{{ tag_name }}"><code class="highligher-rouge" style="color:#969595;border-color:hsla(0, 0%, 59%,0.6)"><nobr>{{ tag_name }}</nobr></code>&nbsp;</a>
  {% endfor %}
</span> </p>

You can modify the style by your choice, the default is to inherent the style of the inline highligher-rogue class.

I’ve decide to put this section inside teh article-header after artilce_title.

5. Generate the tag page

The tag page is a page that shows all the posts of the same tag. For a preview of what this means, click the blog tag at the top of this page.

To add the tag page to the blog, simply add another html file at _layouts/tagpage.html:

---
layout: default
---
<div class="post">
<h1>Tag: <code class="highligher-rouge" style="color:#969595;border-color:hsla(0, 0%, 59%,0.6)"><nobr>{{ page.tag }}</nobr></code></h1>
<ul>
{% for post in site.tags[page.tag] %}
  <div class="post_title">
    <li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title}}</a>
    <span class="date">{{ post.date | date: "%-d %b, %Y" }}</span></li>
  </div>
{% endfor %}
</ul>
</div>
<hr>
{% include tag_cloud.html %}
<hr>
{% include author.html %}
<hr>

Again, we can modify the style of how these tags are shown.

6. Automatic tag page creation

Using the script created by Long Qian, we can automatically scan the _post directory and find all tags, then generate the tags pages needed. But first, we need to create a new directory in root called tag.

One just have to be careful to run this script before pushing to Github.

The tag cloud is a selection of tags displayed at the bottom of the tag page. (as you may’ve alreay noted, I have a liquid including a page called tag_cloud.html).

For this to work, we need to add another html page at _includes/tag_cloud.html:

<h2>All tags</h2>
{% capture temptags %}
  {% for tag in site.tags %}
    {{ tag[1].size | plus: 1000 }}#{{ tag[0] }}#{{ tag[1].size }}
  {% endfor %}
{% endcapture %}
{% assign sortedtemptags = temptags | split:' ' | sort | reverse %}
{% for temptag in sortedtemptags %}
  {% assign tagitems = temptag | split: '#' %}
  {% capture tagname %}{{ tagitems[1] }}{% endcapture %}
  <a href="/tag/{{ tagname }}"><code class="highligher-rouge" style="color:#969595;border-color:hsla(0, 0%, 59%,0.6)"><nobr>{{ tagname }}</nobr></code></a>
{% endfor %}

That’s it, you are all set!