Front Matter

Page Designs

How to vary layouts by using page designs

Menus

Setting the behavior of the menus

Linking

What options are available for links and images

Topbar

Configure the topbar

Reference

All front matter for the Relearn theme

Subsections of Front Matter

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

Home page Home page

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.

Chapter page Chapter page

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

Default page Default page

Menus

Linking

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

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

Topbar

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:

Table of Contents

Option Front Matter Set disableToc=true to hide the TOC button on all pages. If the button is hidden, also the keyboard shortcut is disabled. This can be overridden in a page’s front matter.

disableToc = true
disableToc: true
{
   "disableToc": true
}

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

Arrow Navigation

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

C

D

E

H

I

L

M

O

S

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 = '{}'
menuPageRef = ''
menuPost = ''
menuPre = ''
menuUrl = ''
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

[[sidebarmenus]]
  disableTitle = true
  identifier = 'home'
  main = true
  pageRef = ''
  type = 'page'

[[sidebarmenus]]
  disableTitle = false
  identifier = 'shortcuts'
  main = false
  type = 'menu'
+++
---
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: '{}'
menuPageRef: ""
menuPost: ""
menuPre: ""
menuUrl: ""
mermaid:
  force: false
mermaidInitialize: '{ "securityLevel": "loose" }'
mermaidZoom: true
openapi:
  errorlevel: ""
oppenapi:
  force: false
ordersectionsby: weight
sidebarmenus:
- disableTitle: true
  identifier: home
  main: true
  pageRef: ""
  type: page
- disableTitle: false
  identifier: shortcuts
  main: false
  type: menu
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": "{}",
   "menuPageRef": "",
   "menuPost": "",
   "menuPre": "",
   "menuUrl": "",
   "mermaid": {
      "force": false
   },
   "mermaidInitialize": "{ \"securityLevel\": \"loose\" }",
   "mermaidZoom": true,
   "openapi": {
      "errorlevel": ""
   },
   "oppenapi": {
      "force": false
   },
   "ordersectionsby": "weight",
   "sidebarmenus": [
      {
         "disableTitle": true,
         "identifier": "home",
         "main": true,
         "pageRef": "",
         "type": "page"
      },
      {
         "disableTitle": false,
         "identifier": "shortcuts",
         "main": false,
         "type": "menu"
      }
   ],
   "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 = ''

# Link the menu entry to a different internal page instead.
# Default: not set
# This will effectivly hide the page and its content from the viewer by
# linking to the given URL instead.
menuPageRef = ''

# Link the menu entry to an external URL instead of a page.
# Default: not set
# This will effectivly hide the page and its content from the viewer by
# linking to the given URL instead.
menuUrl = ''

# 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

# Define your own sidebar menus.
# Default: the value used below
# The sidebar menus are built from this parameter. If not set, the set value
# of your site's hugo.toml is used and contains the below default.
# Menus are written from the sidebar's top to buttom in the order given in
# this array.
# Each entry can contain the following keys:
# - `type` is mandatory. Either `page` in case it should generate a tre from
#    the page structure or `menu` in case it should generate a tree from a
#    defined menu.
# - `identifier` is mandatory. In case of `type=page`, anything can be used,
#    in case of `type=menu` the `identifier` key must be identical to the
#    key of the menu definition.
# - `main`, boolean. If `true`, the first tree level is spaced more generous
#    and the text is emphasized. Default: `true` for `type=page` and `false`
#    for `type=menu`
# - `disableTitle`, boolean. If `true`, there is no title above the tree.
#    Default: `true` for `type=page` and `false` for `type=menu`. If a title
#    should be used, in case of `type=page` it will be taken from the page's
#    `menuTitle` front matter and if not set, from the translation files, using
#    the menu `identifier` as key. In case of `type=menu` it will be taken
#    from the menu `title` according to Hugo's documentation and if not set
#    from the menu `name` and if this is not set form the page's `linkTitle`.
# - `pageRef`, optional. In case of `type=page` this is the starting page's
#   path. If not set, the home page will be used.
sidebarmenus = [
	{ type = 'page', identifier = 'home', main = true, disableTitle = true, pageRef = '' },
	{ type = 'menu', identifier = 'shortcuts', main = false, disableTitle = false },
]

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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 = ''
+++