How can I add tags to a Jekyll blog?
Here I show you how to add tags to your Jekyll blog. You’ll be able to write posts like:
---
title: "How can I add tags to a Jekyll blog?"
tags: ["programming", "jekyll"]
---
Here is your post content ...For each tag like programming,
you will have a page that lists all posts with that tag
at /tag/programming.
To create these dynamic pages, you need a Jekyll “generator” plugin.
Put the following plugin at _plugins/tags.rb:
module Jekyll
class TagPageGenerator < Generator
safe true
def generate(site)
tags = site.posts.docs.flat_map { |post| post.data['tags'] || [] }.to_set
tags.each do |tag|
site.pages << TagPage.new(site, site.source, tag)
end
end
end
class TagPage < Page
def initialize(site, base, tag)
@site = site
@base = base
@dir = File.join('tag', tag)
@name = 'index.html'
self.process(@name)
self.read_yaml(File.join(base, '_layouts'), 'tag.html')
self.data['tag'] = tag
self.data['title'] = "Tag: #{tag}"
end
end
endThe above plugin uses a template at _layouts/tag.html.
Here’s a minimal example of that layout:
<!doctype html>
<html>
<head>
<title>Tag: #{{page.tag}}</title>
</head>
<body>
<h1>Tag: #{{page.tag}}</h1>
<ul>
{% for post in site.posts %}
{% if post.tags contains page.tag %}
<li><a class="post" href="{{ post.url }}">{{ post.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</body>
</html>Finally, link to those tag pages from your blog posts.
If your posts use _layouts/default.html,
this could look like:
<!doctype html>
<html lang="en">
<head>
<title>{{page.title}}</title>
</head>
<body>
<h1>{{page.title}}</h1>
{{content}}
<p>
Tagged
{% for tag in page.tags %}
<a class="post" href="/tag/{{tag}}">#{{tag}}</a>{% unless forloop.last %}, {% endunless %}
{% endfor %}
</p>
</body>
</html>This page copyright James Fisher 2019. Content is not associated with my employer.
Granola