[SOLVED] How to implement breadcrumbs with categories?

support
1

Hi guys,

I am trying to implement breadcrumbs for my website. This is the partial i am using at the moment:

<div id="breadcrumbs" class="entry-meta" style="font-style:normal;font-size:16px;">
<a href="/">Home</a>
{{ range (split .URL "/") }}
    {{ if gt (len . ) 0 }}
        / <a href="/{{ . }}">{{ humanize (replace . "posts" "blog") }}</a>
    {{ end }}
{{ end }}
</div>

But it only outputs the url and I would like to show the category of the post.
For example, if I have the following url:
http://localhost/post/my-awesome-post

It will be displayed it as:

Home /post / My Awesome Post

This does not work for me. I want to check whether there is a category assigned to the specific post, and, if there is, show the breadcrumbs as:

Home / categories /category-name / My Awesome Post

How can this be accomplished? Many thanks in advance!

2

Your best bet is to see prior discussion: https://discourse.gohugo.io/search?q=breadcrumbs

Keep in mind: breadcrumbs don’t mean the same thing to everyone. Hugo will never have dynamic breadcrumbs. So to create your link list (that’s what it is), just provide a list of categories before the permalink. That does what you want.

1 Like
3

Ok, I took slightly different approach and I am displaying the categories, seperated by comma. Here is my code:
<div id="blog-categories" style="font-style:italic;font-size:15px; text-align:center; padding: 0 0 10px;">
{{ if .Params.categories }}
<em>{{ if gt (len .Params.categories) 0 }}Categories:{{ end }} </em>
{{ range $index, $category := .Params.categories }}{{ if gt $index 0 }}, {{ end }}<em><a href="{{ "categories/" | relURL }}{{ . | urlize }}">{{ . }}</a></em>{{ end }}
{{ end }}
</div>

The only thing that I would like to add is to change “Categories” to be displayed as “Category” in case there is only one category assigned. Can you please help me with this, @maiki?

4

You already have everything. Something like this should work:

{{ if gt (len .Params.categories) 1 }}Categories:{{ else }}Category:{{ end }}

1 Like
5

It is totally working, thanks a lot for the help!