Content Organisation

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

role=“alert”> _index.md is required in each folder, it’s your “folder home page”

Add header to a menu entry

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> "
+++

Add icon to a menu entry

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> "
+++

Order sibling menu/page entries

in your frontmatter add weight param with a number to order.

+++
title="My page"
weight = 4
+++

Hide a menu entry

in your frontmatter add hidden=true param.

+++
title="My page"
hidden = true
+++

Unfolded menu entry by default

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

Folder structure and file name

Content organization is your content folder structure.

Homepage

Find out how to customize homepage