Page Designs

A page is displayed by exactly one page design and represented by Hugo’s reserved type front matter.

The Relearn theme offers the page designs home, chapter, and default but you can define further custom page designs.

Regardless of shipped or custom page design, you are using them in the same way.

If you have an archetype file, you can just do
```
hugo new --kind chapter chapter1/_index.md
```
If you are creating your Markdown files manually, you can achieve the same by just setting type='chapter' in the front matter.

Your resulting Markdown file needs to have at least the type front matter set to the value of the page design

+++
title = "Chapter 1"
type = "chapter"
+++

Predefined Designs

Home

A Home page is the starting page of your project. It’s best to have only one page of this kind in your project.

To create a home page, run the following command

hugo new --kind home _index.md

Chapter

A Chapter displays a page meant to be used as introduction for a set of child pages.

Commonly, it contains a title front matter and a short description in the content.

To create a chapter page, run the following command

hugo new --kind chapter chapter1/_index.md

If a numerical weight front matter is set, it will be used to generate the subtitle of the chapter page. Set the number to a consecutive value starting at 1 for each new chapter on the same directory level.

Default

A Default page is any other content page.

To create a default page, run either one of the following commands

hugo new chapter1/page1/_index.md

or

hugo new chapter1/page1.md

The navigation menu is automatically created from your content files.

All configurations options apply to all pages but can be changed in each page’s front matter.

Expand State of Nested Sections

Option Front Matter You can change how the theme submenus appear with alwaysopen.

If alwaysopen=false for any given entry, its children will not be shown in the menu as long as it is not necessary for the sake of navigation.

The theme generates the expand state based on the following rules:

all parent entries of the active page including their visible siblings are shown regardless of any settings
immediate child entries of the active page are shown regardless of any settings
if not overridden, all other first level entries behave like they would have been given alwaysopen=false
if not overridden, all other entries of levels besides the first behave like they would have been given alwaysopen=true
all visible entries show their immediate child entries if alwaysopen=true; this proceeds recursively
all remaining entries are not shown

alwaysopen = false

alwaysopen: false

{
   "alwaysopen": false
}

Expander for Nested Sections

Option Front Matter Set collapsibleMenu=true to add an expander for submenus. This shows submenus as collapsible trees with a clickable expander.

collapsibleMenu = true

collapsibleMenu: true

{
   "collapsibleMenu": true
}

Warning

Using this option may slow down your build process, especially with many pages.

We’ve seen builds taking 2 minutes with 1000+ pages, and over 30 minutes with 5000+ pages.

This happens because each new page affects all other pages, leading to exponentially longer build times.

By Weight

Hugo provides a simple way to handle order for your pages by setting the weight front matter to a number.

+++
title = 'My page'
weight = 5
+++

---
title: My page
weight: 5
---

{
   "title": "My page",
   "weight": 5
}

By Other

Option Front Matter Using the weight for sorting can get cumbersome if you, for example, just want to sort alphabetically. Each time you add a new page in the set of pages, you may have to renumber some or all of them to make space for the new page.

ordersectionsby = 'linktitle'

ordersectionsby: linktitle

{
   "ordersectionsby": "linktitle"
}

By default, the Relearn theme will use a page’s title front matter for the menu entry.

Front Matter But a page’s title has to be descriptive on its own while the menu is a hierarchy. Use linkTitle to shorten the text of the menu entry.

For example for a page named install/linux.md

+++
linkTitle = 'Linux'
title = 'Install on Linux'
+++

---
linkTitle: Linux
title: Install on Linux
---

{
   "linkTitle": "Linux",
   "title": "Install on Linux"
}

Front Matter In the page front matter, add a menuPre to insert any HTML code before the menu label. You can also set menuPost to insert HTML code after the menu label.

The example below uses the GitHub icon.

+++
menuPre = '<i class="fab fa-github"></i> '
title = 'GitHub Repo'
+++

---
menuPre: '<i class="fab fa-github"></i> '
title: GitHub Repo
---

{
   "menuPre": "\u003ci class=\"fab fa-github\"\u003e\u003c/i\u003e ",
   "title": "GitHub Repo"
}

Disable Section Pages

You may want to structure your pages in a hierarchical way but don’t want to generate pages for those sections? The theme got you covered.

To stay with the initial example: Suppose you want first-chapter/first-page appear in the sidebar but don’t want to generate a page for it. So the entry in the sidebar should not be clickable but should show an expander.

For this, open content/first-chapter/first-page/_index.md and add the following front matter

+++
collapsibleMenu = true

[_build]
  render = 'never'
+++

---
_build:
  render: never
collapsibleMenu: true
---

{
   "_build": {
      "render": "never"
   },
   "collapsibleMenu": true
}

Linking

Opening Links

Option Front Matter By default, external links open in a new tab. To change this, use the externalLinkTarget setting with a proper link target.

For example, this will open links in the same tab

externalLinkTarget = '_self'

externalLinkTarget: _self

{
   "externalLinkTarget": "_self"
}

Enabling Link and Image Link Warnings

Option Front Matter You can use link.errorlevel and image.errorlevel to control what should happen if a local link can not be resolved to a resource.

If not set or empty, any unresolved link is written as given into the resulting output. If set to warning the same happens and an additional warning is printed in the built console. If set to error an error message is printed and the build is aborted.

Please note that this can not resolve files inside of your static directory. The file must be a resource of the page or the site.

Link warnings are also available for the include and openapi shortcodes.

[image]
  errorlevel = 'warning'

[link]
  errorlevel = 'warning'

image:
  errorlevel: warning
link:
  errorlevel: warning

{
   "image": {
      "errorlevel": "warning"
   },
   "link": {
      "errorlevel": "warning"
   }
}

This page is about how to configure the topbar using configuration options. If you want to add further buttons or functionality, see this section.

Your topbar contains the following elements. Some of them are configuarable:

sidebar: opens the sidebar flyout if in mobile layout
toc: opens the table of contents in an overlay
breadcrumb: shows the clickable breadcrumbs
edit: browses to the editable page if the editURL parameter is set
print: browses to the chapters printable page if print support was activated
prev: browses to the previous page if there is one
next: browses to the next page if there is one
more: opens the overlay if screen space is limited

Breadcrumbs

Option Front Matter Set disableBreadcrumb=true to hide the breadcrumb in the topbar.

Further breadcrumbs settings can be found in the content configuration section.

disableBreadcrumb = true

disableBreadcrumb: true

{
   "disableBreadcrumb": true
}

Edit Button

Option Front Matter If editURL is set to a URL, an edit button will be shown in the topbar. If the button is hidden, also the keyboard shortcut is disabled.

The value can contain the macro ${FilePath} which will be replaced by the file path of your displayed page. If no ${FilePath} is given in the value, the value is treated as if the ${FilePath} was appended at the end of the value. This can be overridden in the pages front matter.

editURL = 'https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/${FilePath}'

editURL: https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/${FilePath}

{
   "editURL": "https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/${FilePath}"
}

Option Front Matter You can hide the previous/next buttons by setting disableNextPrev=true. If the buttons are hidden, also the keyboard shortcuts are disabled.

disableNextPrev = true

disableNextPrev: true

{
   "disableNextPrev": true
}

Front Matter Reference

Every Hugo page must have front matter.

In addition to Hugo’s standard front matter, the Relearn theme offers extras settings listed here.

Throughout the documentation, theme-specific front matter is marked with a Front Matter badge.

Add theme front matter directly to the root of your page’s front matter. For example:

+++
math = true
+++

---
math: true
---

{
   "math": true
}

Index

A

Alwaysopen (1)

C

D

E

EditURL (1)
ExternalLinkTarget (1)

H

I

L

M

O

All Front Matter

Here’s a list of all available front matter with example values. Default values are described in the annotated example below or in each front matter’s documentation.

+++
LastModifierDisplayName = ''
LastModifierEmail = ''
alwaysopen = ''
collapsibleMenu = true
customMathJaxURL = ''
customMermaidURL = ''
customOpenapiURL = ''
description = ''
disableBreadcrumb = false
disableNextPrev = false
disableToc = false
editURL = ''
externalLinkTarget = '_self'
headingPost = ''
headingPre = ''
hidden = false
highlightWrap = true
images = ['images/hero.png']
linkTitle = ''
math = false
mathJaxInitialize = '{}'
menuPost = ''
menuPre = ''
mermaidInitialize = '{ "securityLevel": "loose" }'
mermaidZoom = true
ordersectionsby = 'weight'
title = 'Example Page'
type = ''

[image]
  errorlevel = ''

[imageEffects]
  border = true
  lazy = true
  lightbox = true
  shadow = false

[include]
  errorlevel = ''

[link]
  errorlevel = ''

[mermaid]
  force = false

[openapi]
  errorlevel = ''

[oppenapi]
  force = false
+++

---
LastModifierDisplayName: ""
LastModifierEmail: ""
alwaysopen: ""
collapsibleMenu: true
customMathJaxURL: ""
customMermaidURL: ""
customOpenapiURL: ""
description: ""
disableBreadcrumb: false
disableNextPrev: false
disableToc: false
editURL: ""
externalLinkTarget: _self
headingPost: ""
headingPre: ""
hidden: false
highlightWrap: true
image:
  errorlevel: ""
imageEffects:
  border: true
  lazy: true
  lightbox: true
  shadow: false
images:
- images/hero.png
include:
  errorlevel: ""
link:
  errorlevel: ""
linkTitle: ""
math: false
mathJaxInitialize: '{}'
menuPost: ""
menuPre: ""
mermaid:
  force: false
mermaidInitialize: '{ "securityLevel": "loose" }'
mermaidZoom: true
openapi:
  errorlevel: ""
oppenapi:
  force: false
ordersectionsby: weight
title: Example Page
type: ""
---

{
   "LastModifierDisplayName": "",
   "LastModifierEmail": "",
   "alwaysopen": "",
   "collapsibleMenu": true,
   "customMathJaxURL": "",
   "customMermaidURL": "",
   "customOpenapiURL": "",
   "description": "",
   "disableBreadcrumb": false,
   "disableNextPrev": false,
   "disableToc": false,
   "editURL": "",
   "externalLinkTarget": "_self",
   "headingPost": "",
   "headingPre": "",
   "hidden": false,
   "highlightWrap": true,
   "image": {
      "errorlevel": ""
   },
   "imageEffects": {
      "border": true,
      "lazy": true,
      "lightbox": true,
      "shadow": false
   },
   "images": [
      "images/hero.png"
   ],
   "include": {
      "errorlevel": ""
   },
   "link": {
      "errorlevel": ""
   },
   "linkTitle": "",
   "math": false,
   "mathJaxInitialize": "{}",
   "menuPost": "",
   "menuPre": "",
   "mermaid": {
      "force": false
   },
   "mermaidInitialize": "{ \"securityLevel\": \"loose\" }",
   "mermaidZoom": true,
   "openapi": {
      "errorlevel": ""
   },
   "oppenapi": {
      "force": false
   },
   "ordersectionsby": "weight",
   "title": "Example Page",
   "type": ""
}

Annotated Front Matter

+++
# If an option value is said to be not set, you can achieve the same behavior
# by giving it an empty string value.

###############################################################################
# Hugo
# These options usually apply to other themes as well.

# The social media image of your page.
# Default: not set
# This is used for generating social media meta information for the opengraph
# protocol and twitter cards.
# If not set, the set value of your site's hugo.toml is used.
images = [ 'images/hero.png' ]

# The title of your page.
# Default: not set
# A page without a title is treated as a hidden page.
title = 'Example Page'

# The description of your page.
# Default: not set
# This is used for generating HTML meta tags, social media meta information
# for the opengraph protocol and twitter cards.
# If not set, the set value of your site's hugo.toml is used for the html
# meta tag, social media meta information for the opengraph protocol and
# twitter cards.
description = ''

# The page design to be used
# Default: not set
# This decides the layout of your page. The theme ships 'home', 'chapter' and
# 'default'. If not set, 'default' is taken.
type = ''

###############################################################################
# Relearn Theme
# These options are specific to the Relearn theme.

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Topbar
# These options modify the topbar appearance.

# Hide the table of contents button.
# Default: false
# If the TOC button is hidden, also the keyboard shortcut is disabled.
# If not set, the set value of your site's hugo.toml is used.
disableToc = false

# Hide the breadcrumbs.
# Default: false
# If the breadcrumbs are hidden, the title of the displayed page will still be
# shown in the topbar.
disableBreadcrumb = false

# Hide Next and Previous navigation buttons.
# Default: false
# If the navigation buttons are hidden, also the keyboard shortcuts are
# disabled.
disableNextPrev = false

# The URL prefix to edit a page.
# Default: not set
# If set, an edit button will be shown in the topbar. If the button is hidden,
# also the keyboard shortcuts are disabled. The value can contain the macro
# `${FilePath}` which will be replaced by the file path of your displayed page.
# If not set, the set value of your site's hugo.toml is used. If the global
# parameter is given but you want to hide the button for the displayed page,
# you can set the value to an empty string. If instead of hiding you want to have
# an disabled button, you can set the value to a string containing just spaces.
# This is useful if you want to give the opportunity for people to create merge
# request for your content.
editURL = ''

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Menu
# These options modify the menu appearance.

# Menu specific title
# Default: not set
# The title displayed in the menu. If not set the `title` front matter will
# be used.
linkTitle = ''

# Prefix for the title in navigation menu.
# Default: not set
# The title of the page in the menu will be prefixed by this HTML content.
menuPre = ''

# Suffix for the title in navigation menu.
# Default: not set
# The title of the page in the menu will be suffixed by this HTML content.
menuPost = ''

# The order of navigation menu submenus.
# Default: 'weight'
# Submenus can be ordered by 'weight', 'title', 'linktitle', 'modifieddate',
# 'expirydate', 'publishdate', 'date', 'length' or 'default' (adhering to
# Hugo's default sort order).
# If not set, the value of the parent menu entry is used.
ordersectionsby = 'weight'

# The initial expand state of submenus.
# Default: not set
# This controls whether submenus will be expanded (true), or collapsed (false)
# in the menu. If not set, the first menu level is set to false, all others
# levels are set to true. If not set, the value of the parent menu entry is used.
# If the displayed page has submenus, they will always been displayed expanded
# regardless of this option.
alwaysopen = ''

# Shows expander for submenus.
# Default: false
# If set to true, a submenu in the sidebar will be displayed in a collapsible
# tree view and a clickable expander is set in front of the entry.
# If not set, the set value of your site's hugo.toml is used.
collapsibleMenu = true

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Hidden pages
# These options configure how hidden pages are treated.
# A page flagged as hidden, is only removed from the navigation menu if you are
# currently not on this page or the hidden page is not part of current page's
# ancestors. For all other functionality in Hugo a hidden page behaves like any
# other page if not otherwise configured.

# Hide a page's menu entry.
# Default: false
# If this value is true, the page is hidden from the menu.
hidden = false

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Content
# These options modify how your content is displayed.

# Prefix for the title in the content area.
# Default: not set
# The title of the page heading will be prefixed by this HTML content.
headingPre = ''

# Suffix for the title in the content area.
# Default: not set
# The title of the page heading will be suffixed by this HTML content.
headingPost = ''

# Display name of the page's last editor.
# Default: not set
# If set, it will be displayed in the default footer.
LastModifierDisplayName = ''

# Email address of the page's last editor.
# Default: not set
# If set together with LastModifierDisplayName, it will be displayed in the
# default footer.
LastModifierEmail = ''

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Highlight
# These options configure how code is displayed.

# Wrap for code blocks.
# Default: true
# By default lines of code blocks wrap around if the line is too long to be
# displayed on screen. If you dislike this behavior, you can reconfigure it
# here.
# Note that lines always wrap in print mode regardless of this option.
# If not set, the set value of your site's hugo.toml is used or given as a
# parameter to individual code blocks.
highlightWrap = true

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Include
# These options configure how the include shortcode works.

# What to do when path is not resolved.
# Default: ''
# You can control what should happen if a path can not be resolved to as
# a resource or via the file system. If not set, no output will be written
# for the unresolved path. If set to `warning` the same happens and an additional
# warning is printed. If set to `error` an error message is printed and the build
# is aborted.
# If not set, the set value of your site's hugo.toml is used.
include.errorlevel = ''

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Images
# These options configure how images are displayed.

# What to do when local image link is not resolved.
# Default: ''
# You can control what should happen if a local image can not be resolved to as
# a resource. If not set, the unresolved link is written as given into the resulting
# output. If set to `warning` the same happens and an additional warning is
# printed. If set to `error` an error message is printed and the build is
# aborted.
# Please note that this can not resolve files inside of your `static` directory.
# If not set, the set value of your site's hugo.toml is used.
image.errorlevel = ''

# Image effects.
# See the documentation for how you can even add your own arbitrary effects to
# the list.
# All effect values default to the values of your site's hugo.toml and can be
# overridden through URL parameter given to the image. See the documentation for
# details.

# Default: false
imageEffects.border = true
# Default: true
imageEffects.lazy = true
# Default: true
imageEffects.lightbox = true
# Default: false
imageEffects.shadow = false

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Links
# These options configure how links are displayed.

# What to do when local page link is not resolved.
# Default: ''
# You can control what should happen if a local link can not be resolved to a
# page. If not set, the unresolved link is written as given into the resulting
# output. If set to `warning` the same happens and an additional warning is
# printed. If set to `error` an error message is printed and the build is
# aborted.
# Please note that with Hugo < 0.123.0 + `uglyURLs=true` this can lead to false
# negatives.
# If not set, the set value of your site's hugo.toml is used.
link.errorlevel = ''

# How to open external links.
# Default: '_blank'
# For external links you can define how they are opened in your browser. All
# values for the HTML `target` attribute of the `a` element are allowed. The
# default value opens external links in a separate browser tab. If you want
# to open those links in the same tab, use '_self'.
# If not set, the set value of your site's hugo.toml is used.
externalLinkTarget = '_self'

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# MathJax
# These options configure how math formulae are displayed.

# Initialization options for MathJax.
# Default: not set
# A JSON value. See the MathJaxdocumentation for possible parameter.
# If not set, the set value of your site's hugo.toml is used.
mathJaxInitialize = '{}'

# Force load Math on every page.
# Default: false
# If a, Math shortcode or codefence is found, the option will be ignored and
# Math will be loaded regardlessly. This option is useful in case you
# are using passthrough configuration to render your math. In this case no shortcode or
# codefence is involved and the library is not loaded by default so you can
# force loading it by setting `math=true`.
# This option has an alias `math.force`.
# If not set, the set value of your site's hugo.toml is used.
math = false

# URL for external MathJax library.
# Default: not set
# Specifies the remote location of the MathJax library. By default the shipped
# version will be used.
# If not set, the set value of your site's hugo.toml is used.
customMathJaxURL = '' # 'https://unpkg.com/mathjax/es5/tex-mml-chtml.js'

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Mermaid
# These options configure how Mermaid graphs are displayed.

# Make graphs panable and zoomable
# Default: false
# For huge graphs it can be helpful to make them zoomable. Zoomable graphs come
# with a reset button for the zoom.
# If not set, the set value of your site's hugo.toml is used or given as a
# parameter to individual graphs.
mermaidZoom = true

# Initialization options for Mermaid.
# Default: not set
# A JSON value. See the Mermaid documentation for possible parameter.
# If not set, the set value of your site's hugo.toml is used.
mermaidInitialize = '{ "securityLevel": "loose" }'

# Force load Mermaid on every page.
# Default: false
# If a Mermaid shortcode or codefence is found, the option will be ignored and
# Mermaid will be loaded regardlessly. This option is useful in case you
# are using scripting to render your graph. In this case no shortcode or
# codefence is involved and the library is not loaded by default so you can
# force loading it by setting `mermaid.force=true`.
# If not set, the set value of your site's hugo.toml is used.
mermaid.force = false

# URL for external Mermaid library.
# Default: not set
# Specifies the remote location of the Mermaid library. By default the shipped
# version will be used.
# If not set, the set value of your site's hugo.toml is used.
customMermaidURL = '' # 'https://unpkg.com/mermaid/dist/mermaid.min.js'

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# OpenApi
# These options configure how OpenAPI specifications are displayed.

# Load OpenAPI on every page.
# Default: false
# If a, OpenAPI shortcode or codefence is found, the option will be ignored and
# OpenAPI will be loaded regardlessly. This option is useful in case you
# are using scripting to render your spec. In this case no shortcode or
# codefence is involved and the library is not loaded by default so you can
# force loading it by setting `openapi.force=true`.
# If not set, the set value of your site's hugo.toml is used.
oppenapi.force = false

# URL for external OpenAPI library.
# Default: not set
# Specifies the remote location of the OpenAPI library. By default the shipped
# version will be used.
# If not set, the set value of your site's hugo.toml is used.
customOpenapiURL = '' # 'https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js'

# What to do when a local OpenAPI spec link is not resolved.
# Default: ''
# You can control what should happen if a local OpenAPI spec link can not be resolved
# to a resource. If not set, the unresolved link is written as given into the resulting
# output. If set to `warning` the same happens and an additional warning is
# printed. If set to `error` an error message is printed and the build is
# aborted.
# Please note that this can not resolve files inside of your `static` directory.
# If not set, the set value of your site's hugo.toml is used.
openapi.errorlevel = ''
+++

Front Matter

Page Designs

Navigation Menu

Linking

Topbar

Front Matter Reference

Page Designs

Predefined Designs

Home

Chapter

Default

Navigation Menu

Expand State of Nested Sections

Expander for Nested Sections

Ordering Sibling Menu Entries

By Weight

By Other

Custom Title for Menu Entries

Add Icon to a Menu Entry

Disable Section Pages

Linking

Opening Links

Enabling Link and Image Link Warnings

Topbar

Table of Contents

Edit Button

Arrow Navigation

Front Matter Reference

Index

A

C

D

E

H

I

L

M

O

All Front Matter

Annotated Front Matter

Front Matter

Page Designs

Navigation Menu

Linking

Topbar

Front Matter Reference

Subsections of Front Matter

Page Designs

Predefined Designs

Home

Chapter

Default

Navigation Menu

Expand State of Nested Sections

Expander for Nested Sections

Ordering Sibling Menu Entries

By Weight

By Other

Custom Title for Menu Entries

Add Icon to a Menu Entry

Disable Section Pages

Linking

Opening Links

Enabling Link and Image Link Warnings

Topbar

Table of Contents

Breadcrumbs

Edit Button

Arrow Navigation

Front Matter Reference

Index

A

C

D

E

H

I

L

M

O

All Front Matter

Annotated Front Matter