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.

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>

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.

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

Configure Search

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

In-page search: Highlights search terms on th' current plank
Search popup: Opens a popup wit' results from other planks
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.

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-menuTitle]
other = "Other Great Stuff"

Single Language Example

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

hugo.

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

  [[menu.shortcuts]]
    name = 'Showcases'
    pageRef = '/showcase'
    weight = 20

  [[menu.shortcuts]]
    name = 'Credits'
    pageRef = '/more/credits'
    weight = 30

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

  [[menu.shortcuts]]
    name = 'Categories'
    pageRef = '/categories'
    pre = '<i class="fa-fw fas fa-layer-group"></i> '
    weight = 50

menu:
  shortcuts:
  - name: GitHub Repo
    pre: '<i class="fa-fw fab fa-github"></i> '
    url: https://github.com/McShelby/hugo-theme-relearn
    weight: 10
  - name: Showcases
    pageRef: /showcase
    weight: 20
  - name: Credits
    pageRef: /more/credits
    weight: 30
  - name: Tags
    pageRef: /tags
    pre: '<i class="fa-fw fas fa-tags"></i> '
    weight: 40
  - name: Categories
    pageRef: /categories
    pre: '<i class="fa-fw fas fa-layer-group"></i> '
    weight: 50

{
   "menu": {
      "shortcuts": [
         {
            "name": "GitHub Repo",
            "pre": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e ",
            "url": "https://github.com/McShelby/hugo-theme-relearn",
            "weight": 10
         },
         {
            "name": "Showcases",
            "pageRef": "/showcase",
            "weight": 20
         },
         {
            "name": "Credits",
            "pageRef": "/more/credits",
            "weight": 30
         },
         {
            "name": "Tags",
            "pageRef": "/tags",
            "pre": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e ",
            "weight": 40
         },
         {
            "name": "Categories",
            "pageRef": "/categories",
            "pre": "\u003ci class=\"fa-fw fas fa-layer-group\"\u003e\u003c/i\u003e ",
            "weight": 50
         }
      ]
   }
}

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]]
        name = 'GitHub Repo'
        pre = '<i class="fa-fw fab fa-github"></i> '
        url = 'https://github.com/McShelby/hugo-theme-relearn'
        weight = 10

      [[languages.en.menu.shortcuts]]
        name = 'Showcases'
        pageRef = '/showcase'
        weight = 20

      [[languages.en.menu.shortcuts]]
        name = 'Credits'
        pageRef = '/more/credits'
        weight = 30

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

      [[languages.en.menu.shortcuts]]
        name = 'Categories'
        pageRef = '/categories'
        pre = '<i class="fa-fw fas fa-layer-group"></i> '
        weight = 50

  [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]]
        name = 'GitHub Repo'
        pre = '<i class="fa-fw fab fa-github"></i> '
        url = 'https://github.com/McShelby/hugo-theme-relearn'
        weight = 10

      [[languages.pir.menu.shortcuts]]
        name = 'Showcases'
        pageRef = '/showcase'
        weight = 20

      [[languages.pir.menu.shortcuts]]
        name = 'Crrredits'
        pageRef = '/more/credits'
        weight = 30

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

      [[languages.pir.menu.shortcuts]]
        name = 'Categorrries'
        pageRef = '/categories'
        pre = '<i class="fa-fw fas fa-layer-group"></i> '
        weight = 50

languages:
  en:
    languageName: English
    menu:
      shortcuts:
      - name: GitHub Repo
        pre: '<i class="fa-fw fab fa-github"></i> '
        url: https://github.com/McShelby/hugo-theme-relearn
        weight: 10
      - name: Showcases
        pageRef: /showcase
        weight: 20
      - name: Credits
        pageRef: /more/credits
        weight: 30
      - name: Tags
        pageRef: /tags
        pre: '<i class="fa-fw fas fa-tags"></i> '
        weight: 40
      - name: Categories
        pageRef: /categories
        pre: '<i class="fa-fw fas fa-layer-group"></i> '
        weight: 50
    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
      - name: GitHub Repo
        pre: '<i class="fa-fw fab fa-github"></i> '
        url: https://github.com/McShelby/hugo-theme-relearn
        weight: 10
      - name: Showcases
        pageRef: /showcase
        weight: 20
      - name: Crrredits
        pageRef: /more/credits
        weight: 30
      - name: Arrr! Tags
        pageRef: /tags
        pre: '<i class="fa-fw fas fa-tags"></i> '
        weight: 40
      - name: Categorrries
        pageRef: /categories
        pre: '<i class="fa-fw fas fa-layer-group"></i> '
        weight: 50
    title: Captain Hugo Relearrrn Theme
    weight: 2

{
   "languages": {
      "en": {
         "languageName": "English",
         "menu": {
            "shortcuts": [
               {
                  "name": "GitHub Repo",
                  "pre": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e ",
                  "url": "https://github.com/McShelby/hugo-theme-relearn",
                  "weight": 10
               },
               {
                  "name": "Showcases",
                  "pageRef": "/showcase",
                  "weight": 20
               },
               {
                  "name": "Credits",
                  "pageRef": "/more/credits",
                  "weight": 30
               },
               {
                  "name": "Tags",
                  "pageRef": "/tags",
                  "pre": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e ",
                  "weight": 40
               },
               {
                  "name": "Categories",
                  "pageRef": "/categories",
                  "pre": "\u003ci class=\"fa-fw fas fa-layer-group\"\u003e\u003c/i\u003e ",
                  "weight": 50
               }
            ]
         },
         "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
               },
               {
                  "name": "GitHub Repo",
                  "pre": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e ",
                  "url": "https://github.com/McShelby/hugo-theme-relearn",
                  "weight": 10
               },
               {
                  "name": "Showcases",
                  "pageRef": "/showcase",
                  "weight": 20
               },
               {
                  "name": "Crrredits",
                  "pageRef": "/more/credits",
                  "weight": 30
               },
               {
                  "name": "Arrr! Tags",
                  "pageRef": "/tags",
                  "pre": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e ",
                  "weight": 40
               },
               {
                  "name": "Categorrries",
                  "pageRef": "/categories",
                  "pre": "\u003ci class=\"fa-fw fas fa-layer-group\"\u003e\u003c/i\u003e ",
                  "weight": 50
               }
            ]
         },
         "title": "Captain Hugo Relearrrn Theme",
         "weight": 2
      }
   }
}

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

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

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

Sidebar

Width

Header & Footer

Search

Shortcut Menu

Width

Chang'n Menu Width

Header & Footer

Title

Home Button Configurat'n

History

Footer

Search

Configure Search

Supported Languages

Mixed Language Support

Shortcut Menu

Title

Single Language Example

Multilingual Example

Display'n Planks Only 'n th' Shortcuts Menu

Sidebar

Width

Header & Footer

Search

Shortcut Menu

Subsct'ns o' Sidebar

Width

Chang'n Menu Width

Header & Footer

Title

Home Button Configurat'n

History

Footer

Search

Configure Search

Supported Languages

Mixed Language Support

Shortcut Menu

Title

Single Language Example

Multilingual Example

Display'n Planks Only 'n th' Shortcuts Menu