Implementing breadcrumb navigation in hugo?

support
34

There is a problem with this. Imagine you have /content/section/category/article.md

The breadcrumb will be generated like: home / section / category / article/

You can click ‘home’. You can click ‘section’. They will take you to those list pages etc. You can also click ‘category’ but that doesn’t exist, so you get an error. You don’t get a 404 but httpd says forbidden b/c no empty directories will be displayed in my config.

Meaning, if you have subdirectories in your content/web-dev/hugo/ or content/web-dev/php/, hugo and php are not taxanomies or sections or categories with pages. Hugo doesn’t generate anything for that.

How would you counter this?

If you go to https://stoned.io/authors/yash-akasha/Thoughts-On-Standing-Rock-Dakota-Pipeline-Conflict/ and look at the breadcrumbs, yo’ull see it like

Authors > Yash Akasha > article name here.

Clicking Authors is fine. You get a list of articles from all authors. If I wanted to get only Yash, I go to authors/yash-akasha/ and that doesn’t exist b/c Hugo never generated anything for this.

I’ve been through the docs many times. I’m unsure what I’m missing. How would you feature multiple authors in said organization?

 <section>
 <div class="bread-container shadow">
 {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
 {{ $.Scratch.Add "path" .Site.BaseURL }}
 <ol class="breadcrumbs">
 <li>Navigation: </li>
   <li><a href="/">home</a></li>
   {{ range $index, $element := split $url "/" }}
     {{ $.Scratch.Add "path" $element }}
       {{ if ne $element "" }}
       <li>&rarr; <a href='{{ $.Scratch.Get "path" }}'>{{ . }}</a></li>
       {{ $.Scratch.Add "path" "/" }}
       {{ end }}
   {{ end }}
 </ol>
 </div>
 </section>

EDIT: https://gohugo.io/templates/views/ I bet I need to create a custom content display for authors? How would that create a list of articles by E ACH Author though?

I’m looking to have site.com/authors/authornamehere/all their articles here

EDIT2: That doesn’t sem to work. creating /themes/stoned.io/layouts/authors/li.html|single.html only affect how content/authors archetype/content type is displayed.

I still can’t figure out how to make hugo generate a page for the sub directories of content types.

I also have site.com/web-development/hugo/ and site.com/web-development/php etc. etc. Same thing with that.

How can I diplay that using hugo?

EDIT3 : I think I figured it out.

config.toml

[taxonomies]
author = "authors"

content/authors/yash-akasha/Thoughts-On-Standing-Rock-Dakota-Pipeline-Conflict.md

+++
authors=“yash-akasha”
+++

And now stoned.io/authors/yash-akasha/ (per the breadcrumbs from the content sub folder organization) shows the list of articles by Yash Akasha.

I’ll further test this w/ more authors. But it seems like it was as simple as adding another taxonomy. Nice.

This is a great Static Site Gen. You guys are awesome! :slightly_smiling: <3

EDIT 4: It seems that if you only specify the custom taxanomy, it will disable the default tags/category taxanomies.

So you have to specify the defautl ones, plus the custom ones you want

[taxonomies]
author="authors"
tag = "tags"
category = "categories"

EDIT 5: Seems this this would be manually done for each sub-dir?

I have site.com/web-dev/hugo and /web-dev/foo and /web-dev/bar

would I need to custom add taxanomies for each?

There has got to be a better more abstracted method? Anyone care to rub some neurons together with me? :slightly_smiling:

1 Like