Add active link to custom taxonomy term?

support
1

Hello all,
I am new to Hugo and currently setting up my first site, but wanted to know how to add a class to a custom taxonomy term? This is what I have:

{{ range $key, $value :=  .Site.Taxonomies.tech }}
<a href="news/tech/{{ $key | urlize }}" class="link">{{ .Page.Title }}</a>
{{ end }}

So if someone clicks on the “computer” taxonomy link I wanted the link class to change to link-active, is that possible? I am getting my repo ready soon.

Many thanks

2

Hi,

this is a CSS task!
https://www.w3schools.com/Css/css_link.asp

3

Hi, well no as I want Hugo to change the “link” class to active once the link has been clicked.

4

Can you clarify that a little bit?

You click the link > THE PAGE LOADS > then the link is active or without loading the actual taxonomy page?

The way I understand it you want to show that the currently loaded page is the page of that term, right? In this case you just compare the terms title to the current page’s title. I am already searching in the docs, there should be a “global” page variable that you could compare against.

5

It might be $.Page.Title.

6

Hi @davidsneighbour sorry for being unclear, the page loads fine and I see the title as well. I have 3 links for my tech taxonomy, so all I want is of you say click on “mobile” the mobile link turns red and the use sees the content for the “mobile” taxonomy. I have everything working, just want to add an active class to my link… I will upload my repo just incase.

7

Yes, please upload your repoto github or gitlab. It will be easier to find the code that is responsible for this.