Matt Langford

Adding Categories to Individual Posts in Micro.blog

Micro.blog allows you to assign categories to posts like most platforms. However, most themes don’t display these categories on a per post basis. Thanks to @bix, I was able to remedy this in a way that works perfectly for me. Details below.

Due to a bug with micro.blog, some of the code snippets below show "& # 1 2 3 ;" instead of the proper opening bracket, the opposite of }. Edit the code with that in mind.

Steps to Add Categories

Once you’ve chosen your them, you can choose to edit custom theme on the design settings page. If you haven’t already done it, create a new theme after clicking edit (the terminology is a little confusing, but stick with me).

Next, click the New Template button and create a file with the path set as layouts/partials/post-categories.html and insert the following code:

{{ if .Params.categories }}
<section class="post-categories">
<p>
&#123;&#123; range sort .Params.categories }}
<a href="&#123;&#123; "/categories/" }}&#123;&#123; . | urlize }}">&#123;&#123; . }}</a>
&#123;&#123; end }}
</p>
</section>
&#123;&#123; end }}

Save that page. By itself, it doesn’t really do much, but when you insert it into other parts of your theme, it’ll pull the categories for any individual post and display them. To insert it, you’ll want to edit (don’t create a new theme file this time) layouts/post/single.html (individual posts) and layouts/partials/post-item.html (lists of posts such as home page). Insert the following where you would like the categories to display on those pages:

&#123;&#123; partial "post-categories.html" . }}

If you do this properly, the final automatic output into your theme once you hit publish will be:

<section class="post-categories">
<p>
<a href="Link to Category 1">Category 1 Name</a>
<a href="Link to Category 2">Category 2 Name</a>
<a href="Link to Category 3">Category 3 Name</a>
</p>
</section>

Obviously, the links and names will be based on the categories you’ve set up for your site. You can then style the elements by editing your css. Feel free to dig into my site to see how I decided to style mine.