(SOLVED) Taxomony, current tag highlighted in header menu

support
1

Hi there!
Say I have tag1, tag2 and tag3 among all my posts.

There is code in Taxonomy to list tags, which I can put into header, something like this

 <ul class="sub-nav">
            <li class="sub-nav__item">
                 <a class="sub-nav__link" href="/">Alles</a>
            </li>
            {{ range .Site.Taxonomies.tags }}
            <li class="sub-nav__item">
                <a class="sub-nav__link"  href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
            </li>
            {{ end }}
 </ul>

So then, if you click you will navigate to http://myhugoblog/tags/tag1/ (or /tag2/ or /tag3)
How do I make current tag active in header sub-nav ? Say if you navigated to http://myhugoblog/tags/tag2/ The link in above sub-nav should be like

<a class="sub-nav__link sub-nav__link--active" href="#">{{ .Page.Title }}</a>

2

The tags are in the frontmatter of the pages like

tags = ["2019", "HTML", "CSS"]

so you can use

{{ range $index, $name := sort .Params.tags }}
       <a  href={{ (printf "/tag/%s/" $name) | urlize }} >{{$name | markdownify}}</a>
{{ end }}

my sample:

defined in partial single-head.html
used in all sngle templates like _default/single.html

hope this helps

3

Actually, this quick code made it work, it was a little bit confusing for me to get through, but after night sleep it came up.

    <ul class="sub-nav">
        <li class="sub-nav__item">
               <a class="sub-nav__link {{if (.IsHome)}} sub-nav__link--active{{end}} " href="/">Alles</a>
        </li>
        {{$cLink := .Permalink}}
        {{ range .Site.Taxonomies.tags }}
        <li class="sub-nav__item">
            <a class="sub-nav__link {{if (eq .Page.Permalink $cLink)}}sub-nav__link--active{{end}}"   href="{{ .Page.Permalink }}">{{ .Page.Title }} </a>
        </li>
        {{ end }}
1 Like