Skip to content
Permalink
Browse files

extend navigation highlighting to taxonomy list pages (#220)

This adds the same kind of navigation highlighting as the PRs #191 and #211
when on [taxonomy list pages](https://gohugo.io/content-management/taxonomies/#default-destinations)
(e.g. `/categories/programming/` or `/tags/hugo/`), i.e. the selected tag or
category will be highlighted in the color of the chosen style (default, blue,
green, etc.)
  • Loading branch information...
salim-b authored and ryanfox1985 committed Nov 7, 2019
1 parent 70e126d commit 768e1973c203e7c81bf27827c881a6e797d731c2
@@ -4,17 +4,20 @@
<div class="panel panel-default sidebar-menu">

<div class="panel-heading">
<h3 class="panel-title">{{ i18n "categoriesTitle" }}</h3>
<h3 class="panel-title">{{ i18n "categoriesTitle" }}</h3>
</div>

<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
{{ $current := . }}
{{ range $name, $items := .Site.Taxonomies.categories }}
<li><a href="{{ $.Site.BaseURL }}categories/{{ $name | urlize | lower }}">{{ $name }} ({{ len $items }})</a>
<li{{ if eq $current.RelPermalink ($name | urlize | lower | printf "/categories/%s/") }} class="active"{{ end }}>
<a href="{{ $.Site.BaseURL }}categories/{{ $name | urlize | lower }}">{{ $name }} ({{ len $items }})</a>
</li>
{{ end }}
</ul>
</div>

</div>
{{ end }}
{{ end }}
@@ -2,18 +2,22 @@
{{ if isset .Site.Taxonomies "tags" }}
{{ if not (eq (len .Site.Taxonomies.tags) 0) }}
<div class="panel sidebar-menu">

<div class="panel-heading">
<h3 class="panel-title">{{ i18n "tagsTitle" }}</h3>
<h3 class="panel-title">{{ i18n "tagsTitle" }}</h3>
</div>

<div class="panel-body">
<ul class="tag-cloud">
{{ $current := . }}
{{ range $name, $items := .Site.Taxonomies.tags }}
<li><a href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"><i class="fas fa-tags"></i> {{ $name }}</a>
<li{{ if eq $current.RelPermalink ($name | urlize | lower | printf "/tags/%s/") }} class="active"{{ end }}>
<a href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"><i class="fas fa-tags"></i> {{ $name }}</a>
</li>
{{ end }}
</ul>
</div>

</div>
{{ end }}
{{ end }}
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #467fbf;
text-decoration: none;
border-color: #467fbf;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #467fbf;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #38a7bb;
text-decoration: none;
border-color: #38a7bb;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #38a7bb;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #6aae7a;
text-decoration: none;
border-color: #6aae7a;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #6aae7a;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #955251;
text-decoration: none;
border-color: #955251;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #955251;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #c27baa;
text-decoration: none;
border-color: #c27baa;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #c27baa;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #da4d4d;
text-decoration: none;
border-color: #da4d4d;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #da4d4d;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #4fbfa8;
text-decoration: none;
border-color: #4fbfa8;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #4fbfa8;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
letter-spacing: 0.08em;
font-weight: 700;
font-size: 12px;
text-decoration: none;
}
.panel.sidebar-menu ul.tag-cloud li a:hover {
color: #986dbd;
text-decoration: none;
border-color: #986dbd;
}
.panel.sidebar-menu ul.tag-cloud li.active a {
color: #FFFFFF;
background-color: #986dbd;
}
.panel.sidebar-menu ul.tag-cloud li.active a:hover {
color: #FFFFFF;
}
.panel.sidebar-menu ul.popular,
.panel.sidebar-menu ul.recent {
list-style: none;

0 comments on commit 768e197

Please sign in to comment.
You can’t perform that action at this time.