Sidebar shows articles by tag

[pwinston]

I have an archives page with a normal sidebar showing all pages.

For my homepage I'd like the side bar to show selected tags and the articles with those tags. For example below would be showing the tag "Best" and the 3 articles tagged "Best". I faked it for this screen shot by creating duplicates of the pages. I only have around 50 posts and will just have 4-5 tags.

How hard is this? I find the sidebar-tree.html partial to be pretty complicated.

[raum51]

I'm afraid it's not so easy, to get it really integrated in the sidebar menu structure. Because the sidebar menu get build based on the folder/file structure of your Hugo content. The sidebar-tree.html would need the info, on which position in the menu it should generate the menu items for which taxonomy term. The mother page for the taxonomy (in your case "Best") is quite easy to get into the menu by https://www.docsy.dev/docs/adding-content/navigation/#add-manual-links-to-the-section-menu. The difficult point is to get menu items for each tagged page.

A much easier way would be to define an addition menu (somewhere in the sidebars). Which you could code in a separate partial file. The code example to list all pages of a given taxonomy term you find here: https://gohugo.io/templates/taxonomy-templates/#list-all-content-in-a-given-taxonomy

If this is a feature more users are interested in, I could imagine this way to implement it:

• Define some frontmatter parameters (or introduce a complete new content type) for pages which list all pages of ONE given taxonomy term.
• Check in the sidebar-tree.html if a menu item belongs to such a special page to list pages of a current taxonomy term.
• If so, list the pages of the defined taxonomy term instead of the child pages.

These are only some first thoughts about this topic.

[pwinston]

Thanks for ideas. I figured it was not a built-in mode.

I was able to hack it in but really messy. I did create a separate sidebar.html which I called sidebar-tags.html.

But I just did "view source" on the normal sidebar and then kind of hacked things to make it looks like that, so it's probably pretty hard-coded to my site.

My config.toml now:

[params]
show_tags = [
 "AI",
 "Futurism",
 "Mindfulness",
 "Misc",
 "Politics",
 "Videogames",
 "Wealth"
]

And my sidebar-tags.html

  <div id="td-sidebar-menu" class="td-sidebar__inner">
    <form class="td-sidebar__search d-flex align-items-center">
      <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
      </button>
    </form>
    <nav class="collapse td-sidebar-nav" id="td-section-nav">
      <ul class="td-sidebar-nav__section pr-md-3 ul-0">
        <li class="td-sidebar-nav__section-title td-sidebar-nav__section with-child active-path" id="m--li">
    <a href="/" title="Metastable Homepage" class="align-left pl-0 active td-sidebar-link td-sidebar-link__section tree-root" id="m-"><span class="td-sidebar-nav-active-item">metastable</span></a>
    <ul class="ul-1">
  </li>
  {{ $root := .Site.Pages}}
  {{ $current := .Permalink}}
  {{ range .Site.Params.show_tags }}
  {{ template "tag-pages" (dict "root" $root "tag" . "current" $current) }}
  {{ end }}
    </ul>
    </li>
      </ul>
    </nav>
</div>

{{ define "tag-pages" -}}
{{ $t := .tag -}}
{{ $c := .current -}}
{{ $pages := .root.RelatedTo (keyVals "tags" $t) -}}
<li class="td-sidebar-nav__section-title td-sidebar-nav__section with-child" id="m-best-li">
  <a href="/tags/{{ $t }}/"  class="align-left pl-0 td-sidebar-link td-sidebar-link__section" id="m-best"><span class="">{{- $t -}}</span></a>
  <ul class="ul-2 foldable">
    {{ range sort $pages "Title" -}}
      {{ $active := (eq .Permalink $c )}}
      <li class="td-sidebar-nav__section-title td-sidebar-nav__section without-child">
        <a href={{ .RelPermalink }} class="align-left pl-0 {{ if $active}}active{{ end }} td-sidebar-link td-sidebar-link__page"><span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ .Name }}</span></a></li>
    {{- end }}
  </ul>
</li>
{{- end }}

The final result on the site.

I was going to have a normal sidebar, by date. But I think I'll just leave the tag sidebar, and have just a list page be the full archive if you want to see all the posts in order.