Struggling to get "delimit" tags working with "range" clickable tags

Hello, I’m really stumped getting clickable tags combined with a “/” between them.

<p style="text-indent: 20px">{{ delimit .Params.tags " / " }} {{range .Params.tags}}<a href="{{ "/tags/" | relLangURL }}{{ . | urlize
                        }}">{{ . }}</a> {{end}}</p>

They both work alone, but are obviously duplicated.

Any simple way to combine and have both tags separated and clickable in one, single set?

I assume that you’re going to separate the clickable tags by /, if so, it’s easy to achieve that via CSS (recommended).

<ul class="tags">
  {{ range .GetTerms "tags" }}
    <li class="tag">
      <a href="{{ .RelPermalink }}">{{ .Title }}</a>
    </li>
  {{ end }}
</ul>
.tags {
    list-style: none;
    display: flex;
}

.tag {
    margin: 0 0.25rem;
}

.tag:not(:first-child)::before {
    content: '/';
    padding-right: 0.5rem;
}
  • The tags and tag are the class name, change it as will.
  • The :not(:first-child) ignore the first tag.

Solution without CSS.

{{ $tags := slice }}
{{ range .GetTerms "tags" }}
  {{- $tags = $tags | append (printf `<a href="%s">%s</a>` .RelPermalink .Title) }}
{{ end }}
{{ delimit $tags " / " }}
1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.