How to assign CSS style to selected tag

For example i have a tag list on news page.
Selecting one tag shows list of appropriate news posts.
Address line contains smth like this:


Is there any way to assign CSS style to active tag.
For example: mark currently selected tag1 with red backdrop color.


<ul class="news-taglist">
  {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
    <li><a class="button tag" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a></li>
  {{ end }}


.active {
  color: white;
  width: fit-content;
  background-color: red;

Is there any way to add such functionality using Go?

The above is a term page. I would create a term page template, something like:

{{ define "main" }}
  <h1>{{ .Title }}</h1>

    {{ range .Parent.Data.Terms }}
      {{ if eq $ .Page }}
        <li class="active"><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a></li>
      {{ else }}
        <li><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a></li>
      {{ end }}
    {{ end }}

  {{ .Content }}

  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

Try it:

git clone --single-branch -b hugo-forum-topic-49806 hugo-forum-topic-49806
cd hugo-forum-topic-49806
hugo server
1 Like

Sorry for long answer.
Thanks Joe, you are a proficient helper!
It looks like that i have enough knowledge to adapt code to my project.

One more thing. Is there any chance to resurrect following page?

It would be nice to have similar functionality.

I don’t know what you mean. The example site referenced in this comment still works.

Page shows 404 error.

You’re doing it wrong. Read the entire thread. You need to do this to try it:

git clone --single-branch -b hugo-forum-topic-42288 hugo-forum-topic-42288
cd hugo-forum-topic-42288
hugo server
1 Like

Aha, i’ve got it now. Thank you!

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