List pages of sub-sub-folders

Hello!

I’m building a website that has a lot of sub-folders.
I would like to list all the sub-folders in each folder and at the lowest level the corresponding articles.

I created an _index.md in each level and it successfully creates a page for each one.

I do have difficulties with creating the lists though.
With .Data.Pages “Type” “=” “services” it lists all the sub-pages (including sub-sub-folders

I tried: where .Data.Pages “File.Dir” “=” "services/accommodation"
But then I would need a different layout on each level.
I can make the levels work in the uppermost layer (sections) but I don’t manage to create a layout for deeper levels.
I tried putting the layouts in the folders according to hugos search order without success.
I had a look at hugotest11 and hugo-theme-docdock but they are not listing the sub-pages.

Do I need to specify a layout in the frontmatter of the corresponding _index.md ?
Do I need to specify a type in the frontmatter of the corresponding _index.md ?

Could you give me some hints/big-picture on how to do this properly?

Thank you very much,
Ferdi

I think what you look for is nested sections, see

Also see

Sorry for the poor formulation of the question. I wanted to post a directory structure but they get misinterpreted as links (and I can only post 2 links).

long question short:
If I want a list template for /content/services/accommodation
where do I put it?

/layouts/accommodation/accommodation.html
/layouts/services/accommodation.html
/layouts/accommodation/list.html
/layouts/posts/list.html
/layouts/_default/list.html
/layouts/_default/accommodation.html

Do I have to reference it in frontmatter of /content/services/accommodation/_index.md ?

Thank you!

Great! Thank you!
I will have a look!

I used the sections-tree.html that you recommended as my list template:
https://safejourney.github.io/services/

It makes a nice tree of the site, but shows all the branches.
I would like to show only the branch I am in, so for example in
https://safejourney.github.io/services/adventure_sport/theme_water_parks/
it would only show:
Costa Caribe Aquatic Park
Illa Fantasia Water parks
Parc d’atraccions del Tibidabo
PortAventura

Very much like a file-manager that shows you all the files and folders in a directory.

I thought I would have to make a custom list.html for each sub-section that only lists the current layer.
Like "where .Data.Pages “File.Dir” “=” “services/adventure_sport/theme_water_parks/”

But in “nested sections” it says “It is currently not possible to add a specific layout for one of the sub-sections.”

In the “lookup-order” “my-second-post.md”-example it seems that I can assign a specific template:
layout: reviewarticle
/layouts/review/reviewarticle.html
But it doesn’t work for me.

Please tell me if I’m behaving too stupidly, but this seems to be harder than I thought.

Is there any example-website that works similarly?

Thank you,
Ferdi

You cannot currently have a specific layout for the nested sections (only the top level). There may be workarounds for you, but I don’t understand what you want to do good enough.

I’m sure there is a very simple way of solving my problem.
This is an excerpt from my site structure:
content/
services
├── accommodation
│ ├── apartments
│ │ ├── family_apartments.md
│ │ ├── groups_apartments.md
│ │ └── romantic_apartments.md
│ ├── Hotels
│ │ ├── 3_hotels.md
│ │ ├── 4_hotels.md
│ │ ├── parador_hotels
│ │ │ ├── aiguablava_hotel.md
│ │ │ ├── arties_hotel.m
│ │ ├── parador_hotels.md
│ │ └── student_hotels.md
│ ├── hotels. md
│ └── villas_catalonia.md
├── business
│ ├── events. md
│ ├── speakers. md
└── transportation. md

For “services” it should show accommodation, business and transportation.
In accommodation it should list "apartments, Hotels, and show "villas_catalonia."
In Hotels "3_hotels, 4_hotels, parador_hotels…"
Like a file browser that shows files and folders.

The “categories” from my template almost work this way.
I have taxonomy-terms in all the frontmatter that could help to list the content.

But I feel that I’m over-complicating this probably very simple task.

Sorry if I’m wasting your time! If you point me to some example-site with a similar structure I will figure it out by myself. I spent a long time searching the forums but I can only find examples for relatively “flat” sites.

Thank you very much!
Ferdi

OK! It works now!
What I wanted seems to be the default-behavior of Hugo :wink:
I think the problem was that I didn’t have _index.md’s all the way down to the deepest sub-sub-folder.
Now I do and it works as expected.

Thank you again for your time and effort!

Best regards,
Ferdi

2 Likes

Ferdi, I have exactly the same issue as you had. Can you explain how you solved it? What do you have in your layout ? Many thanks

Hi Brucou,

I think my problem was solved by putting an _index.md in all the sub and sub-sub…-folders.
Now my problem is how to stop it from listing everything and make a page with all the sub-pages without linking to each single article.

If it was possible to use a different layout for the sub-sub-sections I could simply copy the normal list-template and remove the links, but that doesn’t seem to be possible.

My list template is a modified one from “hugo-universal-theme”.
If you want I can send it to you.

Here is how I am able to modify my sub-sections (nested sections) from within _default/list.html:

{{- if .Sections -}}
{{- range .Sections -}}
{{- range $i, $e := .Data.Pages -}}
<---Layout for parent section---->
{{- end -}}
{{- end -}}
{{- end -}}

The above will be the layout for the list page of the parent (top level) section.

And then to control the layout of sub-sections I simply have the following (right after the above):

{{- range $i, $e := .Data.Pages -}}
<---Layout for sub- section---->
{{- end -}}

And that’'s all there is to it.

I know that @bep and the Hugo Docs say that it is not possible to have a different layout in a nested section, but with a bit of creative thinking it is indeed possible to do this.

And what I posted above I already use in production. So it works like a charm.

Happy holidays everybody! :wink:

5 Likes