HomeBlog
Jekyll Tag Searching - 羡辙杂俎
2014.05.18 12:19:00
Jekyll Tag Searching

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: none for all except posts with the searching tag. We can get the searching tag in URL query string using JavaScript.

#Display Posts Grouped by Tags

1. Create a page called tags.html.

Tags can be then searched like http://.../tags/?tag=css.

2. Get all the tag names in site.tags.

You’d better use - instead of space in your tag names. Otherwise, if you have a tag named Hello World, then site.tags contains Hello and World. To avoid this, use Hello-World as tag name instead.

3. For each tag, list all the posts with that tag name.

Here we create a <div></div> for each tag with id and class so that it can be manipulated more easily later.

4. Hide all those tag-posts.

Use CSS to set display: none; to .tag-posts.

5. Get query string using JavaScript.

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

6. Show posts with the searching tag.

window.onload = function() {
    var tag = getParameterByName('tag');
    if (tag && document.getElementById('tag-' + tag)) {
        document.getElementById('tag-' + tag).style.display = 'block';
        document.getElementById('tagTitle').innerHTML = tag;
    } else {
        document.getElementById('tagTitle').innerHTML = 'Illegal Tag Query';
    }
};

Now, you can search tags like /tags?tag=Jekyll.

#Conclusion

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.

#Reference

博文对你有帮助吗?如果有的话,要不要送我一本书呢?:heart_eyes:

微信公众号“羡辙部落格”(xianzheblog)提供本站优质非技术类博文推送。

Creative Commons License
Every blog post in this site by Wenli Zhang is licensed under a CC 3.0 License, based on a work at Github. You can see the source code of this blog site at github.com/Ovilia/blog.

Comments

comments powered by Disqus