Breadcrumb gives error when two files in different folders have the same name

I am implementing a breadcrumb as partials in the layout.
It works nicely, but when two files in different folders have the same name I get an error from Hugo. Here is an example of the error message:

Rebuild failed:

Failed to render pages: render of "page" failed: execute of template failed: template: folder1/folder2/single.html:7:11: executing "main" at <partial "breadcrumbs.html" .>: error calling partial: "/Users/my-project/themes/hugo-theme/layouts/partials/breadcrumbs.html:10:20": execute of template failed: template: partials/breadcrumbs.html:10:20: executing "partials/breadcrumbs.html" at <$.Site.GetPage>: error calling GetPage: page reference "/example.md" is ambiguous

Hugo Static Site Generator v0.76.5/extended darwin/amd64 BuildDate: unknown

What is the reason for that?

Here is the code for breadcrumbs.html

<div id="breadcrumbs" style="background-color: rgba(186, 221, 226, 0.5); border-radius: 15px; 
     margin-bottom: 1em; margin-top: -1em !important; font-size: 0.9em; font-style: italic; ">
    <a href="/">Home / </a>
    {{- $.Scratch.Set "url" "" -}}
    {{- range (split .RelPermalink "/") -}}
        {{- if (gt (len .) 0) -}}    
            {{- $.Scratch.Set "isPage" "false" -}}
            {{- $.Scratch.Add "url" (print "/" . ) -}}
            {{- if $.Site.GetPage (print . ".md") -}}
                {{- with $.Site.GetPage (print . ".md") -}}
                    {{- if .IsPage -}}
                        {{- $.Scratch.Set "isPage" "true" -}}
                    {{- end -}}
                {{- end -}}
            {{- end -}}
            {{- if eq ($.Scratch.Get "isPage") "true" -}}
                {{- with $.Site.GetPage (print . ".md") -}}
                    <a href="{{ $.Scratch.Get `url` }}">{{ .Title }} / </a>
                {{- end -}}
            {{- else -}}
                <a href="{{ $.Scratch.Get `url` }}">{{ humanize . }} </a>
            {{- end -}}
        {{- end -}}
    {{- end -}}
</div>

show code for breadcrumbs.html

I updated my question with tthe code for breadcrumbs.html

Generating a trail of breadcrumbs became much simpler with Hugo v0.109.0 and later. Use the .Ancestors method on .Page.

{{- with .Ancestors.Reverse }}
  <nav>
    {{- $p := . | append $ }}
    {{- range $k, $_ := $p }}
      {{- if $k }}
        <span class="breadcrumb-separator">&raquo;</span>
      {{- end }}
      {{- $ariaCurrent := "true" }}
      {{- if eq $k (sub (len $p) 1) }}
        {{- $ariaCurrent = "page" }}
      {{- end }}
      <a aria-current="{{ $ariaCurrent }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
    {{- end }}
  </nav>
{{- end }}
2 Likes

Thanks so much for the response.
My apologies, but I am a beginner, would you please elaborate on how shall I change my code with what you mentioned?

Put the code in layouts/partials/breadcrumbs.html, then call it within one of your templates with:

{{ partial "breadcrumbs.html" . }}

I did that and I got this error:

Failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:7:11: executing "main" at <partial "breadcrumbs.html" .>: error calling partial: "/Users/my-project/themes/hugo-theme/layouts/partials/breadcrumbs.html:1:19": execute of template failed: template: partials/breadcrumbs.html:1:19: executing "partials/breadcrumbs.html" at <.Ancestors.Reverse>: can't evaluate field Ancestors in type *hugolib.pageState

You need to upgrade your Hugo installation to the latest version (0.110.0).

Ok, I updated Hugo to the latest version and the solution partially works. This means that I don’t get errors anymore but there are some issues in the breadcrumb itself now. The folder structure for one of the files is like this:

content/folder1/folder2/file1.md

Now the breadcrum for this file is shown as:

website-name | App landing template >> folder1 >> file1

My questions are:

  1. Why instead of website-name I get website-name | App landing template ?
  2. why folder2 is not shown in the breadcrumb? and how can I make sure I will get the full path in the breadcrum that is shown for each page?

Thanks again.

Look at the title of the home page as defined in markdown (/_index.md). You can either change the title, or add linkTitle = 'Home' to front matter.

Because it is not a section; it is just a directory. To make it a section:

hugo new folder1/folder2/_index.md
1 Like

@jmooring thanks again for the answer. Your answer for the website-name resolved that issue.
But for the second part, which was why folder2 is not shown in the breadcrumb I did what you mentioned and I have a new problem. Let me explain.

The files and folder structure for my website are something like this:

-content
    folder1.md
    -folder1
         folder2.md
         folder3.md
         folder4.md
         -folder2
               file1.md
               file2.md
               ...
         -folder3
               file3.md
               file4.md
               ...
          -folder4
                file5.md
                ...  

As can be seen under the content folder I have a file called folder1.md and a folder called folder1. The file folder1.md contains links to folder2, folder3, etc.
And under folder1 I have a few folders and for each folder, I have a file with the same name. For example, under folder1 I have folder2 as a folder and folder2.md, etc.
Finally, under folder2 I have some files like file1.md etc.
So to me, there is no difference between folder1 and folder2. Why folder1 is shown in the breadcrum, but folder2 is not shown?
If I do what @jmooring recommended, which is hugo new folder1/folder2/_index.md then when I am on folder1.md and click on a link to go to folder2 I get a message that says Page Not Found.

Is this because I don’t have a correct file and folder structure?

Does the breadcrumbs.html code work for any folder depth? Or it only works for one level depth of folders?

Your content structure is incorrect. If you want directory to be a logical section, it must contain an _index.md file[1] (a section file). The section file can contain content, just like any other page, but its template will typically range through the child (not descendant) pages.

content/
β”œβ”€β”€ products/
β”‚   β”œβ”€β”€ product-1/
β”‚   β”‚   β”œβ”€β”€ benefits/
β”‚   β”‚   β”‚   β”œβ”€β”€ benefit-1.md
β”‚   β”‚   β”‚   β”œβ”€β”€ benefit-2.md
β”‚   β”‚   β”‚   └── _index.md
β”‚   β”‚   β”œβ”€β”€ features/
β”‚   β”‚   β”‚   β”œβ”€β”€ feature-1.md
β”‚   β”‚   β”‚   β”œβ”€β”€ feature-2.md
β”‚   β”‚   β”‚   └── _index.md
β”‚   β”‚   └── _index.md
β”‚   └── _index.md
└── _index.md

Yes, it does.


  1. Exception: Hugo always treats top level directories as sections, but you should get into the habit of creating _index.md files for these as well. β†©οΈŽ

1 Like

@jmooring looking at the content structure you have shown above, currently for example for product-1 folder instead of _index.md, I have product-1.md. Should I transfer the content of product-1.md to _index.md and remove product-1.md. And do the same for benefits and features, etc.?

Yes. Please try it. Experimenting is a great way to learn.

@jmooring sorry to ask so many questions. The lowest _index.md in your content structure is it inside the content folder and parallel to the products folder, or is inside the products folder?

content/
content/_index.md
content/products
content/products/_index.md
content/products/product-1
content/products/product-1/_index.md
content/products/product-1/benefits
content/products/product-1/benefits/_index.md
content/products/product-1/benefits/benefit-2.md
content/products/product-1/benefits/benefit-1.md
content/products/product-1/features
content/products/product-1/features/_index.md
content/products/product-1/features/feature-2.md
content/products/product-1/features/feature-1.md
1 Like

@jmooring I did that but now when I click on for example products link on the main web-site I get Page Not Found error. Do you have any idea what am I doing wrong?

Without access to your project repository, I have no idea.

Try this working example:

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

@jmooring Thanks so much for the example.
I have mine implemented similar to your example page.
However, on my main page, I have a link to products. When I click on that link the url on the web-browser changes to: http://localhost:1313/products/ but then I get the Page Not Found error message. In my website I have another folder parallel to products, let’s call it tools and I have this structure for that:

content/
content/_index.md
content/tools
content/tools.md

and in the main page I have a link to tools as well. When I click on that link it correctly goes to http://localhost:1313/tools/ and shows the content of tools.md.
For both of them in the config.toml I have this that shows a link to them in the main menue:

# Navigation Bar
[[menu.main]]
    name = "Home"
    url = "#home"
    weight = 1
[[menu.main]]
    name = "Products"
    url = "/products"
    weight = 2
[[menu.main]]
    name = "Tools"
    url = "/tools"
    weight = 3

Do you see I am doing something wrong? As I changed the content structure for products from:

content/
content/products
content/products.md

to

content/
content/_index.md
content/products
content/products/_index.md

Do I need to delete anything from the public folder that has been created before or clean up anything from before?

https://gohugo.io/getting-started/usage/#build-your-site

Hugo does not clear the public directory before building your site. Existing files are overwritten, but not deleted. This behavior is intentional to prevent the inadvertent removal of files that you may have added to the public directory after the build.

Depending on your needs, you may wish to manually clear the contents of the public directory before every build.

If you need further assistance, please post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

1 Like