A lightweight tagging system for blogs
The system I describe in this post is for small blogs with an index page that lists all posts. It’s essentially a filter on this list of posts, but to the user it seems like he navigates separate pages with a list of posts for each tag, that is, these “virtual” tag pages have their own heading, you can link to them, and use the back and forward buttons in the browser as expected. The advantage is that you don’t need to generate a separate static page for each tag, and the user doesn’t need to load a new page for each tag, so jumping from one tag to another is fast.1
If you follow a link to a virtual tag page, you are directed to the home page with a query parameter indicating the tag. In this case, for example, the “today I learned” tag: /?tag=TIL. The home page has a JavaScript snippet that parses the query parameter and filters the list of blog posts according to the tag parameter.2 It also sets a heading that contains the tag.
Let’s assume you see another interesting tag on the filtered page. A click on this tag applies the filter with the new tag and you instantly get another virtual tag page without reload. If the URL with the query string is not identical to the latest URL on the browser’s history stack, a new history state is pushed. To go back to the starting point, you can use the browser’s back button. The JavaScript snippet on the home page listens to the popstate event and re-applies the filter as long as we keep jumping from tag to tag.
