How to assign CSS style to selected tag

support
1

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:

http://localhost:1313/tags/tag1/

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

list.html

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

CSS

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

Is there any way to add such functionality using Go?

2

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

layouts/_default/term.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>

  <ul>
    {{ 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 }}
  </ul>

  {{ .Content }}

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

Try it:

git clone --single-branch -b hugo-forum-topic-49806 https://github.com/jmooring/hugo-testing hugo-forum-topic-49806
cd hugo-forum-topic-49806
hugo server
1 Like
3

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?
https://discourse.gohugo.io/t/load-next-post-under-currect-one-without-refreshing-the-page

It would be nice to have similar functionality.

4

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

5

Page https://jmooring.github.io/load-next/ shows 404 error.

6

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 https://github.com/jmooring/hugo-testing hugo-forum-topic-42288
cd hugo-forum-topic-42288
hugo server
1 Like
7

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

8

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