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

tooraj · February 15, 2023, 3:39pm

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>

BlueBlueSky · February 15, 2023, 3:52pm

show code for breadcrumbs.html

tooraj · February 15, 2023, 4:11pm

I updated my question with tthe code for breadcrumbs.html

jmooring · February 15, 2023, 5:19pm

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 }}

tooraj · February 16, 2023, 4:00am

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?

jmooring · February 16, 2023, 4:08am

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

{{ partial "breadcrumbs.html" . }}

tooraj · February 16, 2023, 11:40am

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

Arif · February 16, 2023, 1:23pm

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

tooraj · February 17, 2023, 9:56am

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:

Why instead of website-name I get website-name | App landing template ?
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.

jmooring · February 17, 2023, 5:06pm

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

tooraj · February 18, 2023, 9:29am

@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?

jmooring · February 18, 2023, 3:18pm

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.

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. ↩︎

tooraj · February 18, 2023, 4:18pm

@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.?

jmooring · February 18, 2023, 4:21pm

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

tooraj · February 18, 2023, 4:32pm

@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?

jmooring · February 18, 2023, 4:35pm

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

tooraj · February 18, 2023, 4:48pm

@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?

jmooring · February 18, 2023, 5:06pm

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

tooraj · February 18, 2023, 11:12pm

@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?

jmooring · February 18, 2023, 11:22pm

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.

Topic		Replies	Views
Breadcrumbs Duplication support	3	1015	May 30, 2022
Can Hugo fail on duplicate pages (files in the public dir)? support	2	510	September 12, 2018
Cannot override {{define "breadcrumbs"}} in Hugo Learn Theme	6	1429	June 24, 2019
Hugo v0.54.0/extended darwin/amd64 fails to build	6	799	March 2, 2019
Beginner problem - breadcrumbs, Scratch and nested sections support	4	2038	September 12, 2018

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

Related topics