How to display tags in the post list?

[yawnleashes]

Hi, I want to display tags in the post list (in layouts/_defaults/list.html), but I can't figure out how to do it.

I tried adding in the code used in layouts/_defaults/single.html for tags to the list.html file, but this fails to show the tags on the list page.

Do I need create a partial and insert it into the list layout file?

Could anyone help me out on this one, please?

[danielfdickinson]

You may be running into the use of -webkit-line-clamp mentioned in #604 . If that's not the issue, please report back.

[danielfdickinson]

I assume of course you are adding the tags above here:

hugo-PaperMod/layouts/_default/list.html

Line 65 in 60cbb31

{{- if not (.Param "hideMeta") }}

[darrow-olykos]

I too am looking to see if there is an easy way to enable this...
Not sure if what @danielfdickinson is mentioning would actually impact whether the "tag" shows up in this list

[mgopsill]

I achieved something along these lines like so.

Created layouts/partials/post_meta.html and updated it to:

{{- $scratch := newScratch }}

{{- if not .Date.IsZero -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'>%s</span>" (.Date) (.Date | time.Format (default "January 2, 2006" site.Params.DateFormat)))) }}
{{- end }}

{{- if (.Param "ShowReadingTime") -}}
{{- $scratch.Add "meta" (slice (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime))) }}
{{- end }}

{{- if (.Param "ShowWordCount") -}}
{{- $scratch.Add "meta" (slice (i18n "words" .WordCount | default (printf "%d words" .WordCount))) }}
{{- end }}

{{- $author := (partial "author.html" .) }}
{{- $tags := (partial "tags.html" .) }}
{{- if $tags }}
    {{- $scratch.Add "meta" (slice $author $tags) -}}
{{- else}}
    {{- $scratch.Add "meta" (slice $author) -}}
{{- end}}

{{- with ($scratch.Get "meta") }}
{{- delimit . "&nbsp;·&nbsp;" -}}
{{- end -}}

Then created layouts/partials/tags.html with this content:

{{- $tags := .Params.tags -}}
{{- if $tags -}}
  {{- $lastIndex := sub (len $tags) 1 -}}
  {{- range $index, $tag := $tags -}}
    <a href="/tags/{{ $tag | urlize }}"> {{ $tag }}</a>
    {{- if ne $index $lastIndex }}&nbsp;·&nbsp;{{ end -}}
  {{- end -}}
{{- end -}}

Which gave me tags like this:

[oliverlabs]

@zacharyc , I did the changes proposed but they had no desired effect. Did you do the same and it worked? Got a repo? Mine's here.

[SirLorrence]

@oliverlabs This worked for me also with a little change.
You need safeHTML in the last lines of layouts/partials/post_meta.html.

{{- with ($scratch.Get "meta") }}
{{- delimit . " · " | safeHTML -}}
{{- end -}} 

[oliverlabs]

@SirLorrence , thanks so much for agreeing to look into this. I added your bit and unfortunately it still doesn't work for me. Could you please have a look at my repo and see what could be causing this? repo link.

[SirLorrence]

@oliverlabs So, playing around with you repo the issue was pretty simple. The file is named wrong (see below). Hehe I'm dyslexic so I make a lot of these mistakes too.

Fix: post-meta.html -> post_meta.html

Whats being called in the list.html from PaperMod layout:

<footer class="entry-footer">
    {{- partial "post_meta.html" . -}}
</footer>

Working Example with the name change:

[oliverlabs]

@SirLorrence, haha. What a rookie mistake from my side. You're a legend. Cheers!

[oliverlabs]

Has anyone else managed to add tags to the post metadata similar to how papermodx does it?

[novikov-ai]

I hope everyone has figured out how to add tags on preview list, but if not, I'd like to share my method.

As mentioned before, you need to overwrite the default list.html, that PaperMod provides.

1. Create a file at: layouts/_default/list.html
2. Add the following snippet to the file to display the tags in the preview:

{{- if .Params.tags }}
  <div class="tags" style="padding: 2px;">
    <div style="display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 5px;">
      {{ range .Params.tags }}
      <a href="/tags/{{ . | urlize }}" style="margin-right: 5px; 
                  color: white; 
                  background-color: rgb(55, 162, 121); 
                  border-radius: 6px; 
                  padding: 1px 12px; ">
        {{ . }}
      </a>
      {{ end }}
    </div>
  </div>
  {{- end }}

Note: You can place this snippet anywhere inside the article.

I placed it after the main content. You can see it here.

The result is attached.

If you'd like to see how it works on the real blog, click here.