With Hugo, pages are the core of your site. Organize your site like any other Hugo project. Magic occurs with the nested sections implemention done in v0.22 of hugo (congrats @bep).
With docdock, Each content page composes the menu, they shape the structure of your website.
To link pages to each other, place them in a folders hierarchy
content
├── level-one
│ ├── level-two
│ │ ├── level-three
│ │ │ ├── level-four
│ │ │ │ ├── _index.md
│ │ │ │ ├── page-4-a.md
│ │ │ │ ├── page-4-b.md
│ │ │ │ └── page-4-c.md
│ │ │ ├── _index.md
│ │ │ ├── page-3-a.md
│ │ │ ├── page-3-b.md
│ │ │ └── page-3-c.md
│ │ ├── _index.md
│ │ ├── page-2-a.md
│ │ ├── page-2-b.md
│ │ └── page-2-c.md
│ ├── _index.md
│ ├── page-1-a.md
│ ├── page-1-b.md
│ └── page-1-c.md
├── _index.md
└── page-top.md
in the page frontmatter, add a head
param to insert any HTML code before the menu entry:
example to display a “Hello”
+++
title = "Github repo"
head ="<label>Hello</label> "
+++
in the page frontmatter, add a pre
param to insert any HTML code before the menu label:
example to display a github icon
+++
title = "Github repo"
pre ="<i class='fa fa-github'></i> "
+++
in your frontmatter add weight
param with a number to order.
+++
title="My page"
weight = 4
+++
in your frontmatter add hidden=true
param.
+++
title="My page"
hidden = true
+++
One or more menuentries can be displayed unfolded by default. (like the “Getting start” menu entry in this website)
in your frontmatter add alwaysopen=true
param.
example :
title = "Getting start"
description = ""
weight = 1
alwaysopen = true
Content organization is your content
folder structure.
Find out how to customize homepage