How deep into a folder can you go when using page resources?

Hi,

I have a shortcode that takes a src attribute and uses it to spit out the markdown within it.
This works with no issues at all, apart from when I try to move into nested content folders.
My specific question is:
if content folders are nested (as in, another folder level is added), do page resources stop working after the main blog post’s “root” folder?

Some examples:
This is my folder structure:
content/components/buttons/
index.md
demo-1-1.md

In the above example, I can access the contents of demo-1-1.md with the below shortcode, no problem.
{{< demo src="demo-1.1" >}}

But, I decided to add more specificity to my folder structure, as I will be shortly introducing different types of buttons.

Now, my structure will be:
content/components/buttons/
index.md

content/components/buttons/web
index.md
demo-1-1.md

what I’m finding is that the shortcode is, for the nested folder, returning 404 for demo-1-1.md.
I cannot figure out why this is happening!
The output URL for the demo file is:
http://localhost:1313/components/buttons/web/demo-1.1/index.html
which is expected. But it doesn’t render anything except a 404.

I am unable to share the repo since it’s a private one.
But here’s some code from the shortcode, in case it’s useful.

{{ $src := .Get "src" }}
*this spits out the following: demo-1.1

{{ with $.Page.File }}
*Page.File spits out: components/buttons/web/index.md

{{ $srcPath := (printf "%s%s%s" .Dir $src ".md") }}
*srcPath spits out: components/buttons/web/demo-1.1.md

<details>
  <summary>View code</summary>
  <pre class="language-html"><code class="language-html">{{ with $.Site.GetPage $srcPath  }}{{.RawContent}}{{end}}</code></pre>
</details>
{{ end }}

I’ve tried restarting and rebuilding Hugo but this isn’t working either.
If anyone has any ideas, I’d love to see them!

The answer to your question is here:

Issues with your setup:

  1. The presence of index.md within components/buttons/ indicates to Hugo that this directory is a leaf bundle. Think of a leaf as the end of a branch. A leaf bundle “Does not allow nesting of more bundles under it.” That is why you get a 404 when trying to visit components/buttons/web/.

    You can fix this by renaming components/buttons/index.md to components/buttons/_index.md. This indicates to Hugo that the directory is a branch bundle, which allows nested content.

  2. But now we have another problem. You can access page resources from both leaf and branch bundles, but branch bundles can only access “non-page” resources. A markdown file is a “page” resource. This means you cannot use a markdown file as a resource within a branch bundle. But you can within a leaf bundle. You could do something like this instead:

    components/
    └── buttons
        ├── web
        │   ├── demo-1-1.md
        │   └── index.md
        ├── demo-1-1.txt
        └── _index.md
    

Notice that I have changed the extension of the demo file in the components/buttons from .md to .txt, which makes it a “non-page” resource, accessible from a branch bundle.

This might also be helpful:
https://discourse.gohugo.io/t/content-depth-migrating-from-jekyll/26635/6

4 Likes

Hi @jmooring,

Thank you so much! I have read the bundling documentation, but somehow you explaining it in a slightly different way has suddenly made it all click!

I had tried changing the name of index.md to _index.md, but it broke the layout. Turns out that it was switching to the list template, so I now understand that and can made adaptations for it.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.