Add tags to post summaries of lithium themed hugo blogdown website

Question

Using the guidance linked to at Add template for taxonomies to Blogdown default theme I was able to add tags to show-up at the top of my posts and create a /tags page -- for my lithium themed hugo blogdown website.

How can I have the post tags show-up in the summaries of my lithium themed site (i.e. so they show-up on the home page)?

(https://www.bryanshalloway.com/ ; source code on github)

Answer 1

First, add the following HTML to your layouts/_default/list.html template, inside the <article> tag and after the <div class="summary">.

{{ with (.GetTerms "tags") }}
    <div class="tags">
    {{ range . }}
      <div class="tag">
        <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
      </div>
    {{ end }}
    </div>
{{ end }}

Then to make it look better, you can add some CSS similar to this:

.tags {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
}
.tags .tag {
    /* override the `margin: auto;` rule which applies to all divs and iframes,
     * defined in main.css */
    margin: 0;

    font-size: small;
}

Here is how it looks with the code I provided:

example image