Learning to be Giant.

Use Tags and Categories in your Jekyll based Github Pages without plugins

|

Jekyll provides native support for categories and tags. Although the method described here is still valid, but the native method is recommended. This blog currently is using the natively supported method. Click here to see the source code for this blog. To see the code for the method described in this post, click here.

It’s been quite annoying that Github Jekyll does not support tags nor categories, which are common funtionalities in a modern blog application. There are several workarounds, but all these methods require much human effort whenever you want to add a new tag. Therefore, I implemented a tag/category.

Step 1: Change the metadata of your post

The first thing to do is to change the metadata of your post. You should add two fields: Category and Tags.

---
layout: post
title: Use Tags and Categories in your Jekyll based Github Pages
category: Dev
tags: [web, jekyll]
---

Step 2: Create your category and tag page

I created category.html and tag.html under /blog/ directory. Add following codes to tag.html:


---
layout: default
title: Tag
---

{% comment %}
=======================
The following part extracts all the tags from your posts and sort tags, so that you do not need to manually collect your tags to a place.
=======================
{% endcomment %}
{% assign rawtags = "" %}
{% for post in site.posts %}
	{% assign ttags = post.tags | join:'|' | append:'|' %}
	{% assign rawtags = rawtags | append:ttags %}
{% endfor %}
{% assign rawtags = rawtags | split:'|' | sort %}

{% comment %}
=======================
The following part removes dulpicated tags and invalid tags like blank tag.
=======================
{% endcomment %}
{% assign 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 %}

The above codes extract all your tags from you posts. In this way, you need not to manually collect those tags, which can require a lot of human effort.

Then you can add the follow code snippets to proper places:


{% comment %}
=======================
The purpose of this snippet is to list all the tags you have in your site.
=======================
{% endcomment %}
{% for tag in tags %}
	<a href="#{{ tag | slugify }}"> {{ tag }} </a>
{% endfor %}


{% comment %}
=======================
The purpose of this snippet is to list all your posts posted with a certain tag.
=======================
{% endcomment %}
{% for tag in tags %}
	<h2 id="{{ tag | slugify }}">{{ tag }}</h2>
	<ul>
	 {% for post in site.posts %}
		 {% if post.tags contains tag %}
		 <li>
		 <h3>
		 <a href="{{ post.url }}">
		 {{ post.title }}
		 <small>{{ post.date | date_to_string }}</small>
		 </a>
		 {% for tag in post.tags %}
			 <a class="tag" href="/blog/tag/#{{ tag | slugify }}">{{ tag }}</a>
		 {% endfor %}
		 </h3>
		 </li>
		 {% endif %}
	 {% endfor %}
	</ul>
{% endfor %}

Now you have a tag page that have all your tags displayed with links to the concerning post.

Step 3: Add tags to your index page and posts

Now you can add tags to your index page and posts. It’s similar to the code snippet 2 above which lists all the tags.

Live demo

This site is a live demo you can refer to. Meanwhile, feel free to folk me on github or just check the codes relavant to this article.

Disclaimer: This is a personal weblog. The opinions expressed here represent my own and not those of any entity with which I have been, am now, or will be affiliated.

Comments