Display tags for each post

[cocowalla]

Thanks for this great theme!

Something to consider adding is displaying tags somewhere in each blog post. I often read a blog post somewhere, and find related posts by clicking the tags; just now, all the tags seem to be invisible on each post.

[dbu9]

I join to this request. Not only tags, but we need links to the posts with the same tags, like in BeautifulHugo theme:

See an example: https://www.dbu9.site/post/2023-04-29-unveiling-the-exploitation-how-cyber-criminals-leverage-human-psychology-to-steal-crypto/

The screen shot:

[nakibrayane]

to list tags that are used in a article

1. add this line to config.toml under [params]

[params]
    # if true list article tags in the bottom of the page
    listTags = true

2. add this line to i18n/en.yaml (create the directory i18n if it does no exist)

# Tags
- id: Tags
  translation: "Tags"

NOTE: add the same lines for all the languages that your website support example:

in i18n/de.yaml add

# Tags
- id: Tags
  translation: "labels"

3. copy theme/blistlayouts/_default/single.html to layouts/_default/single.html

and add this line after the line {{ .Content }}:

{{- partial "tags_list.html" . -}}

the file should look like this:

...
    {{ if (or .Site.Params.toc .Params.toc) }}
    {{- partial "toc.html" . -}}
    {{ end }}

    {{ .Content }}

    {{- partial "tags_list.html" . -}}
...

4. create the file layouts/partials/tags_list.html (create the directory layouts/partials if it does no exist)

{{ if .Site.Params.listTags }}
  <hr>
  <p class="text-black dark:text-white text-2xl font-bold">{{ printf "Tags" | i18n "Tags" }}</p>

  <div class="container p-6 mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
    {{ range (.GetTerms "tags") }}
          <div class="p-2">
            <a href="{{ .Permalink }}">
              <div class="my-2 text-xl font-semibold">{{ .LinkTitle }}</div>
            </a>
          </div>
    {{ end }}
  </div>
{{end}}

[dbu9]

to list tags that are used in a article

1. add this line to config.toml under [params]

[params]
    # if true list article tags in the bottom of the page
    listTags = true

2. add this line to i18n/en.yaml (create the directory i18n if it does no exist)

# Tags
- id: Tags
  translation: "Tags"

NOTE: add the same lines for all the languages that your website support example:

in i18n/de.yaml add

# Tags
- id: Tags
  translation: "labels"

3. copy theme/blistlayouts/_default/single.html to layouts/_default/single.html

and add this line after the line {{ .Content }}:

{{- partial "tags_list.html" . -}}

the file should look like this:

...
    {{ if (or .Site.Params.toc .Params.toc) }}
    {{- partial "toc.html" . -}}
    {{ end }}

    {{ .Content }}

    {{- partial "tags_list.html" . -}}
...

4. create the file layouts/partials/tags_list.html (create the directory layouts/partials if it does no exist)

{{ if .Site.Params.listTags }}
  <hr>
  <p class="text-black dark:text-white text-2xl font-bold">{{ printf "Tags" | i18n "Tags" }}</p>

  <div class="container p-6 mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
    {{ range (.GetTerms "tags") }}
          <div class="p-2">
            <a href="{{ .Permalink }}">
              <div class="my-2 text-xl font-semibold">{{ .LinkTitle }}</div>
            </a>
          </div>
    {{ end }}
  </div>
{{end}}

This worked as a charm. But it does not replicate the functionality of BeautifulHugo theme which finds relevant posts (as I think these posts are with the same tag as the article) and puts them into See Also section. Do you have a recipe for that?

Thanks!

[linuxthrawn]

Thanks for this great theme!

Something to consider adding is displaying tags somewhere in each blog post. I often read a blog post somewhere, and find related posts by clicking the tags; just now, all the tags seem to be invisible on each post.

Hi, you can currently do that. I've added this shortcode to my single.html partial (it is in the /layouts/_default directory).

{{ if .Params.tags }} <h6 class="text-sm flex items-center flex-wrap"> 🏷 {{ i18n "tags" }}: {{ $tags := slice }} {{ range .Params.tags }} {{ $tags = $tags | append . }} {{ end }} {{ $tagCount := len $tags }} {{ range $index, $tag := $tags }} &nbsp;<a href="{{ "/tags/" | relLangURL }}{{ $tag | urlize }}">{{ $tag }}</a>{{ if ne $index (sub $tagCount 1) }},{{ end }} {{ end }}. </h6> {{ end }} The shortcode shows list of the tags in the page only if tags have been assigned to that page. Each tag is a link to the page with all the other posts with the same tag.