How to display tags/categories above blog posts

[gabriel-berardi]

Hello everyone,

I have been trying to display the tags or categories list above the list of blog posts, so that the user could easily filter the displayed articles based on their tags or categories.

Specifically, I want to achieve this:

I have tried to take the following snippet from terms.html and put into list.html, but it did not work:

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup> </a>
    </li>
    {{- end }}
    {{- end }}
</ul>

Has anyone done this or could point me to some solution for this? Is there a better way to do this?

Much appreciated! 🙂

[gabriel-berardi]

Actually just figured out how to achieve this - posting here in case anyone comes across this in the future.

The approach above does not work because the code references variables that are not available on the blog page.

I added the following code to lists.html:

{{/* Add the tags above list of blog posts */}}
<h2>Categories</h2>
<br/>
<ul class="terms-tags">
  <li>
    <a href="/blog/">All Articles<sup><strong><sup></sup></strong></sup> </a>
</li>
  <li>
      <a href="/categories/data-analytics/">Data Analytics <sup><strong><sup></sup></strong></sup> </a>
  </li>
  <li>
    <a href="/categories/another-category/">Another Category <sup><strong><sup></sup></strong></sup> </a>
</li>
</ul>
<br/>
<h2>Articles</h2>
<br/>

So basically, I am just using the class for the tags and hard-code the categories for my use case. If you don't have too many categories, this works fine.