Subsct'ns o' Sidebar

Width

Th' theme adjusts th' menu width based on browser size.

If ye want t' change th' chosen default width, ye can add CSS variables t' layouts/partials/custom-header.html.

Chang'n Menu Width

Th' menu width changes fer different screen sizes:

Screen Size Screen Width Menu Width
Small < 48rem 14.375rem
Medium 48rem - 60rem 14.375rem
Large >= 60rem 18.75rem

Ye can change th' menu width but not th' screen width breakpoints.

T' adjust th' menu width, use these CSS variables. Avast that --MENU-WIDTH-S be fer th' mobile menu flyout on small screens.

​
<style>
:root {
    --MENU-WIDTH-S: 14.375rem;
    --MENU-WIDTH-M: 14.375rem;
    --MENU-WIDTH-L: 18.75rem;
}
</style>

Header & Footer

Title

Opt'n Wit' th' default partials fer th' logo, Th' ship title will also be used fer th' text at th' top o' th' sidebar. If ye want t' show a different text 'n th' sidebar, ye can overwrite linkTitle.

hugo.
[params]
  linkTitle = 'Relearn'
params:
  linkTitle: Relearrrn
{
   "params": {
      "linkTitle": "Relearn"
   }
}

Home Button Configurat'n

By default, th' theme displays a home button between search form an' navigat'n menu. Th' Home button serves as an alternative t' click'n th' logo.

Default Home Button Default Home Button

Opt'n T' hide th' Home button on th' left menu, set disableLandingPageButton=true.

hugo.
[params]
  disableLandingPageButton = true
params:
  disableLandingPageButton: true
{
   "params": {
      "disableLandingPageButton": true
   }
}

Opt'n T' change its ay'con or text, configure th' landingPageName fer yer defined languages.

hugo.
[languages]
  [languages.en]
    [languages.en.params]
      landingPageName = '<i class="fa-fw fas fa-home"></i> Home'

  [languages.pir]
    [languages.pir.params]
      landingPageName = '<i class="fa-fw fas fa-home"></i> Arrr! Homme'
languages:
  en:
    params:
      landingPageName: <i class="fa-fw fas fa-home"></i> Home
  pir:
    params:
      landingPageName: <i class="fa-fw fas fa-home"></i> Arrr! Homme
{
   "languages": {
      "en": {
         "params": {
            "landingPageName": "\u003ci class=\"fa-fw fas fa-home\"\u003e\u003c/i\u003e Home"
         }
      },
      "pir": {
         "params": {
            "landingPageName": "\u003ci class=\"fa-fw fas fa-home\"\u003e\u003c/i\u003e Arrr! Homme"
         }
      }
   }
}

If this opt'n isn’t set fer a specific language, it will use these default values

hugo.
[params]
  landingPageName = '<i class="fa-fw fas fa-home"></i> Home'
params:
  landingPageName: <i class="fa-fw fas fa-home"></i> Home
{
   "params": {
      "landingPageName": "\u003ci class=\"fa-fw fas fa-home\"\u003e\u003c/i\u003e Home"
   }
}

History

Opt'n Turn on showVisitedLinks=true t' see checkmarks next t' visited planks 'n th' main menu. This also adds a Clear History opt'n at th' bottom o' th' menu t' remove all checkmarks. Avast that checkmarks will disappear if ye rebuild yer ship, as th' plank IDs may change.

hugo.
[params]
  showVisitedLinks = true
params:
  showVisitedLinks: true
{
   "params": {
      "showVisitedLinks": true
   }
}

T' change th' menu footer, edit th' layouts/partials/menu-footer.html file. Check out th' Partials section fer more ways t' cust'mize yer ship.

Search

Th' theme offers three levels o' search through th' menu’s search form:

  1. In-page search: Highlights search terms on th' current plank
  2. Search popup: Opens a popup wit' results from other planks
  3. Dedicated search plank: Access'ble by click'n th' magnifier glass or press'n ENTER

Each level requires th' previous one t' be enabled. If no search be configured, th' search form won’t appear.

Opt'n All levels be enabled by default. Dis'ble them 'n hugo.toml:

  • In-page search: disableSearch=true
  • Search popup: disableSearchIndex=true
  • Dedicated search plank: disableSearchPage=true
hugo.
[params]
  disableSearch = true
  disableSearchIndex = true
  disableSearchPage = true
params:
  disableSearch: true
  disableSearchIndex: true
  disableSearchPage: true
{
   "params": {
      "disableSearch": true,
      "disableSearchIndex": true,
      "disableSearchPage": true
   }
}

Opt'n Default URLs can be changed wit' th' follow'n parameter

  • Search popup: searchindex.js set by searchIndexURL
  • Dedicated search plank: search/index.html set by searchPageURL
hugo.
[params]
  searchIndexURL = 'omnisearchindex.js'
  searchPageURL = 'omnisearch'
params:
  searchIndexURL: omnisearchindex.js
  searchPageURL: omnisearch
{
   "params": {
      "searchIndexURL": "omnisearchindex.js",
      "searchPageURL": "omnisearch"
   }
}
Avast

Only change these if ye have rrrambl'n at those URLs. This can happen wit' uglyURLs=true 'n hugo.toml an' hav'n a rrrambl'n file at content/search.md.

Check fer duplicate URLs by runn'n hugo --printPathWarn'ns.

Supported Languages

Th' Lunr search library doesn’t support all languages o' th' theme. Unsupported languages will show errors 'n th' browser console. Currently unsupported be

  • Czech
  • Indonesian
  • Polish
  • Swahili

Mixed Language Support

Opt'n In case yer page’s rrrambl'n contains text 'n multiple languages (for example, ye be writ'n a Piratish documentat'n fer yer English API), ye can set those languages 'n additionalContentLanguage t' broaden th' search.

hugo.
[params]
  additionalContentLanguage = ['en']
params:
  additionalContentLanguage:
  - en
{
   "params": {
      "additionalContentLanguage": [
         "en"
      ]
   }
}

Ye can add multiple languages t' this array.

Avast

Use th' base language code. For example, if yer plank be us'n zh-CN, add zh t' this parameter.

Shortcut Menu

Th' sidebar contains yer content’s navigat'n menu, but ye can also add extra menu entries or shortcuts 'n a separate section.

For internal links, use th' pageRef property instead o' url. Learrrn more about Hugo’s menu configurat'n.

Title

Opt'n By default, th' shortcut menu has a title ("More" 'n English).

Ye can dis'ble this title wit' disableShortcutsTitle=true.

hugo.
[params]
  disableShortcutsTitle = true
params:
  disableShortcutsTitle: true
{
   "params": {
      "disableShortcutsTitle": true
   }
}

T' change th' title, update yer local i18n translat'n file.

​
[Shortcuts-Title]
other = "Other Great Stuff"

Single Language Example

Edit hugo.toml an' add [[menu.shortcuts]] entries fer each link:

hugo.
[menu]
  [[menu.shortcuts]]
    identifier = 'ds'
    name = '<i class="fa-fw fab fa-github"></i> GitHub Repo'
    url = 'https://github.com/McShelby/hugo-theme-relearn'
    weight = 10

  [[menu.shortcuts]]
    name = '<i class="fa-fw fas fa-camera"></i> Showcases'
    pageRef = '/showcase'
    weight = 11

  [[menu.shortcuts]]
    identifier = 'hugodoc'
    name = '<i class="fa-fw fas fa-bookmark"></i> Cap'n Hugo Documentation'
    url = 'https://gohugo.io/'
    weight = 20

  [[menu.shortcuts]]
    name = '<i class="fa-fw fas fa-bullhorn"></i> Credits'
    pageRef = '/more/credits'
    weight = 30

  [[menu.shortcuts]]
    name = '<i class="fa-fw fas fa-tags"></i> Tags'
    pageRef = '/tags'
    weight = 40
menu:
  shortcuts:
  - identifier: ds
    name: <i class="fa-fw fab fa-github"></i> GitHub Repo
    url: https://github.com/McShelby/hugo-theme-relearn
    weight: 10
  - name: <i class="fa-fw fas fa-camera"></i> Showcases
    pageRef: /showcase
    weight: 11
  - identifier: hugodoc
    name: <i class="fa-fw fas fa-bookmark"></i> Cap'n Hugo Documentat'n
    url: https://gohugo.io/
    weight: 20
  - name: <i class="fa-fw fas fa-bullhorn"></i> Credits
    pageRef: /more/credits
    weight: 30
  - name: <i class="fa-fw fas fa-tags"></i> Tags
    pageRef: /tags
    weight: 40
{
   "menu": {
      "shortcuts": [
         {
            "identifier": "ds",
            "name": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e GitHub Repo",
            "url": "https://github.com/McShelby/hugo-theme-relearn",
            "weight": 10
         },
         {
            "name": "\u003ci class=\"fa-fw fas fa-camera\"\u003e\u003c/i\u003e Showcases",
            "pageRef": "/showcase",
            "weight": 11
         },
         {
            "identifier": "hugodoc",
            "name": "\u003ci class=\"fa-fw fas fa-bookmark\"\u003e\u003c/i\u003e Cap'n Hugo Documentation",
            "url": "https://gohugo.io/",
            "weight": 20
         },
         {
            "name": "\u003ci class=\"fa-fw fas fa-bullhorn\"\u003e\u003c/i\u003e Credits",
            "pageRef": "/more/credits",
            "weight": 30
         },
         {
            "name": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e Tags",
            "pageRef": "/tags",
            "weight": 40
         }
      ]
   }
}

Multilingual Example

For multilingual sites, set different menus fer each language 'n hugo.toml:

hugo.
[languages]
  [languages.en]
    languageName = 'English'
    title = 'Hugo Relearrrn Theme'
    weight = 1

    [languages.en.menu]
      [[languages.en.menu.shortcuts]]
        identifier = 'ds'
        name = '<i class="fa-fw fab fa-github"></i> GitHub Repo'
        url = 'https://github.com/McShelby/hugo-theme-relearn'
        weight = 10

      [[languages.en.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-camera"></i> Showcases'
        pageRef = '/showcase'
        weight = 11

      [[languages.en.menu.shortcuts]]
        identifier = 'hugodoc'
        name = '<i class="fa-fw fas fa-bookmark"></i> Cap'n Hugo Documentation'
        url = 'https://gohugo.io/'
        weight = 20

      [[languages.en.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-bullhorn"></i> Credits'
        pageRef = '/more/credits'
        weight = 30

      [[languages.en.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-tags"></i> Tags'
        pageRef = '/tags'
        weight = 40

  [languages.pir]
    languageName = 'Arrr! Pirrratish'
    title = 'Captain Hugo Relearrrn Theme'
    weight = 2

    [languages.pir.menu]
      [[languages.pir.menu.shortcuts]]
        identifier = 'ds'
        name = '<i class="fa-fw fab fa-github"></i> GitHub Repo'
        url = 'https://github.com/McShelby/hugo-theme-relearn'
        weight = 10

      [[languages.pir.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-camera"></i> Showcases'
        pageRef = '/showcase'
        weight = 11

      [[languages.pir.menu.shortcuts]]
        identifier = 'hugodoc'
        name = '<i class="fa-fw fas fa-bookmark"></i> Captain Hugo Documentation'
        url = 'https://gohugo.io/'
        weight = 20

      [[languages.pir.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-bullhorn"></i> Crrredits'
        pageRef = '/more/credits'
        weight = 30

      [[languages.pir.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-tags"></i> Arrr! Tags'
        pageRef = '/tags'
        weight = 40
languages:
  en:
    languageName: English
    menu:
      shortcuts:
      - identifier: ds
        name: <i class="fa-fw fab fa-github"></i> GitHub Repo
        url: https://github.com/McShelby/hugo-theme-relearn
        weight: 10
      - name: <i class="fa-fw fas fa-camera"></i> Showcases
        pageRef: /showcase
        weight: 11
      - identifier: hugodoc
        name: <i class="fa-fw fas fa-bookmark"></i> Cap'n Hugo Documentat'n
        url: https://gohugo.io/
        weight: 20
      - name: <i class="fa-fw fas fa-bullhorn"></i> Credits
        pageRef: /more/credits
        weight: 30
      - name: <i class="fa-fw fas fa-tags"></i> Tags
        pageRef: /tags
        weight: 40
    title: Cap'n Hugo Relearrrn Theme
    weight: 1
  pir:
    languageName: Arrr! Pirrratish
    menu:
      shortcuts:
      - identifier: ds
        name: <i class="fa-fw fab fa-github"></i> GitHub Repo
        url: https://github.com/McShelby/hugo-theme-relearn
        weight: 10
      - name: <i class="fa-fw fas fa-camera"></i> Showcases
        pageRef: /showcase
        weight: 11
      - identifier: hugodoc
        name: <i class="fa-fw fas fa-bookmark"></i> Captain Hugo Documentat'n
        url: https://gohugo.io/
        weight: 20
      - name: <i class="fa-fw fas fa-bullhorn"></i> Crrredits
        pageRef: /more/credits
        weight: 30
      - name: <i class="fa-fw fas fa-tags"></i> Arrr! Tags
        pageRef: /tags
        weight: 40
    title: Captain Hugo Relearrrn Theme
    weight: 2
{
   "languages": {
      "en": {
         "languageName": "English",
         "menu": {
            "shortcuts": [
               {
                  "identifier": "ds",
                  "name": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e GitHub Repo",
                  "url": "https://github.com/McShelby/hugo-theme-relearn",
                  "weight": 10
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-camera\"\u003e\u003c/i\u003e Showcases",
                  "pageRef": "/showcase",
                  "weight": 11
               },
               {
                  "identifier": "hugodoc",
                  "name": "\u003ci class=\"fa-fw fas fa-bookmark\"\u003e\u003c/i\u003e Cap'n Hugo Documentation",
                  "url": "https://gohugo.io/",
                  "weight": 20
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-bullhorn\"\u003e\u003c/i\u003e Credits",
                  "pageRef": "/more/credits",
                  "weight": 30
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e Tags",
                  "pageRef": "/tags",
                  "weight": 40
               }
            ]
         },
         "title": "Hugo Relearrrn Theme",
         "weight": 1
      },
      "pir": {
         "languageName": "Arrr! Pirrratish",
         "menu": {
            "shortcuts": [
               {
                  "identifier": "ds",
                  "name": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e GitHub Repo",
                  "url": "https://github.com/McShelby/hugo-theme-relearn",
                  "weight": 10
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-camera\"\u003e\u003c/i\u003e Showcases",
                  "pageRef": "/showcase",
                  "weight": 11
               },
               {
                  "identifier": "hugodoc",
                  "name": "\u003ci class=\"fa-fw fas fa-bookmark\"\u003e\u003c/i\u003e Captain Hugo Documentation",
                  "url": "https://gohugo.io/",
                  "weight": 20
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-bullhorn\"\u003e\u003c/i\u003e Crrredits",
                  "pageRef": "/more/credits",
                  "weight": 30
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e Arrr! Tags",
                  "pageRef": "/tags",
                  "weight": 40
               }
            ]
         },
         "title": "Captain Hugo Relearrrn Theme",
         "weight": 2
      }
   }
}

Display'n Planks Only 'n th' Shortcuts Menu

T' show planks only 'n th' shortcuts menu ye have two choices

  1. Create a headless branch bundle, _index.md 'n its own folder wit' th' below front matter. Th' branch bundle will not be contained 'n th' sitemap.

    content/showcase/_index.en.md
    +++
title = 'Showcase'

[_build]
  list = 'never'
  publishResources = true
  render = 'always'
+++
    ---
_build:
  list: never
  publishResources: true
  render: always
title: Showcase
---
    {
   "_build": {
      "list": "never",
      "publishResources": true,
      "render": "always"
   },
   "title": "Showcase"
}

  2. Or, put a child plank inside a headless branch bundle wit' th' follow'n front matter 'n th' bundle. This causes th' child but not th' branch bundle t' be contained 'n th' sitemap.

    content/more/_index.en.md
    +++
[_build]
  list = 'never'
  publishResources = false
  render = 'never'
+++
    ---
_build:
  list: never
  publishResources: false
  render: never
---
    {
   "_build": {
      "list": "never",
      "publishResources": false,
      "render": "never"
   }
}

    Th' child plank can be any type o' rrrambl'n.

    content/more/credits_index.en.md
    +++
title = 'Credits'
+++
    ---
title: Credits
---
    {
   "title": "Credits"
}