I decided this site really needed some tags to locate content. Originally I was going to separate electronics projects into another blog, but I decided it was better to put them all in one place. This meant that it needed something to locate posts better than looking through a history page.

In the process of searching for information about tags in Jekyll, I found a blog called Stochastic Stuff by Pavel Dmytrenko that had a great description of how add tags to a Jekyll site. As described, it uses CSS tags by Wouter Beeftink that are available on CodePen. Actually, this was my first expose to CodePen and I’m pretty impressed with the community.

I used the CSS, adjusting the size and color to match what I wanted. I also used some of the HTML and Liquid template language to generate a tags page. I decided that putting this all in a single tags page was enough for what I needed at this time.

I put the CSS in a separate SASS include file: _sass/_tags.scss.

/**
 * Site tags
 */


.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  background: steelblue;
  border-radius: 3px 0 0 3px;
  color: white;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 14px 0 16px;
  position: relative;
  margin: 0 5px 5px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 5px;
  position: absolute;
  width: 6px;
  top: 6px;
}

.tag::after {
  background: #fff;
  border-bottom: 10px solid transparent;
  border-left: 10px solid steelblue;
  border-top: 10px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: dimgray;
  color: white;
}

.tag:hover::after {
   border-left-color: dimgray; 
}

.tag:visited {
  color: white;
}

Then I added the import for it in css/main.scss. The last part of main.scss contains the import lines. Add an import for “tags” and don’t forget to add the comma after the previous entry.

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "syntax-highlighting",
		"tags"
;

Adding the tags is done within the post. In each post, in the front matter section, add this:

Tags: web jekyll

Then just add tag names. Use consistent names as much as possible. There is no master list of tags, you can just add any you want and Jekyll tracks them.

My menu pages are in _pages. I added a file called tags.md that is used to generate the tags page.

---
layout: default
title: Tags
permalink: /tags.html
menuname: Tags
ismenu: true
---

## Site Tags

<!-- Get the tag name for every tag on the site and set them
to the `site_tags` variable. -->
{% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}

<!-- `tag_words` is a sorted array of the tag names. -->
{% assign tag_words = site_tags | split:',' | sort %}

There are a total of {{ tag_words.size }} tags.

<!-- List of all tags -->
<ul class="tags">
  {% for item in (0..site.tags.size) %}{% unless forloop.last %}
    {% capture this_word %}{{ tag_words[item] }}{% endcapture %}
    <li>
      <a href="#{{ this_word | cgi_escape }}" class="tag">{{ this_word }}
        <span>({{ site.tags[this_word].size }})</span>
      </a>
    </li>
  {% endunless %}{% endfor %}
</ul>

<!-- Posts by Tag -->
<div>
  {% for item in (0..site.tags.size) %}{% unless forloop.last %}
    {% capture this_word %}{{ tag_words[item] }}{% endcapture %}
    <h2 id="{{ this_word | cgi_escape }}">{{ this_word }}</h2>
    {% for post in site.tags[this_word] %}{% if post.title != null %}
      <div>
        <span style="float: left;">
          <a href="{{ post.url }}">{{ post.title }}</a>
        </span>
        <span style="float: right;">
          {{ post.date | date_to_string }}
        </span>
      </div>
      <div style="clear: both;"></div>
    {% endif %}{% endfor %}
  {% endunless %}{% endfor %}
</div>

I added the tags page as a menu page. I’d like to make a tags side bar, but having a tags page is good enough for now.