Section Page with Subpages and Navigation

support
1

Hello everyone,

I’m working with Hugo since yesterday and love it so far. There’s only one thing where I need help, after reading the documentation.

My page structure:

_index.md
/about 
   ---
/posts
  --- first-post.md
  --- second-post.md
  --- third-post.md
/research
 ---- index.md
 ---- publications.md
 ---- teaching.md
 ---- code.md

My problem relates to /research. Within that section, I like to have a research index page that has an introduction. Below the introduction should be a navigation to all sub-pages: publications (active on /research and when publications.md is active), teaching, code. Ideally, content from publications is already shown on the default research page so that users see this without click. As shown, I like to have all possible content in *.md files.

Example for /research:

Research Introduction

**Publications**    Teaching    Code

*Publication List*

Example for Teaching clicked:

Research Introduction

Publications    **Teaching**    Code

*Teaching Statement*

Basically like a tabbed nav, just with static pages.

Can someone help me figure out how to set the type:, layout: and layout files so that the functions described above would work ?

Thanks!

2

You need to rename that index.md to _index.md. As it stands, what you have defined is a leaf bundle. So the sub-pages don’t get their own permalink. So you don’t get the highlighting in the nav bar as you want. By doing that rename, you make it a branch bundle, and you can then do everything that you described.

Read up on page bundles in the documentation.

1 Like
3

I tried but it only shows an empty page? Restarted server, flushed cache… /publications etc now returns 404 page not found. I also checked https://gohugo.io/content-management/page-bundles/#examples-of-branch-bundle-organization

Do I need to assign a special layout or type to _index.md?

4

Given the content organization you showed, the link should be https://localhost:1313/research/publications/.

But cannot say that for sure – You will need to share your site source.

5

That was the mistake. It looks I also had to copy the _default layout and assign a layout.

6

You don’t have too assign a layout… if you have single.html and list.html in your layouts/_default/, they will apply by default e.g. your content/research/_index.md will be rendered by layouts/_default/list.html and your content/research/publications.md will be rendered by layouts/_default/single.html (given that you don’t specify the type and layout in the front-matter of those content files).

1 Like
7

Solved that part. The only question is how I can now list the subpages in a menu? I looked at https://gohugo.io/templates/menu-templates/ but found that it changed the top header. Is there some other way?

8

Use {{ range .Pages }} in the list template:

The docs need to be updated… they mention .Data.Pages… but the “.Data” in there is redundant. Just .Pages works.

9

Okay, got there. Now the only thing is: The /blog layout is a horizontal list with all the posts. However, I like the layout of the navigation (that’s actually not a nav element but a list(?)) in /research to be vertical.

10

I tried following:


    {{ range .Pages }}
    Hello
    {{ .Render “li”}}
    {{ end }}

Good thing is: It returns as much "Hello"s as there are posts in /blog and correspondingly “Hello Hello Hello” in research, as there are three sub-pages. Somehow, {{ .Render “li”}} doesn’t print the link appropriately and it should now show the nav in /blog anyways.

11

Tha solved it:

{{ range .Pages }}
{{ .Title }}
{{ end }}

1 Like