What will you learn in this post?
This post introduces how to achieve searching tags with Jekyll, without using a Jekyll Plugin.
Since Jekyll is a static Website generator, which means the pages are already there before you request, it is hardly possible to for Liquid to get the query string in URL. However, we can use some tricks to make it looks like so.
The basic idea is to display all posts grouped by tags, and then use CSS
#Display Posts Grouped by Tags
Tags can be then searched like
You’d better use
- instead of space in your tag names. Otherwise, if you have a tag named
Hello World, then
World. To avoid this, use
Hello-World as tag name instead.
Here we create a
<div></div> for each tag with
class so that it can be manipulated more easily later.
Use CSS to set
display: none; to
Now, you can search tags like
Full code is available at GitHub.
This is an easy way to achieve searching tag for static Jekyll. One disadvantage is that a full list of all posts grouped by tags needs to be loaded whenever a tag is searched. This is not so good when blog posts become large enough. However, this is by far the simplest implementation I can think of.
StackOverflow: An easy way to support tags in a jekyll blog
View All Posts