nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-10-27 18:53:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
hugo-theme-relearn/pir/authoring/index.print.html
McShelby 3c48ac9846 deploy: 4190479458
2024-10-24 14:30:52 +00:00

3967 lines
309 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="art-x-pir" dir="rtl" itemscope itemtype="http://schema.org/Article">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.136.4">
<meta name="generator" content="Relearn 7.0.1+4ed15c8096764c75a97ef858bb3a4c0d784fe888">
<meta name="description" content="Learrrn how t&#39; create an&#39; org&#39;nize yer rrrambl&#39;n planks.
Directory StructureYer content&#39;s directory structure">
<meta name="author" content="Sören Weber">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta name="twitter:title" content="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<meta name="twitter:description" content="Learrrn how t&#39; create an&#39; org&#39;nize yer rrrambl&#39;n planks.
Directory StructureYer content&#39;s directory structure">
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/authoring/index.html">
<meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:title" content="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:description" content="Learrrn how t&#39; create an&#39; org&#39;nize yer rrrambl&#39;n planks.
Directory StructureYer content&#39;s directory structure">
<meta property="og:locale" content="art_x_pir">
<meta property="og:type" content="website">
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="name" content="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<meta itemprop="description" content="Learrrn how t&#39; create an&#39; org&#39;nize yer rrrambl&#39;n planks.
Directory StructureYer content&#39;s directory structure">
<meta itemprop="wordCount" content="42">
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="keywords" content="Reference">
<title>Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://mcshelby.github.io/hugo-theme-relearn/authoring/index.html" rel="alternate" hreflang="x-default">
<link href="https://mcshelby.github.io/hugo-theme-relearn/authoring/index.html" rel="alternate" hreflang="en">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/authoring/index.html" rel="alternate" hreflang="art-x-pir">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/authoring/index.html" rel="canonical" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/pir/authoring/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/images/logo.svg?1729780242" rel="icon" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729780242" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729780242" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/nucleus.css?1729780242" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1729780242" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1729780242" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1729780242" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fonts.css?1729780242" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1729780242" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/theme.css?1729780242" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1729780242" rel="stylesheet" id="R-variant-style">
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1729780242" rel="stylesheet" id="R-variant-chroma-style">
<link href="/hugo-theme-relearn/css/print.css?1729780242" rel="stylesheet" media="print">
<link href="/hugo-theme-relearn/css/format-print.css?1729780242" rel="stylesheet">
<script src="/hugo-theme-relearn/js/variant.js?1729780242"></script>
<script>
window.relearn = window.relearn || {};
window.relearn.relBasePath='..\/..';
window.relearn.relBaseUri='..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
window.relearn.disableAnchorCopy=false;
window.relearn.disableAnchorScrolling=false;
// variant stuff
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
// translations
window.T_Copy_to_clipboard = `Copy t' clipboard`;
window.T_Copied_to_clipboard = `Copied t' clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link t' clipboard`;
window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`;
window.T_Reset_view = `Rrreset view`;
window.T_View_reset = `View rrreset!`;
window.T_No_results_found = `No rrresults found fer "{0}"`;
window.T_N_results_found = `{1} rrresults found fer "{0}"`;
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/authoring/index.html">
<div id="R-body" class="default-animation">
<div id="R-body-overlay"></div>
<nav id="R-topbar">
<div class="topbar-wrapper">
<div class="topbar-sidebar-divider"></div>
<div class="topbar-area topbar-area-start" data-area="start">
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)"><i class="fa-fw fas fa-bars"></i></button>
</div>
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)"><i class="fa-fw fas fa-list-alt"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
</div>
</div>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Rambl&#39;n</span><meta itemprop="position" content="1"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/authoring/_index.pir.md" target="_self" title="Edit (CTRL&#43;ALT&#43;w)"><i class="fa-fw fas fa-pen"></i></a>
</div>
<div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/authoring/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)"><i class="fa-fw fas fa-print"></i></a>
</div>
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/configuration/reference/index.html" title="Options Reference (🡒)"><i class="fa-fw fas fa-chevron-left"></i></a>
</div>
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/authoring/structure/index.html" title="Directory Structure (🡐)"><i class="fa-fw fas fa-chevron-right"></i></a>
</div>
<div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Morrre"><i class="fa-fw fas fa-ellipsis-v"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<div class="topbar-area topbar-area-more" data-area="more">
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable chapter" tabindex="-1">
<div class="flex-block-wrapper">
<article class="chapter narrow">
<header class="headline">
</header>
<div class="article-subheading">T&#39; chapterrr 3</div>
<h1 id="rambln">Rambl&#39;n</h1>
<p>Learrrn how t' create an' org'nize yer rrrambl'n planks.</p>
<div class="children children-h2 children-sort-">
<h2><a href="/hugo-theme-relearn/pir/authoring/structure/index.html">Directory Structure</a></h2><p>Yer content&#39;s directory structure</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/frontmatter/index.html">Front Matter</a></h2><p>All th'ns front matter</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/meta/index.html">Meta Informat'n</a></h2><p>What plank meta informat'n be avail'ble</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/markdown/index.html">Marrrkdown Rules</a></h2><p>Reference o' CommonMark an' Marrrkdown extensions</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/imageeffects/index.html">Image Effects</a></h2><p>How t' apply graphical effects t' yer images</p>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
</ul>
</div>
</footer>
</article>
<section>
<h1 class="a11y-only">Subsct&#39;ns o&#39; Rambl&#39;n</h1>
<article class="default">
<header class="headline">
</header>
<h1 id="directory-structure">Directory Structure</h1>
<p>In <strong>Cap'n Hugo</strong>, planks be th' core o' yer ship.</p>
<p>Th' theme generates th' navigat'n menu out o' th' given directory structure.</p>
<p>Org'nize yer ship like <a href="https://gohugo.io/content/structure/" rel="external" target="_self">any other Cap'n Hugo project</a>. Typically, ye will have a <em>rrrambl'n</em> directory wit' all yer planks.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">rrrambl'n
</span></span><span class="line"><span class="cl">├── first-chapter
</span></span><span class="line"><span class="cl">│ ├── first-page
</span></span><span class="line"><span class="cl">| | |── _index.md
</span></span><span class="line"><span class="cl">| │ ├── first-sub-page
</span></span><span class="line"><span class="cl">| | | |── _index.md
</span></span><span class="line"><span class="cl">| | | |── picture1.png
</span></span><span class="line"><span class="cl">| | | └── plain.txt
</span></span><span class="line"><span class="cl">│ ├── second-page
</span></span><span class="line"><span class="cl">| | |── index.md
</span></span><span class="line"><span class="cl">| | |── picture1.png
</span></span><span class="line"><span class="cl">| | └── picture2.png
</span></span><span class="line"><span class="cl">│ └── third-page.md
</span></span><span class="line"><span class="cl">└── _index.md</span></span></code></pre></div>
<div class="box notices cstyle note">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-circle"></i> Avast
</div>
<div class="box-content">
<p>While ye can also go different, <code>_index.md</code> (with an underscore) be recommended fer each directory, it&rsquo;s yer <em>directory&rsquo;s home plank</em>.</p>
<p>See <a href="https://gohugo.io/content-management/" rel="external" target="_self">Hugo&rsquo;s guide fer rrrambl'n </a> t' learn more.</p>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/explanation/index.html">Explanation</a></li>
</ul>
</div>
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="front-matter">Front Matter</h1>
<div class="children children-h2 children-sort-">
<h2><a href="/hugo-theme-relearn/pir/authoring/frontmatter/designs/index.html">Plank Designs</a></h2><p>How t' vary layouts by us'n plank designs</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/frontmatter/menu/index.html">Menus</a></h2><p>Sett'n th' behavior o' th' menus</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/frontmatter/linking/index.html">Link'n</a></h2><p>What opt'ns be avail'ble fer links an' images</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html">Topbar</a></h2><p>Configure th' topbar</p>
<h2><a href="/hugo-theme-relearn/pir/authoring/frontmatter/reference/index.html">Front Matter Reference</a></h2><p>All front matter fer th' Relearrrn theme</p>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
</ul>
</div>
</footer>
</article>
<section>
<h1 class="a11y-only">Subsct&#39;ns o&#39; Front Matter</h1>
<article class="default">
<header class="headline">
</header>
<h1 id="page-designs">Page Designs</h1>
<p>A plank be displayed by exactly one plank design an' represented by <a href="https://gohugo.io/content-management/front-matter/#type" rel="external" target="_self">Hugo&rsquo;s reserved <code>type</code> front matter</a>.</p>
<p>Th' Relearrrn theme offers th' plank designs <code>home</code>, <code>chapter</code>, an' <code>default</code> but ye can <a href="/hugo-theme-relearn/pir/configuration/customization/designs/index.html">define further custom plank designs</a>.</p>
<p>Regardless o' shipped or custom plank design, ye be us'n them 'n th' same way.</p>
<ul>
<li>
<p>If ye have an <a href="https://gohugo.io/content-management/archetypes/" rel="external" target="_self">archetype file</a>, ye can just do</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter chapter1/_index.md</span></span></code></pre></div>
</li>
<li>
<p>If ye be creat'n yer Marrrkdown files manually, ye can achieve th' same by just sett'n <code>type='chapter'</code> 'n th' front matter.</p>
</li>
</ul>
<p>Yer result'n Marrrkdown file needs t' have at least th' <code>type</code> front matter set t' th' value o' th' plank design</p>
<div class="tab-panel" data-tab-group="3e4a6c6394d8cbee12d5795beafd6d4e">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="_indexmd"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('3e4a6c6394d8cbee12d5795beafd6d4e','_indexmd')"
>
<span class="tab-nav-text">_index.md</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="_indexmd"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Chapter 1&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;chapter&#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
</div>
</div><h2 id="predefined-designs">Predefined Designs</h2>
<h3 id="archetypes-home">Home</h3>
<p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
<p>T' create a home plank, run th' follow'n command</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div>
<p><a href="#R-image-afb0786e605fd15c05b26c2ddd38de82" class="lightbox-link"><img alt="Home page" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="/hugo-theme-relearn/authoring/frontmatter/designs/pages-home.png?width=60pc" style=" height: auto; width: 60pc;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-afb0786e605fd15c05b26c2ddd38de82"><img alt="Home page" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="/hugo-theme-relearn/authoring/frontmatter/designs/pages-home.png?width=60pc"></a></p>
<h3 id="archetypes-chapter">Chapter</h3>
<p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks.</p>
<p>Commonly, it contains a title front matter an' a short descript'n 'n th' rrrambl'n.</p>
<p>T' create a chapter plank, run th' follow'n command</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter chapter1/_index.md</span></span></code></pre></div>
<p>If a numerical <code>weight</code> front matter be set, it will be used t' generate th' subtitle o' th' chapter plank. Set th' number t' a consecutive value start'n at 1 fer each new chapter on th' same directory level.</p>
<p><a href="#R-image-6d54e8d4a8cc7f81a7803f7aa2fd78b2" class="lightbox-link"><img alt="Chapter page" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="/hugo-theme-relearn/authoring/frontmatter/designs/pages-chapter.png?width=60pc" style=" height: auto; width: 60pc;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-6d54e8d4a8cc7f81a7803f7aa2fd78b2"><img alt="Chapter page" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="/hugo-theme-relearn/authoring/frontmatter/designs/pages-chapter.png?width=60pc"></a></p>
<h3 id="archetypes-default">Default</h3>
<p>A <strong>Default</strong> plank be any other rrrambl'n plank.</p>
<p>T' create a default plank, run either one o' th' follow'n commands</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new chapter1/page1/_index.md</span></span></code></pre></div>
<p>or</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new chapter1/page1.md</span></span></code></pre></div>
<p><a href="#R-image-3dfdbe55ee761af0c6880e8210d5077d" class="lightbox-link"><img alt="Default page" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="/hugo-theme-relearn/authoring/frontmatter/designs/pages-default.png?width=60pc" style=" height: auto; width: 60pc;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-3dfdbe55ee761af0c6880e8210d5077d"><img alt="Default page" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="/hugo-theme-relearn/authoring/frontmatter/designs/pages-default.png?width=60pc"></a></p>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
</ul>
</div>
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="navigation-menu">Navigation Menu</h1>
<p>Th' theme can build menu trees from <a href="/hugo-theme-relearn/pir/authoring/structure/index.html">th' structure o' yer plank files</a> or from <a href="https://gohugo.io/content-management/menus/" rel="external" target="_self">Hugo&rsquo;s build 'n menu feature</a>.</p>
<ul>
<li>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> All configurat'n opt'ns 'n yer <code>hugo.toml</code> apply t' all menus but can be changed individually.</p>
</li>
<li>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> In case o' plank structure menus, individual configurat'n be done via a page&rsquo;s front matter.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span>. In case o' Cap'n Hugo menus, individual configurat'n be done via a menu entry&rsquo;s configurat'n.</p>
</li>
</ul>
<h2 id="expand-state-of-submenus">Expand State o' Submenus</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Ye can change how submenus appear wit' <code>alwaysopen</code>.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span> For Cap'n Hugo menus, ye have t' set <code>params.alwaysopen</code> instead.</p>
<p>If <code>alwaysopen=false</code> fer any given entry, its children will not be shown 'n th' menu as long as it be not necessary fer th' sake o' navigat'n.</p>
<p>Th' theme generates th' expand state based on th' follow'n rules:</p>
<ul>
<li>all parent entries o' th' active plank includ'n their <a href="/hugo-theme-relearn/pir/authoring/meta/index.html#hidden">vis'ble</a> sibl'ns be shown regardless o' any sett'ns</li>
<li>immediate child entries o' th' active entry be shown regardless o' any sett'ns</li>
<li>if not overridden, all other first level entries behave like they would have been given <code>alwaysopen=false</code></li>
<li>if not overridden, all other entries o' levels besides th' first behave like they would have been given <code>alwaysopen=true</code></li>
<li>all <a href="/hugo-theme-relearn/pir/authoring/meta/index.html#hidden">vis'ble</a> entries show their immediate child entries if <code>alwaysopen=true</code>; this proceeds recursively</li>
<li>all remain'n entries be not shown</li>
</ul>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">alwaysopen</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">alwaysopen</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;alwaysopen&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="expander-for-submenus">Expander fer Submenus</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Set <code>collapsibleMenu=true</code> t' show submenus as collaps'ble trees wit' a click'ble expander.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span> For Cap'n Hugo menus, ye have t' set <code>params.collapsibleMenu=true</code> instead.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">collapsibleMenu</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">collapsibleMenu</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;collapsibleMenu&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<div class="box notices cstyle warning">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-triangle"></i> Arrr
</div>
<div class="box-content">
<p>Us'n this opt'n may cause degraded build performance by slow'n down yer build process.</p>
<p>This be usually th' case fer menus wit' many entries an' happens fer plank menus as well as fer Cap'n Hugo menus.</p>
<p>We&rsquo;ve seen builds tak'n 2 minutes wit' 1000+ planks, an' over 30 minutes wit' 5000+ planks when us'n a plank menu.</p>
<p>This happens because each new plank affects all other planks, lead'n t' exponentially longer build times.</p>
</div>
</div>
<h2 id="ordering-menu-entries">Order'n Menu Entries</h2>
<h3 id="by-weight">By Weight</h3>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span> Cap'n Hugo provides a <a href="https://gohugo.io/getting-started/glossary/#weight" rel="external" target="_self">simple way</a> t' handle order o' yer entries by sett'n th' <code>weight</code> front matter t' a number.</p>
<p>Cap'n Hugo menus can only be sorted us'n th' weight method.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">5</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">5</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;weight&#34;</span><span class="p">:</span> <span class="mi">5</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h3 id="by-other">By Other</h3>
<p>Us'n th' <code>weight</code> fer sort'n can get cumbersome if ye, fer example, just want t' sort alphabetically. Each time ye add a new plank 'n th' set o' planks, ye may have t' renumber some or all o' them t' make space fer th' new plank.</p>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Use <code>ordersectionsby</code> t' sort by other aspects. See th' <a href="/hugo-theme-relearn/pir/shortcodes/children/index.html#parameter">children shortcode</a> fer a complete list.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s1">&#39;linktitle&#39;</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">ordersectionsby</span><span class="p">:</span><span class="w"> </span><span class="l">linktitle</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;ordersectionsby&#34;</span><span class="p">:</span> <span class="s2">&#34;linktitle&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="title-for-menu-entries">Title fer Menu Entries</h2>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> A page&rsquo;s <code>linkTitle</code> or <code>title</code> front matter will be used fer nam'n a menu entry o' a plank menu, 'n that order if both be defined. Us'n <code>linkTitle</code> helps t' shorten th' text fer menu entries if th' page’s title be too descriptive.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span> A menu entry&rsquo;s <code>title</code> or <code>name</code> will be used fer nam'n a menu entry o' a Cap'n Hugo menu, 'n that order if both be defined.</p>
<p>For example fer a plank named <code>install/linux.md</code></p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">linkTitle</span> <span class="p">=</span> <span class="s1">&#39;Linux&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Install on Linux&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">linkTitle</span><span class="p">:</span><span class="w"> </span><span class="l">Linux</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Install on Linux</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;linkTitle&#34;</span><span class="p">:</span> <span class="s2">&#34;Linux&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Install on Linux&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="icons-for-menu-entries">Ay'cons fer Menu Entries</h2>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> For plank menus, add a <code>menuPre</code> t' insert any HTML code before th' menu label. Ye can also set <code>menuPost</code> t' insert HTML code after th' menu label.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span> For Cap'n Hugo menus, add a <code>pre</code> t' insert any HTML code before th' menu label. Ye can also set <code>post</code> t' insert HTML code after th' menu label.</p>
<p>If <code>pageRef</code> be set fer th' menu entry an' no <code>pre</code> or <code>post</code> was configured, <code>menuPre</code> an' <code>menuPost</code> o' th' referenced plank will be taken.</p>
<p>Th' example below uses th' GitHub ay'con fer an entry o' a plank menu.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s1">&#39;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i&gt; &#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;GitHub Repo&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">menuPre</span><span class="p">:</span><span class="w"> </span><span class="s1">&#39;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i&gt; &#39;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">GitHub Repo</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;menuPre&#34;</span><span class="p">:</span> <span class="s2">&#34;\u003ci class=\&#34;fab fa-github\&#34;\u003e\u003c/i\u003e &#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;GitHub Repo&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="disable-menu-entries">Dis'ble Menu Entries</h2>
<p>Ye may want t' structure yer entries 'n a hierarchical way but don&rsquo;t want t' generate click'ble parent entries? Th' theme got ye covered.</p>
<h3 id="for-page-menus">For Plank Menus</h3>
<p>T' stay wit' th' <a href="/hugo-theme-relearn/pir/authoring/structure/index.html">initial example</a>: Suppose ye want <code>first-chapter/first-page</code> appear 'n th' sidebar but don&rsquo;t want t' generate a plank fer it. So th' entry 'n th' sidebar should not be click'ble but should be expand'ble.</p>
<p>For this, open <code>content/first-chapter/first-page/_index.md</code> an' add th' follow'n front matter</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">_build</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">render</span> <span class="p">=</span> <span class="s1">&#39;never&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">_build</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">render</span><span class="p">:</span><span class="w"> </span><span class="l">never</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;_build&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;render&#34;</span><span class="p">:</span> <span class="s2">&#34;never&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h3 id="for-hugo-menus">For Cap'n Hugo Menus</h3>
<p>Just don&rsquo;t give yer parent menu entry configurat'n a <code>url</code> or <code>pageRef</code>. See th' <a href="/hugo-theme-relearn/pir/authoring/frontmatter/menu/index.html#title-for-menus">next section</a> fer a special case.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">menu</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">addendum</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;Parent 1&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">1</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">addendum</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;Child 1&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s1">&#39;Parent 1&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s1">&#39;https://example.com/1&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">addendum</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;Parent 2&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">2</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">addendum</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;Child 2&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s1">&#39;Parent 2&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s1">&#39;https://example.com/2&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">menu</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">addendum</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Parent 1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Child 1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">parent</span><span class="p">:</span><span class="w"> </span><span class="l">Parent 1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l">https://example.com/1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Parent 2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Child 2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">parent</span><span class="p">:</span><span class="w"> </span><span class="l">Parent 2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l">https://example.com/2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;menu&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;addendum&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;Parent 1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;weight&#34;</span><span class="p">:</span> <span class="mi">1</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;Child 1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;parent&#34;</span><span class="p">:</span> <span class="s2">&#34;Parent 1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;url&#34;</span><span class="p">:</span> <span class="s2">&#34;https://example.com/1&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;Parent 2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;weight&#34;</span><span class="p">:</span> <span class="mi">2</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;Child 2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;parent&#34;</span><span class="p">:</span> <span class="s2">&#34;Parent 2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;url&#34;</span><span class="p">:</span> <span class="s2">&#34;https://example.com/2&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="title-for-menus">Title fer Menus</h2>
<p>Each menu may have an optional title above its tree. This must be activated fer each <a href="/hugo-theme-relearn/pir/authoring/frontmatter/menu/index.html#parameter">menu by sett'n <code>disableMenuTitle=false</code> fer each sidebar menu configurat'n</a>.</p>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> For plank menus, set th' <code>menuTitle</code> front matter fer th' root plank o' th' menu. For example 'n th' home plank fer th' default sidebar menu. If no <code>menuTitle</code> was set, th' title will be taken from yer translat'n files by th' key <code>&lt;identifier&gt;-menuTitle</code>, whar' <code>&lt;identifier&gt;</code> be th' identifier o' yer sidebar menu configurat'n.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span> For Cap'n Hugo menus, th' title will be taken from yer translat'n files by th' key <code>&lt;identifier&gt;-menuTitle</code>, whar' <code>&lt;identifier&gt;</code> be th' identifier o' yer sidebar menu configurat'n.</p>
<p>If ye don&rsquo;t want t' fiddle around wit' yer translat'n files, ye also have th' possibility t' let th' title be taken from th' menu definit'n. For that, define a nested menu that only has one top-level entry without <code>url</code> or <code>pageRef</code>.</p>
<p>In this case, th' <code>title</code> or <code>name</code> be taken fer th' menu head'n.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">menu</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">addendum</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;A Menu Title fer th' Whole Menu&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">addendum</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;A Menu Entry Title fer Child 1&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s1">&#39;Parent&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s1">&#39;https://example.com/1&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">1</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">addendum</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;A Menu Entry Title fer Child 2&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s1">&#39;Parent&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s1">&#39;https://example.com/2&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">2</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">menu</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">addendum</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">A Menu Title fer th' Whole Menu</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">A Menu Entry Title fer Child 1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">parent</span><span class="p">:</span><span class="w"> </span><span class="l">Parent</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l">https://example.com/1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">A Menu Entry Title fer Child 2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">parent</span><span class="p">:</span><span class="w"> </span><span class="l">Parent</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l">https://example.com/2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;menu&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;addendum&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;A Menu Title fer th' Whole Menu&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;A Menu Entry Title fer Child 1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;parent&#34;</span><span class="p">:</span> <span class="s2">&#34;Parent&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;url&#34;</span><span class="p">:</span> <span class="s2">&#34;https://example.com/1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;weight&#34;</span><span class="p">:</span> <span class="mi">1</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;A Menu Entry Title fer Child 2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;parent&#34;</span><span class="p">:</span> <span class="s2">&#34;Parent&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;url&#34;</span><span class="p">:</span> <span class="s2">&#34;https://example.com/2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;weight&#34;</span><span class="p">:</span> <span class="mi">2</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="defining-sidebar-menus">Defin'n Sidebar Menus</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Menus be defined us'n th' <code>sidebarmenus</code> opt'n.</p>
<p>Ye can define as many menus, as ye like. If ye don&rsquo;t overwrite this opt'n, th' theme defaults t'</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">sidebarmenus</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">disableTitle</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;home&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">main</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;page&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">sidebarmenus</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">disableTitle</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;shortcuts&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">main</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;menu&#39;</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">sidebarmenus</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">disableTitle</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">home</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">main</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">pageRef</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">plank</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">disableTitle</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">shortcuts</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">main</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">menu</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;sidebarmenus&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableTitle&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;home&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;main&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;pageRef&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;page&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableTitle&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;shortcuts&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;main&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;menu&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td><em>&lt;empty&gt;</em></td>
<td>Th' type o' menu.<br><br>- <code>plank</code> fer a plank menu<br>- <code>menu</code> fer a Cap'n Hugo menu</td>
</tr>
<tr>
<td>identifier</td>
<td><em>&lt;empty&gt;</em></td>
<td>A unique identifier fer this entry<br><br>- fer <code>type=page</code> an arbitrary name<br>- fer <code>page=menu</code> th' identifier o' th' menu definit'n 'n yer <code>hugo.toml</code></td>
</tr>
<tr>
<td>main</td>
<td>see notes</td>
<td>Whether t' add additional spac'n an' larger text t' th' menu<br><br>- fer <code>type=page</code> defaults t' <code>true</code><br>- fer <code>page=menu</code> defaults t' <code>false</code></td>
</tr>
<tr>
<td>disableTitle</td>
<td>see notes</td>
<td>Whether t' print a title above th' menu<br><br>- fer <code>type=page</code> defaults t' <code>true</code><br>- fer <code>page=menu</code> defaults t' <code>false</code></td>
</tr>
<tr>
<td>pageRef</td>
<td><em>&lt;empty&gt;</em></td>
<td>Only fer <code>type=page</code>, th' plank path t' start th' menu tree. If not set, defaults t' th' home plank.</td>
</tr>
</tbody>
</table>
<h2 id="redefining-sidebar-menus-for-certain-pages">Redefin'n Sidebar Menus fer Certain Planks</h2>
<p>Suppose ye be build'n a ship that contains a topmost <code>blog</code> an' <code>documentat'n</code> section.</p>
<p>When th' user be on one o' th' blog planks he should only see a menu contain'n all blog planks, while on a documentat'n plank he should only see a menu contain'n all doc planks.</p>
<p>Directory structure:</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">rrrambl'n
</span></span><span class="line"><span class="cl">├── blog
</span></span><span class="line"><span class="cl">│ ├── post-1.md
</span></span><span class="line"><span class="cl">│ ├── post-2.md
</span></span><span class="line"><span class="cl">│ ├── post-3.md
</span></span><span class="line"><span class="cl">│ └── _index_.md
</span></span><span class="line"><span class="cl">├── docs
</span></span><span class="line"><span class="cl">│ ├── topic-1.md
</span></span><span class="line"><span class="cl">│ ├── topic-2.md
</span></span><span class="line"><span class="cl">│ ├── topic-3.md
</span></span><span class="line"><span class="cl">│ └── _index_.md
</span></span><span class="line"><span class="cl">└── _index.md</span></span></code></pre></div>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Us'n <a href="https://gohugo.io/content-management/front-matter/#cascade" rel="external" target="_self">Hugo&rsquo;s cascade feature</a>, we can redefine th' menus once 'n <code>blog/_index.md</code> an' <code>docs/_index.md</code> sett'n <code>sidebarmenus</code> so they will be used 'n all children planks.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">blog/_index.md</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Blog&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">cascade</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">cascade</span><span class="p">.</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">cascade</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">sidebarmenus</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;blog&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s1">&#39;/blog&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;page&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">cascade</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">sidebarmenus</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">blog</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">pageRef</span><span class="p">:</span><span class="w"> </span><span class="l">/blog</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">plank</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Blog</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;cascade&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;sidebarmenus&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;blog&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;pageRef&#34;</span><span class="p">:</span> <span class="s2">&#34;/blog&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;page&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Blog&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">docs/_index.md</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Documentation&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">cascade</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">cascade</span><span class="p">.</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">cascade</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">sidebarmenus</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;docs&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s1">&#39;/docs&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;page&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">cascade</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">sidebarmenus</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">docs</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">pageRef</span><span class="p">:</span><span class="w"> </span><span class="l">/docs</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">plank</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Documentat'n</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;cascade&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;sidebarmenus&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;docs&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;pageRef&#34;</span><span class="p">:</span> <span class="s2">&#34;/docs&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;page&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Documentation&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
</ul>
</div>
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="linking">Linking</h1>
<h2 id="opening-links">Open'n Links</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> By default, external links open 'n a new tab. T' change this, use th' <code>externalLinkTarget</code> sett'n wit' a proper <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target" rel="external" target="_self">link target</a>.</p>
<p>For example, this will open links 'n th' same tab</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">externalLinkTarget</span> <span class="p">=</span> <span class="s1">&#39;_self&#39;</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">externalLinkTarget</span><span class="p">:</span><span class="w"> </span><span class="l">_self</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;externalLinkTarget&#34;</span><span class="p">:</span> <span class="s2">&#34;_self&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="enabling-link-and-image-link-warnings">Enabl'n Link an' Image Link Warn'ns</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Ye can use <code>link.errorlevel</code> an' <code>image.errorlevel</code> t' control what should happen if a local link can not be resolved t' a resource.</p>
<p>If not set or empty, any unresolved link be written as given into th' result'n output. If set t' <code>warning</code> th' same happens an' an additional warning be printed 'n th' built console. If set t' <code>error</code> an error message be printed an' th' build be aborted.</p>
<p>Please note that this can not resolve files inside o' yer <code>static</code> directory. Th' file must be a resource o' th' plank or th' ship.</p>
<p>Link warnings be also avail'ble fer th' <a href="/hugo-theme-relearn/pir/shortcodes/include/index.html#enabling-link-warnings">include</a> an' <a href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html#enabling-link-warnings">openapi</a> shorrrtcodes.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">image</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;warning&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">link</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;warning&#39;</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">image</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="l">warning</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">link</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="l">warning</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;image&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;errorlevel&#34;</span><span class="p">:</span> <span class="s2">&#34;warning&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;link&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;errorlevel&#34;</span><span class="p">:</span> <span class="s2">&#34;warning&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
</ul>
</div>
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="topbarrr">Topbarrr</h1>
<p>This plank be about how t' configure th' topbar us'n configurat'n opt'ns. If ye want t' add further buttons or functionality, <a href="/hugo-theme-relearn/pir/configuration/customization/topbar/index.html">see this section</a>.</p>
<p>Yer topbar contains th' follow'n elements. Some o' them be configuar'ble:</p>
<ul>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-bars"></i></span></span> <strong>sidebar</strong>: opens th' sidebar flyout if 'n mobile layout</li>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-list-alt"></i></span></span> <strong>toc</strong>: <a href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#table-of-contents">opens th' t'ble o' contents 'n an overlay</a></li>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-empty"></i></span></span> <strong>breadcrumb</strong>: shows th' click'ble <a href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#breadcrumbs">breadcrumbs</a></li>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-pen"></i></span></span> <strong>edit</strong>: browses t' th' edit'ble plank if th' <code>editURL</code> <a href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#edit-button">parameter be set</a></li>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-print"></i></span></span> <strong>print</strong>: browses t' th' chapters print'ble plank if <a href="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#print-support">print support</a> was activated</li>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-chevron-left"></i></span></span> <strong>prev</strong>: browses t' th' <a href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#arrow-navigation">previous plank</a> if there be one</li>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-chevron-right"></i></span></span> <strong>next</strong>: browses t' th' <a href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#arrow-navigation">next plank</a> if there be one</li>
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-ellipsis-v"></i></span></span> <strong>more</strong>: opens th' overlay if screen space be limited</li>
</ul>
<h2 id="table-of-contents">T'ble o' Contents</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Set <code>disableToc=true</code> t' hide th' TOC button on all planks. If th' button be hidden, also th' keyboard shortcut be disabled. This can be overridden 'n a page&rsquo;s front matter.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">disableToc</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">disableToc</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableToc&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="breadcrumbs">Breadcrumbs</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Set <code>disableBreadcrumb=true</code> t' hide th' breadcrumb 'n th' topbar.</p>
<p>Further breadcrumbs sett'ns can be found 'n th' <a href="/hugo-theme-relearn/pir/configuration/content/titles/index.html">rrrambl'n configurat'n section</a>.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">disableBreadcrumb</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">disableBreadcrumb</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableBreadcrumb&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="edit-button">Edit Button</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> If <code>editURL</code> be set t' a URL, an edit button will be shown 'n th' topbar. If th' button be hidden, also th' keyboard shortcut be disabled.</p>
<p>Th' value can contain th' macro <code>${FilePath}</code> which will be replaced by th' file path o' yer displayed plank. If no <code>${FilePath}</code> be given 'n th' value, th' value be treated as if th' <code>${FilePath}</code> was appended at th' end o' th' value. This can be overridden 'n th' planks front matter.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">editURL</span> <span class="p">=</span> <span class="s1">&#39;https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/${FilePath}&#39;</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">editURL</span><span class="p">:</span><span class="w"> </span><span class="l">https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/${FilePath}</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;editURL&#34;</span><span class="p">:</span> <span class="s2">&#34;https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/${FilePath}&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="arrow-navigation">Arrow Navigat'n</h2>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Ye can hide th' previous/next buttons by sett'n <code>disableNextPrev=true</code>. If th' buttons be hidden, also th' keyboard shortcuts be disabled.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">disableNextPrev</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">disableNextPrev</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableNextPrev&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
</ul>
</div>
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="front-matter-reference">Front Matter Reference</h1>
<p>Every Cap'n Hugo plank must have front matter.</p>
<p>In addit'n t' <a href="https://gohugo.io/content-management/front-matter/#fields" rel="external" target="_self">Hugo&rsquo;s standard front matter</a>, th' Relearrrn theme offers extras sett'ns listed here.</p>
<p>Throughout th' documentat'n, theme-specific front matter be marked wit' a <span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> badge.</p>
<p>Add theme front matter directly t' th' root o' yer page&rsquo;s front matter. For example:</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">math</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">math</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;math&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="index">Index</h2>
<h3 id="a">A</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/alwaysopen/index.html">Alwaysopen</a> (1)</li>
</ul>
<h3 id="c">C</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/collapsiblemenu/index.html">CollapsibleMenu</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/custommathjaxurl/index.html">CustomMathJaxURL</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/custommermaidurl/index.html">CustomMermaidURL</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/customopenapiurl/index.html">CustomOpenapiURL</a> (1)</li>
</ul>
<h3 id="d">D</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/description/index.html">Descript'n</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/disablebreadcrumb/index.html">DisableBreadcrumb</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/disablenextprev/index.html">DisableNextPrev</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/disabletoc/index.html">DisableToc</a> (1)</li>
</ul>
<h3 id="e">E</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/editurl/index.html">EditURL</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/externallinktarget/index.html">ExternalLinkTarget</a> (1)</li>
</ul>
<h3 id="h">H</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/headingpost/index.html">HeadingPost</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/headingpre/index.html">HeadingPre</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/hidden/index.html">Hidden</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/highlightwrap/index.html">HighlightWrap</a> (1)</li>
</ul>
<h3 id="i">I</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/image.errorlevel/index.html">Image.errorlevel</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/imageeffects/index.html">ImageEffects</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/include.errorlevel/index.html">Include.errorlevel</a> (1)</li>
</ul>
<h3 id="l">L</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/lastmodifierdisplayname/index.html">LastModifierDisplayName</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/lastmodifieremail/index.html">LastModifierEmail</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/link.errorlevel/index.html">Link.errorlevel</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/linktitle/index.html">LinkTitle</a> (1)</li>
</ul>
<h3 id="m">M</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/math/index.html">Math</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/math.force/index.html">Math.force</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/mathjaxinitialize/index.html">MathJaxInitialize</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/menupost/index.html">MenuPost</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/menupre/index.html">MenuPre</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/mermaid.force/index.html">Merrrmaid.force</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/mermaidinitialize/index.html">MermaidInitialize</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/mermaidzoom/index.html">MermaidZoom</a> (1)</li>
</ul>
<h3 id="o">O</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/openapi.errorlevel/index.html">Openapi.errorlevel</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/openapi.force/index.html">Openapi.force</a> (1)</li>
<li><a href="/hugo-theme-relearn/pir/frontmatter/ordersectionsby/index.html">Ordersectionsby</a> (2)</li>
</ul>
<h3 id="s">S</h3>
<ul class="columnize">
<li><a href="/hugo-theme-relearn/pir/frontmatter/sidebarmenus/index.html">Sidebarmenus</a> (1)</li>
</ul>
<h2 id="all-front-matter">All Front Matter</h2>
<p>Here&rsquo;s a list o' all avail'ble front matter wit' example values. Default values be described 'n th' <a href="/hugo-theme-relearn/pir/authoring/frontmatter/reference/index.html#annotated-front-matter">annotated example</a> below or 'n each front matter&rsquo;s documentat'n.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierDisplayName</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierEmail</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">alwaysopen</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">collapsibleMenu</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">customMathJaxURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">customMermaidURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">customOpenapiURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">descript'n</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">disableBreadcrumb</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">disableNextPrev</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">disableToc</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">editURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">externalLinkTarget</span> <span class="p">=</span> <span class="s1">&#39;_self&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">headingPost</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">headingPre</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">hidden</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">highlightWrap</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">images</span> <span class="p">=</span> <span class="p">[</span><span class="s1">&#39;images/hero.png&#39;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">linkTitle</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">math</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">mathJaxInitialize</span> <span class="p">=</span> <span class="s1">&#39;{}&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuPost</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s1">&#39;{ &#34;securityLevel&#34;: &#34;loose&#34; }&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">mermaidZoom</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s1">&#39;weight&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Example Page&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">image</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">imageEffects</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">include</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">link</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">mermaid</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">force</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">openapi</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">oppenapi</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">force</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">sidebarmenus</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">disableTitle</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;home&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">main</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;page&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">sidebarmenus</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">disableTitle</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;shortcuts&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">main</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;menu&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">LastModifierDisplayName</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">LastModifierEmail</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">alwaysopen</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">collapsibleMenu</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">customMathJaxURL</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">customMermaidURL</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">customOpenapiURL</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">descript'n</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">disableBreadcrumb</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">disableNextPrev</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">disableToc</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">editURL</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">externalLinkTarget</span><span class="p">:</span><span class="w"> </span><span class="l">_self</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">headingPost</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">headingPre</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">hidden</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">highlightWrap</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">image</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">images</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="l">images/hero.png</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">include</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">link</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">linkTitle</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">math</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mathJaxInitialize</span><span class="p">:</span><span class="w"> </span><span class="s1">&#39;{}&#39;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">menuPost</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">menuPre</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mermaid</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">force</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mermaidInitialize</span><span class="p">:</span><span class="w"> </span><span class="s1">&#39;{ &#34;securityLevel&#34;: &#34;loose&#34; }&#39;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mermaidZoom</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">openapi</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">errorlevel</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">oppenapi</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">force</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">ordersectionsby</span><span class="p">:</span><span class="w"> </span><span class="l">weight</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">sidebarmenus</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">disableTitle</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">home</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">main</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">pageRef</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">plank</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="nt">disableTitle</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">shortcuts</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">main</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">menu</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Example Plank</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;LastModifierDisplayName&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;LastModifierEmail&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;alwaysopen&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;collapsibleMenu&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;customMathJaxURL&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;customMermaidURL&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;customOpenapiURL&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;description&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableBreadcrumb&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableNextPrev&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableToc&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;editURL&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;externalLinkTarget&#34;</span><span class="p">:</span> <span class="s2">&#34;_self&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;headingPost&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;headingPre&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;hidden&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;highlightWrap&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;image&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;errorlevel&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;imageEffects&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;border&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lazy&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lightbox&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;shadow&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;images&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;images/hero.png&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;include&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;errorlevel&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;link&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;errorlevel&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;linkTitle&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;math&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;mathJaxInitialize&#34;</span><span class="p">:</span> <span class="s2">&#34;{}&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;menuPost&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;menuPre&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;mermaid&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;force&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;mermaidInitialize&#34;</span><span class="p">:</span> <span class="s2">&#34;{ \&#34;securityLevel\&#34;: \&#34;loose\&#34; }&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;mermaidZoom&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;openapi&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;errorlevel&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;oppenapi&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;force&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;ordersectionsby&#34;</span><span class="p">:</span> <span class="s2">&#34;weight&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;sidebarmenus&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableTitle&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;home&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;main&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;pageRef&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;page&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;disableTitle&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;shortcuts&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;main&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;menu&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Example Page&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="annotated-front-matter">Annotated Front Matter</h2>
<div class="tab-panel" data-tab-group="765044945fce0cfd1c3e78a46c6d77c6">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('765044945fce0cfd1c3e78a46c6d77c6','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="c"># If an opt'n value be said t' be not set, ye can achieve th' same behavior</span>
</span></span><span class="line"><span class="cl"><span class="c"># by giv'n it an empty str'n value.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">###############################################################################</span>
</span></span><span class="line"><span class="cl"><span class="c"># Cap'n Hugo</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns usually apply t' other themes as well.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Th' social media image o' yer plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># This be used fer generat'n social media meta informat'n fer th' opengraph</span>
</span></span><span class="line"><span class="cl"><span class="c"># protocol an' twitter cards.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">images</span> <span class="p">=</span> <span class="p">[</span> <span class="s1">&#39;images/hero.png&#39;</span> <span class="p">]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' yer plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># A plank without a title be treated as a hidden plank.</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Example Page&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Th' descript'n o' yer plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># This be used fer generat'n HTML meta tags, social media meta informat'n</span>
</span></span><span class="line"><span class="cl"><span class="c"># fer th' opengraph protocol an' twitter cards.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used fer th' html</span>
</span></span><span class="line"><span class="cl"><span class="c"># meta tag, social media meta informat'n fer th' opengraph protocol an'</span>
</span></span><span class="line"><span class="cl"><span class="c"># twitter cards.</span>
</span></span><span class="line"><span class="cl"><span class="nx">descript'n</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Th' plank design t' be used</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># This decides th' layout o' yer plank. Th' theme ships &#39;home&#39;, &#39;chapter&#39; an'</span>
</span></span><span class="line"><span class="cl"><span class="c"># &#39;default&#39;. If not set, &#39;default&#39; be taken.</span>
</span></span><span class="line"><span class="cl"><span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">###############################################################################</span>
</span></span><span class="line"><span class="cl"><span class="c"># Relearrrn Theme</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns be specific t' th' Relearrrn theme.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Topbar</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns modify th' topbar appearance.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Hide th' t'ble o' contents button.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If th' TOC button be hidden, also th' keyboard shortcut be disabled.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">disableToc</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Hide th' breadcrumbs.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If th' breadcrumbs be hidden, th' title o' th' displayed plank will still be</span>
</span></span><span class="line"><span class="cl"><span class="c"># shown 'n th' topbar.</span>
</span></span><span class="line"><span class="cl"><span class="nx">disableBreadcrumb</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Hide Next an' Previous navigat'n buttons.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If th' navigat'n buttons be hidden, also th' keyboard shortcuts be</span>
</span></span><span class="line"><span class="cl"><span class="c"># disabled.</span>
</span></span><span class="line"><span class="cl"><span class="nx">disableNextPrev</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Th' URL prefix t' edit a plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># If set, an edit button will be shown 'n th' topbar. If th' button be hidden,</span>
</span></span><span class="line"><span class="cl"><span class="c"># also th' keyboard shortcuts be disabled. Th' value can contain th' macro</span>
</span></span><span class="line"><span class="cl"><span class="c"># `${FilePath}` which will be replaced by th' file path o' yer displayed plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used. If th' global</span>
</span></span><span class="line"><span class="cl"><span class="c"># parameter be given but ye want t' hide th' button fer th' displayed plank,</span>
</span></span><span class="line"><span class="cl"><span class="c"># ye can set th' value t' an empty str'n. If instead o' hid'n ye want t' have</span>
</span></span><span class="line"><span class="cl"><span class="c"># an disabled button, ye can set th' value t' a str'n contain'n just spaces.</span>
</span></span><span class="line"><span class="cl"><span class="c"># This be useful if ye want t' give th' opportunity fer people t' create merge</span>
</span></span><span class="line"><span class="cl"><span class="c"># request fer yer rrrambl'n.</span>
</span></span><span class="line"><span class="cl"><span class="nx">editURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Menu</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns modify th' menu appearance.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Menu specific title</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title displayed 'n th' menu. If not set th' `title` front matter will</span>
</span></span><span class="line"><span class="cl"><span class="c"># be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">linkTitle</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Prefix fer th' title 'n navigat'n menu.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' th' plank 'n th' menu will be prefixed by this HTML rrrambl'n.</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Suffix fer th' title 'n navigat'n menu.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' th' plank 'n th' menu will be suffixed by this HTML rrrambl'n.</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuPost</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Th' order o' navigat'n menu submenus.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: &#39;weight&#39;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Submenus can be ordered by &#39;weight&#39;, &#39;title&#39;, &#39;linktitle&#39;, &#39;modifieddate&#39;,</span>
</span></span><span class="line"><span class="cl"><span class="c"># &#39;expirydate&#39;, &#39;publishdate&#39;, &#39;date&#39;, &#39;length&#39; or &#39;default&#39; (adher'n t'</span>
</span></span><span class="line"><span class="cl"><span class="c"># Hugo&#39;s default sort order).</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' value o' th' parent menu entry be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s1">&#39;weight&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Th' initial expand state o' submenus.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># This controls whether submenus will be expanded (true), or collapsed (false)</span>
</span></span><span class="line"><span class="cl"><span class="c"># 'n th' menu. If not set, th' first menu level be set t' false, all others</span>
</span></span><span class="line"><span class="cl"><span class="c"># levels be set t' true. If not set, th' value o' th' parent menu entry be used.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If th' displayed plank has submenus, they will always been displayed expanded</span>
</span></span><span class="line"><span class="cl"><span class="c"># regardless o' this opt'n.</span>
</span></span><span class="line"><span class="cl"><span class="nx">alwaysopen</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Shows expander fer submenus.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If set t' true, a submenu 'n th' sidebar will be displayed 'n a collaps'ble</span>
</span></span><span class="line"><span class="cl"><span class="c"># tree view an' a click'ble expander be set 'n front o' th' entry.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">collapsibleMenu</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Define yer own sidebar menus.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: th' value used below</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' sidebar menus be built from this parameter. If not set, th' set value</span>
</span></span><span class="line"><span class="cl"><span class="c"># o' yer site&#39;s hugo.toml be used an' contains th' below default.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Menus be written from th' sidebar&#39;s top t' buttom 'n th' order given 'n</span>
</span></span><span class="line"><span class="cl"><span class="c"># this array.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Each entry can contain th' follow'n keys:</span>
</span></span><span class="line"><span class="cl"><span class="c"># - `type` be mandatory. Either `page` 'n case it should generate a tre from</span>
</span></span><span class="line"><span class="cl"><span class="c"># th' plank structure or `menu` 'n case it should generate a tree from a</span>
</span></span><span class="line"><span class="cl"><span class="c"># defined menu.</span>
</span></span><span class="line"><span class="cl"><span class="c"># - `identifier` be mandatory. In case o' `type=page`, anyth'n can be used,</span>
</span></span><span class="line"><span class="cl"><span class="c"># 'n case o' `type=menu` th' `identifier` key must be identical t' th'</span>
</span></span><span class="line"><span class="cl"><span class="c"># key o' th' menu definit'n.</span>
</span></span><span class="line"><span class="cl"><span class="c"># - `main`, boolean. If `true`, th' first tree level be spaced more generous</span>
</span></span><span class="line"><span class="cl"><span class="c"># an' th' text be emphasized. Default: `true` fer `type=page` an' `false`</span>
</span></span><span class="line"><span class="cl"><span class="c"># fer `type=menu`</span>
</span></span><span class="line"><span class="cl"><span class="c"># - `disableTitle`, boolean. If `true`, there be no title above th' tree.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: `true` fer `type=page` an' `false` fer `type=menu`. If a title</span>
</span></span><span class="line"><span class="cl"><span class="c"># should be used, 'n case o' `type=page` it will be taken from th' page&#39;s</span>
</span></span><span class="line"><span class="cl"><span class="c"># `menuTitle` front matter an' if not set, from th' translat'n files, us'n</span>
</span></span><span class="line"><span class="cl"><span class="c"># th' menu `identifier` as key. In case o' `type=menu` it will be taken</span>
</span></span><span class="line"><span class="cl"><span class="c"># from th' menu `title` accord'n t' Hugo&#39;s documentat'n an' if not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># from th' menu `name` an' if this be not set form th' page&#39;s `linkTitle`.</span>
</span></span><span class="line"><span class="cl"><span class="c"># - `pageRef`, optional. In case o' `type=page` this be th' start'n page&#39;s</span>
</span></span><span class="line"><span class="cl"><span class="c"># path. If not set, th' home plank will be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">sidebarmenus</span> <span class="p">=</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;page&#39;</span><span class="p">,</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;home&#39;</span><span class="p">,</span> <span class="nx">main</span> <span class="p">=</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">disableTitle</span> <span class="p">=</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">type</span> <span class="p">=</span> <span class="s1">&#39;menu&#39;</span><span class="p">,</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;shortcuts&#39;</span><span class="p">,</span> <span class="nx">main</span> <span class="p">=</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">disableTitle</span> <span class="p">=</span> <span class="kc">false</span> <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Hidden planks</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how hidden planks be treated.</span>
</span></span><span class="line"><span class="cl"><span class="c"># A plank flagged as hidden, be only removed from th' navigat'n menu if ye be</span>
</span></span><span class="line"><span class="cl"><span class="c"># currently not on this plank or th' hidden plank be not part o' current page&#39;s</span>
</span></span><span class="line"><span class="cl"><span class="c"># ancestors. For all other functionality 'n Hugo a hidden plank behaves like any</span>
</span></span><span class="line"><span class="cl"><span class="c"># other plank if not otherwise configured.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Hide a page&#39;s menu entry.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If this value be true, th' plank be hidden from th' menu.</span>
</span></span><span class="line"><span class="cl"><span class="nx">hidden</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Rrrambl'n</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns modify how yer rrrambl'n be displayed.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Prefix fer th' title 'n th' rrrambl'n area.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' th' plank head'n will be prefixed by this HTML rrrambl'n.</span>
</span></span><span class="line"><span class="cl"><span class="nx">headingPre</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Suffix fer th' title 'n th' rrrambl'n area.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' th' plank head'n will be suffixed by this HTML rrrambl'n.</span>
</span></span><span class="line"><span class="cl"><span class="nx">headingPost</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Display name o' th' page&#39;s last editor.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># If set, it will be displayed 'n th' default footer.</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierDisplayName</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Email address o' th' page&#39;s last editor.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># If set together wit' LastModifierDisplayName, it will be displayed 'n th'</span>
</span></span><span class="line"><span class="cl"><span class="c"># default footer.</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierEmail</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Highlight</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how code be displayed.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Wrap fer code blocks.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: true</span>
</span></span><span class="line"><span class="cl"><span class="c"># By default lines o' code blocks wrap around if th' line be too long t' be</span>
</span></span><span class="line"><span class="cl"><span class="c"># displayed on screen. If ye dislike this behavior, ye can reconfigure it</span>
</span></span><span class="line"><span class="cl"><span class="c"># here.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Avast that lines always wrap 'n print mode regardless o' this opt'n.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used or given as a</span>
</span></span><span class="line"><span class="cl"><span class="c"># parameter t' individual code blocks.</span>
</span></span><span class="line"><span class="cl"><span class="nx">highlightWrap</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Include</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how th' include shortcode works.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># What t' do when path be not resolved.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: &#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Ye can control what should happen if a path can not be resolved t' as</span>
</span></span><span class="line"><span class="cl"><span class="c"># a resource or via th' file system. If not set, no output will be written</span>
</span></span><span class="line"><span class="cl"><span class="c"># fer th' unresolved path. If set t' `warning` th' same happens an' an additional</span>
</span></span><span class="line"><span class="cl"><span class="c"># warning be printed. If set t' `error` an error message be printed an' th' build</span>
</span></span><span class="line"><span class="cl"><span class="c"># be aborted.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">include</span><span class="p">.</span><span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Images</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how images be displayed.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># What t' do when local image link be not resolved.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: &#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Ye can control what should happen if a local image can not be resolved t' as</span>
</span></span><span class="line"><span class="cl"><span class="c"># a resource. If not set, th' unresolved link be written as given into th' result'n</span>
</span></span><span class="line"><span class="cl"><span class="c"># output. If set t' `warning` th' same happens an' an additional warning be</span>
</span></span><span class="line"><span class="cl"><span class="c"># printed. If set t' `error` an error message be printed an' th' build be</span>
</span></span><span class="line"><span class="cl"><span class="c"># aborted.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Please note that this can not resolve files inside o' yer `static` directory.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">image</span><span class="p">.</span><span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Image effects.</span>
</span></span><span class="line"><span class="cl"><span class="c"># See th' documentat'n fer how ye can even add yer own arbitrary effects t'</span>
</span></span><span class="line"><span class="cl"><span class="c"># th' list.</span>
</span></span><span class="line"><span class="cl"><span class="c"># All effect values default t' th' values o' yer site&#39;s hugo.toml an' can be</span>
</span></span><span class="line"><span class="cl"><span class="c"># overridden through URL parameter given t' th' image. See th' documentat'n fer</span>
</span></span><span class="line"><span class="cl"><span class="c"># details.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="nx">imageEffects</span><span class="p">.</span><span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: true</span>
</span></span><span class="line"><span class="cl"><span class="nx">imageEffects</span><span class="p">.</span><span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: true</span>
</span></span><span class="line"><span class="cl"><span class="nx">imageEffects</span><span class="p">.</span><span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="nx">imageEffects</span><span class="p">.</span><span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Links</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how links be displayed.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># What t' do when local plank link be not resolved.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: &#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Ye can control what should happen if a local link can not be resolved t' a</span>
</span></span><span class="line"><span class="cl"><span class="c"># plank. If not set, th' unresolved link be written as given into th' result'n</span>
</span></span><span class="line"><span class="cl"><span class="c"># output. If set t' `warning` th' same happens an' an additional warning be</span>
</span></span><span class="line"><span class="cl"><span class="c"># printed. If set t' `error` an error message be printed an' th' build be</span>
</span></span><span class="line"><span class="cl"><span class="c"># aborted.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Please note that wit' Cap'n Hugo &lt; 0.123.0 + `uglyURLs=true` this can lead t' false</span>
</span></span><span class="line"><span class="cl"><span class="c"># negatives.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># How t' open external links.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: &#39;_blank&#39;</span>
</span></span><span class="line"><span class="cl"><span class="c"># For external links ye can define how they be opened 'n yer browser. All</span>
</span></span><span class="line"><span class="cl"><span class="c"># values fer th' HTML `target` attribute o' th' `a` element be allowed. Th'</span>
</span></span><span class="line"><span class="cl"><span class="c"># default value opens external links 'n a separate browser tab. If ye want</span>
</span></span><span class="line"><span class="cl"><span class="c"># t' open those links 'n th' same tab, use &#39;_self&#39;.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">externalLinkTarget</span> <span class="p">=</span> <span class="s1">&#39;_self&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># MathJax</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how math formulae be displayed.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Initializat'n opt'ns fer MathJax.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># A JSON value. See th' MathJaxdocumentat'n fer poss'ble parameter.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">mathJaxInitialize</span> <span class="p">=</span> <span class="s1">&#39;{}&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Force board Math on every plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If a, Math shortcode or codefence be found, th' opt'n will be ignored an'</span>
</span></span><span class="line"><span class="cl"><span class="c"># Math will be boarded regardlessly. This opt'n be useful 'n case ye</span>
</span></span><span class="line"><span class="cl"><span class="c"># be us'n passthrough configurat'n t' render yer math. In this case no shortcode or</span>
</span></span><span class="line"><span class="cl"><span class="c"># codefence be involved an' th' library be not boarded by default so ye can</span>
</span></span><span class="line"><span class="cl"><span class="c"># force load'n it by sett'n `math=true`.</span>
</span></span><span class="line"><span class="cl"><span class="c"># This opt'n has an alias `math.force`.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">math</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># URL fer external MathJax library.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Specifies th' remote locat'n o' th' MathJax library. By default th' shipped</span>
</span></span><span class="line"><span class="cl"><span class="c"># version will be used.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">customMathJaxURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span> <span class="c"># &#39;https://unpkg.com/mathjax/es5/tex-mml-chtml.js&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># Merrrmaid</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how Merrrmaid graphs be displayed.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Make graphs pan'ble an' zoom'ble</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># For huge graphs it can be helpful t' make them zoom'ble. Zoom'ble graphs come</span>
</span></span><span class="line"><span class="cl"><span class="c"># wit' a reset button fer th' zoom.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used or given as a</span>
</span></span><span class="line"><span class="cl"><span class="c"># parameter t' individual graphs.</span>
</span></span><span class="line"><span class="cl"><span class="nx">mermaidZoom</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Initializat'n opt'ns fer Merrrmaid.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># A JSON value. See th' Merrrmaid documentat'n fer poss'ble parameter.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s1">&#39;{ &#34;securityLevel&#34;: &#34;loose&#34; }&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Force board Merrrmaid on every plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If a Merrrmaid shortcode or codefence be found, th' opt'n will be ignored an'</span>
</span></span><span class="line"><span class="cl"><span class="c"># Merrrmaid will be boarded regardlessly. This opt'n be useful 'n case ye</span>
</span></span><span class="line"><span class="cl"><span class="c"># be us'n script'n t' render yer graph. In this case no shortcode or</span>
</span></span><span class="line"><span class="cl"><span class="c"># codefence be involved an' th' library be not boarded by default so ye can</span>
</span></span><span class="line"><span class="cl"><span class="c"># force load'n it by sett'n `mermaid.force=true`.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">mermaid</span><span class="p">.</span><span class="nx">force</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># URL fer external Merrrmaid library.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Specifies th' remote locat'n o' th' Merrrmaid library. By default th' shipped</span>
</span></span><span class="line"><span class="cl"><span class="c"># version will be used.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">customMermaidURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span> <span class="c"># &#39;https://unpkg.com/mermaid/dist/mermaid.min.js&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
</span></span><span class="line"><span class="cl"><span class="c"># OpenApi</span>
</span></span><span class="line"><span class="cl"><span class="c"># These opt'ns configure how OpenAPI specificat'ns be displayed.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># Board OpenAPI on every plank.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: false</span>
</span></span><span class="line"><span class="cl"><span class="c"># If a, OpenAPI shortcode or codefence be found, th' opt'n will be ignored an'</span>
</span></span><span class="line"><span class="cl"><span class="c"># OpenAPI will be boarded regardlessly. This opt'n be useful 'n case ye</span>
</span></span><span class="line"><span class="cl"><span class="c"># be us'n script'n t' render yer spec. In this case no shortcode or</span>
</span></span><span class="line"><span class="cl"><span class="c"># codefence be involved an' th' library be not boarded by default so ye can</span>
</span></span><span class="line"><span class="cl"><span class="c"># force load'n it by sett'n `openapi.force=true`.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">oppenapi</span><span class="p">.</span><span class="nx">force</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># URL fer external OpenAPI library.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: not set</span>
</span></span><span class="line"><span class="cl"><span class="c"># Specifies th' remote locat'n o' th' OpenAPI library. By default th' shipped</span>
</span></span><span class="line"><span class="cl"><span class="c"># version will be used.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">customOpenapiURL</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span> <span class="c"># &#39;https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js&#39;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># What t' do when a local OpenAPI spec link be not resolved.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Default: &#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Ye can control what should happen if a local OpenAPI spec link can not be resolved</span>
</span></span><span class="line"><span class="cl"><span class="c"># t' a resource. If not set, th' unresolved link be written as given into th' result'n</span>
</span></span><span class="line"><span class="cl"><span class="c"># output. If set t' `warning` th' same happens an' an additional warning be</span>
</span></span><span class="line"><span class="cl"><span class="c"># printed. If set t' `error` an error message be printed an' th' build be</span>
</span></span><span class="line"><span class="cl"><span class="c"># aborted.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Please note that this can not resolve files inside o' yer `static` directory.</span>
</span></span><span class="line"><span class="cl"><span class="c"># If not set, th' set value o' yer site&#39;s hugo.toml be used.</span>
</span></span><span class="line"><span class="cl"><span class="nx">openapi</span><span class="p">.</span><span class="nx">errorlevel</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
</ul>
</div>
</footer>
</article>
</section>
<article class="default">
<header class="headline">
</header>
<h1 id="meta-information">Meta Information</h1>
<h2 id="page-title">Plank Title</h2>
<p>Th' <code>title</code> will be used 'n th' head'n an' meta informat'n o' yer HTML.</p>
<p>A plank without a title be <a href="/hugo-theme-relearn/pir/authoring/meta/index.html#hidden">treated as if <code>hidden=true</code></a> has been set.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Example Title&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Example Title</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Example Title&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="page-description">Plank Descript'n</h2>
<p>Th' <code>descript'n</code> be used fer generat'n HTML meta informat'n, 'n th' <a href="/hugo-theme-relearn/pir/shortcodes/children/index.html">children</a> shortcode an' 'n social media meta informat'n.</p>
<p>If not set, th' set value o' yer site&rsquo;s hugo.toml be used fer th' HTML meta informat'n an' social media meta informat'n. It appears empty fer th' <a href="/hugo-theme-relearn/pir/shortcodes/children/index.html">children</a> shortcode.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">descript'n</span> <span class="p">=</span> <span class="s1">&#39;Some lenghty example description&#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">descript'n</span><span class="p">:</span><span class="w"> </span><span class="l">Some lenghty example descript'n</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;description&#34;</span><span class="p">:</span> <span class="s2">&#34;Some lenghty example description&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="social-media-images">Social Media Images</h2>
<p>Th' theme adds social media meta tags includ'n feature images fer th' <a href="https://gohugo.io/templates/internal/#open-graph" rel="external" target="_self">Open Graph</a> protocol an' <a href="https://gohugo.io/templates/internal/#twitter-cards" rel="external" target="_self">Twitter Cards</a> t' yer ship. These be configured as mentioned 'n th' linked Cap'n Hugo docs.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">images</span> <span class="p">=</span> <span class="p">[</span><span class="s1">&#39;images/hero.png&#39;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">images</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span>- <span class="l">images/hero.png</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;images&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;images/hero.png&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="hidden">Hidden</h2>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> Ye can hide yer planks from th' menu by sett'n <code>hidden=true</code>.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bars"></i></span><span class="badge-content" style="background-color: blueviolet;">Menu</span></span> For <a href="https://gohugo.io/content-management/menus/" rel="external" target="_self">Cap'n Hugo menus</a>, ye have t' set <code>params.hidden=true</code> instead.</p>
<p><a href="/hugo-theme-relearn/pir/configuration/content/hidden/index.html">See how ye can further configure visibility</a> throughout yer ship.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">hidden</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">hidden</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;hidden&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="add-icon-to-the-title-heading">Add Ay'con t' th' Title Head'n</h2>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> In th' plank front matter, add a <code>headingPre</code> t' insert any HTML code before th' title head'n. Ye can also set <code>headingPost</code> t' insert HTML code after th' title head'n.</p>
<p>Ye also may want t' <a href="/hugo-theme-relearn/pir/configuration/customization/dependencies/index.html#adding-javascript-or-stylesheets-to-all-pages">apply further CSS</a> 'n this case.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">headingPre</span> <span class="p">=</span> <span class="s1">&#39;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i&gt; &#39;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">headingPre</span><span class="p">:</span><span class="w"> </span><span class="s1">&#39;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i&gt; &#39;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;headingPre&#34;</span><span class="p">:</span> <span class="s2">&#34;\u003ci class=\&#34;fab fa-github\&#34;\u003e\u003c/i\u003e &#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<h2 id="footer-information">Footer Informat'n</h2>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> If ye use th' default <code>layouts/partials/content-footer.html</code> be not overridden by ye, it will display author'n informat'n, namely</p>
<ul>
<li><code>AuthorName</code> if <a href="https://gohugo.io/methods/page/gitinfo/" rel="external" target="_self">GitInfo</a> be active, otherwise <code>LastModifierDisplayName</code> front matter</li>
<li><code>AuthorEmail</code> if <a href="https://gohugo.io/methods/page/gitinfo/" rel="external" target="_self">GitInfo</a> be active, otherwise <code>LastModifierEmail</code> front matter</li>
<li><code>AuthorDate</code> if <a href="https://gohugo.io/methods/page/gitinfo/" rel="external" target="_self">GitInfo</a> be active, otherwise <a href="https://gohugo.io/methods/page/date/" rel="external" target="_self">Hugo&rsquo;s <code>date</code> front matter</a></li>
</ul>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierDisplayName</span> <span class="p">=</span> <span class="s1">&#39;Santa Claus&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierEmail</span> <span class="p">=</span> <span class="s1">&#39;santa@example.com&#39;</span>
</span></span><span class="line"><span class="cl"><span class="nx">date</span> <span class="p">=</span> <span class="ld">2000-12-24T00:00:00-12:00</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">LastModifierDisplayName</span><span class="p">:</span><span class="w"> </span><span class="l">Santa Claus</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">LastModifierEmail</span><span class="p">:</span><span class="w"> </span><span class="l">santa@example.com</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2000-12-24T00:00:00</span><span class="m">-12</span><span class="p">:</span><span class="m">00</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;LastModifierDisplayName&#34;</span><span class="p">:</span> <span class="s2">&#34;Santa Claus&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;LastModifierEmail&#34;</span><span class="p">:</span> <span class="s2">&#34;santa@example.com&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;date&#34;</span><span class="p">:</span> <span class="s2">&#34;2000-12-24T00:00:00-12:00&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
</ul>
</div>
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="marrrkdown-rules">Marrrkdown Rules</h1>
<p>Let&rsquo;s face it: Writ'n rrrambl'n fer th' web be tiresome. WYSIWYG editors help alleviate this task, but they generally result 'n horr'ble code, or worse yet, ugly web planks.</p>
<p><strong>Marrrkdown</strong> be a better way t' write <strong>HTML</strong>, without all th' complexities an' ugliness that usually accompanies it.</p>
<p>Some o' th' key benefits be:</p>
<ol>
<li>Marrrkdown be simple t' learn, wit' minimal extra characters so it&rsquo;s also quicker t' write rrrambl'n.</li>
<li>Less chance o' errors when writ'n 'n Marrrkdown.</li>
<li>Produces valid HTML output.</li>
<li>Keeps th' rrrambl'n an' th' visual display separate, so ye cannot mess up th' look o' yer ship.</li>
<li>Write 'n any text editor or Marrrkdown applicat'n ye like.</li>
<li>Marrrkdown be a joy t' use!</li>
</ol>
<p>John Gruber, th' author o' Marrrkdown, puts it like this:</p>
<blockquote>
<p>Th' overrid'n design goal fer Markdown&rsquo;s formatt'n rules be t' make it as read'ble as poss'ble. Th' idea be that a Markdown-formatted document should be publish'ble as-is, as plain text, without look'n like it&rsquo;s been marked up wit' tags or formatt'n instruct'ns. While Markdown&rsquo;s rules has been influenced by several exist'n text-to-HTML filters, th' single biggest source o' inspirat'n fer Markdown&rsquo;s rules be th' format o' plain text email.
<cite>John Gruber</cite></p>
</blockquote>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse
</div>
<div class="box-content">
<p><i class="fa-fw fas fa-bookmark"></i> Bookmark this plank fer easy future reference!</p>
</div>
</div>
<h2 id="standard-and-extensions">Standard an' Extensions</h2>
<p>If not otherwise noted, th' shown examples adhere t' th' <a href="https://commonmark.org/help/" rel="external" target="_self">CommonMark</a> standard. In addit'n th' theme supports th' follow'n extensions that <a href="https://gohugo.io/getting-started/configuration-markup/#goldmark" rel="external" target="_self">can be activated</a> 'n yer <code>hugo.toml</code> or be built into th' theme:</p>
<ul>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Extension on top o' standard Marrrkdown adher'n t' <a href="https://github.github.com/gfm/" rel="external" target="_self">GitHub Flavored Marrrkdown</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-php"></i></span><span class="badge-content" style="background-color: #888cc4;">PHP</span></span> Extension on top o' standard Marrrkdown adher'n t' <a href="https://michelf.ca/projects/php-markdown/extra/" rel="external" target="_self">PHP Marrrkdown</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-lightbulb"></i></span><span class="badge-content" style="background-color: darkorange;">Pants</span></span> Extension by John Gruber adher'n t' <a href="https://daringfireball.net/projects/smartypants/" rel="external" target="_self">SmartyPants</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">Cap'n Hugo Extra Extension</a> supported by Cap'n Hugo.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw far fa-gem"></i></span><span class="badge-content" style="background-color: #7c3aed;">Obsidian</span></span> Extension implemented by <a href="https://obsidian.md/" rel="external" target="_self">Obsidian</a>.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> If th' <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a> be allowed, th' theme supports styl'n fer further HTML elements.</p>
</li>
<li>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-puzzle-piece"></i></span><span class="badge-content" style="background-color: #7dc903;">Relearrrn</span></span> Extension specific t' this theme.</p>
</li>
</ul>
<h2 id="paragraphs">Paragraphs</h2>
<p>In Marrrkdown yer rrrambl'n usually spans th' whole avail'ble document width. This be called a block. Blocks be always separated by whitespace t' their adjacent blocks 'n th' result'n document.</p>
<p>Any text not start'n wit' a special sign be written as normal, plain text paragraph block an' must be separated t' its adjacent blocks by empty lines.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.</p>
<p>Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
</div>
</div>
<h2 id="headings">Head'ns</h2>
<p>A bloody idea be t' structure yer rrrambl'n us'n head'ns an' subhead'ns. HTML-head'ns from <code>h1</code> through <code>h6</code> be constructed wit' a <code>#</code> fer each level.</p>
<p>In Hugo ye usually don&rsquo;t use <code>h1</code> as this be generated by yer theme an' ye should only have one such element 'n a document.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="gh"># h1 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>
</span></span><span class="line"><span class="cl"><span class="gu">## h2 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl"><span class="gu">### h3 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl"><span class="gu">#### h4 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl"><span class="gu">##### h5 Head'n
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>
</span></span><span class="line"><span class="cl">###### h6 Head'n</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<h1 id="h1-heading">h1 Head'n</h1>
<h2 id="h2-heading">h2 Head'n</h2>
<h3 id="h3-heading">h3 Head'n</h3>
<h4 id="h4-heading">h4 Head'n</h4>
<h5 id="h5-heading">h5 Head'n</h5>
<h6 id="h6-heading">h6 Head'n</h6>
</div>
</div>
<h2 id="horizontal-rules">Horizontal Rules</h2>
<p>T' further structure yer rrrambl'n ye can add horizontal rules. They create a &ldquo;thematic break&rdquo; between paragraph blocks. In Marrrkdown, ye can create it wit' three consecutive dashes <code>---</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.</p>
<hr>
<p>Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
</div>
</div>
<h2 id="blockquotes">Blockquotes</h2>
<h3 id="quotations">Quotat'ns</h3>
<p>For quot'n blocks o' rrrambl'n from another source within yer document add <code>&gt;</code> before any text ye want t' quote.</p>
<p>Blockquotes can also be nested.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt;
</span></span></span><span class="line"><span class="cl"><span class="k"></span><span class="ge">&gt; &gt; Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt;
</span></span><span class="line"><span class="cl">&gt; Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<blockquote>
<p>Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.</p>
<blockquote>
<p>Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.</p>
</blockquote>
<p>Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.</p>
</blockquote>
</div>
</div>
<h3 id="github-alerts">GitHub Alerts</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Since Cap'n Hugo <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.132.0</span></span> <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts" rel="external" target="_self">GitHub alerts</a> be also supported. Please note, that color'n an' ay'cons o' severities may defer between GitHub an' this theme.</p>
<p>If ye be 'n need o' more advanced opt'ns t' style yer alerts, like ay'cons, use th' <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html">notice shortcode</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!CAUTION]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Advises about risks or negative outcomes o' certain act'ns.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!IMPORTANT]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Key informat'n users need t' know t' achieve their goal.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!INFO]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Informat'n that users &lt;ins&gt;_might_&lt;/ins&gt; find interest'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!NOTE]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Useful informat'n that users should know, even when skimm'n rrrambl'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!TIP]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Helpful advice fer do'n th'ns better or more easily.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!WARNING]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; Urgent info that needs immediate user attent'n t' avoid problems.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Caut'n
</div>
<div class="box-content">
<p>Advises about risks or negative outcomes o' certain act'ns.</p>
</div>
</div>
<div class="box notices cstyle important">
<div class="box-label">
<i class="fa-fw fas fa-bolt"></i> Important
</div>
<div class="box-content">
<p>Key informat'n users need t' know t' achieve their goal.</p>
</div>
</div>
<div class="box notices cstyle info">
<div class="box-label">
<i class="fa-fw fas fa-info-circle"></i> Ahoi
</div>
<div class="box-content">
<p>Informat'n that users <ins><em>might</em></ins> find interest'n.</p>
</div>
</div>
<div class="box notices cstyle note">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-circle"></i> Avast
</div>
<div class="box-content">
<p>Useful informat'n that users should know, even when skimm'n rrrambl'n.</p>
</div>
</div>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse
</div>
<div class="box-content">
<p>Helpful advice fer do'n th'ns better or more easily.</p>
</div>
</div>
<div class="box notices cstyle warning">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-triangle"></i> Arrr
</div>
<div class="box-content">
<p>Urgent info that needs immediate user attent'n t' avoid problems.</p>
</div>
</div>
</div>
</div>
<h3 id="obsidian-callouts">Obsidian Callouts</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw far fa-gem"></i></span><span class="badge-content" style="background-color: #7c3aed;">Obsidian</span></span> Since Cap'n Hugo <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.134.0</span></span> <a href="https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title" rel="external" target="_self">Obsidian callouts</a> be also supported. Which enables configur'ble title text an' expand/collapse.</p>
<p>If ye be 'n need o' more advanced opt'ns t' style yer alerts, like ay'cons, use th' <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html">notice shortcode</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!tip] Callouts can have custom titles
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Like this one.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!tip] Title-only callout
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!note]- Be callouts fold'ble?
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!note]+ Be callouts fold'ble?
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Callouts can have custom titles
</div>
<div class="box-content">
<p>Like this one.</p>
</div>
</div>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Title-only callout
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-8fe773f4381582283efb962e4d1855de" aria-controls="R-expandcontent-8fe773f4381582283efb962e4d1855de">
<label class="expand-label box-label" for="R-expand-8fe773f4381582283efb962e4d1855de">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-8fe773f4381582283efb962e4d1855de" class="box-content expand-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-79a961187299e1d2eed4d7254fd75750" aria-controls="R-expandcontent-79a961187299e1d2eed4d7254fd75750" checked>
<label class="expand-label box-label" for="R-expand-79a961187299e1d2eed4d7254fd75750">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-79a961187299e1d2eed4d7254fd75750" class="box-content expand-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div>
</div>
</div>
<h2 id="text-markers">Text Markers</h2>
<h3 id="bold">Bold</h3>
<p>Ye can show importance o' a snippet o' text wit' a heavier font-weight by enclos'n it wit' two asterisks <code>**</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">I am rendered wit' **bold text**</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>I am rendered wit' <strong>bold text</strong></p>
</div>
</div>
<h3 id="italics">Italics</h3>
<p>Ye can emphasize a snippet o' text wit' italics by enclos'n it wit' underscores <code>_</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">I am rendered wit' _italicized text_</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>I am rendered wit' <em>italicized text</em></p>
</div>
</div>
<h3 id="marked-text">Marked Text</h3>
<p>Ye can mark text 'n th' predefined accent color o' yer stylesheet.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">activate this through th' <em>Cap'n Hugo Extra Extension</em></a> 'n yer <code>hugo.toml</code></p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">==Parts== o' this text ==are marked!==</span></span></code></pre></div>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">mark</span><span class="p">&gt;</span>Parts<span class="p">&lt;/</span><span class="nt">mark</span><span class="p">&gt;</span> o' this text <span class="p">&lt;</span><span class="nt">mark</span><span class="p">&gt;</span>be marked!<span class="p">&lt;/</span><span class="nt">mark</span><span class="p">&gt;</span></span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><mark>Parts</mark> o' this text <mark>be marked!</mark></p>
</div>
</div>
<h3 id="inserted-text">Inserted Text</h3>
<p>Ye can mark text addit'ns t' exist'n text.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">activate this through th' <em>Cap'n Hugo Extra Extension</em></a> 'n yer <code>hugo.toml</code></p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Th' ++hot, new++ stuff</span></span></code></pre></div>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Th' <span class="p">&lt;</span><span class="nt">ins</span><span class="p">&gt;</span>hot, new<span class="p">&lt;/</span><span class="nt">ins</span><span class="p">&gt;</span> stuff</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Th' <ins>hot, new</ins> stuff</p>
</div>
</div>
<h3 id="deleted-text">Deleted Text</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can do strikethroughs by enclos'n text wit' two tildes <code>~~</code>. See <a href="https://gohugo.io/getting-started/configuration-markup/#extras" rel="external" target="_self">Hugo&rsquo;s documentat'n remarks</a> if ye want t' use this together wit' th' subscript rules.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">~~Strike through~~ this text</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><del>Strike through</del> this text</p>
</div>
</div>
<h2 id="special-typesetting">Special Typesett'n</h2>
<h3 id="text-substitution">Text Substitut'n</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-lightbulb"></i></span><span class="badge-content" style="background-color: darkorange;">Pants</span></span> Ye can combine multiple punctuat'n characters t' single typographic entities. This will only be applied t' text outside o' code blocks or inline code.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Do'ble quotes <span class="sb">`&#34;`</span> an' single quotes <span class="sb">`&#39;`</span> o' enclosed text be replaced by <span class="ge">**</span>&#34;do'ble curly quotes&#34;** an' <span class="ge">**</span>&#39;single curly quotes&#39;**.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Do'ble dashes <span class="sb">`--`</span> an' triple dashes <span class="sb">`---`</span> be replaced by en-dash <span class="ge">**</span>--** an' em-dash <span class="ge">**</span>---** entities.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Do'ble arrows point'n left <span class="sb">`&lt;&lt;`</span> or right <span class="sb">`&gt;&gt;`</span> be replaced by arrow <span class="ge">**</span><span class="err">&lt;&lt;</span>** an' <span class="ge">**</span>&gt;&gt;** entities.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Three consecutive dots <span class="sb">`...`</span> be replaced by an ellipsis <span class="ge">**</span>...** entity.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Do'ble quotes <code>&quot;</code> an' single quotes <code>'</code> o' enclosed text be replaced by <strong>&ldquo;do'ble curly quotes&rdquo;</strong> an' <strong>&lsquo;single curly quotes&rsquo;</strong>.</p>
<p>Do'ble dashes <code>--</code> an' triple dashes <code>---</code> be replaced by en-dash <strong>&ndash;</strong> an' em-dash <strong>&mdash;</strong> entities.</p>
<p>Do'ble arrows point'n left <code>&lt;&lt;</code> or right <code>&gt;&gt;</code> be replaced by arrow <strong>&laquo;</strong> an' <strong>&raquo;</strong> entities.</p>
<p>Three consecutive dots <code>...</code> be replaced by an ellipsis <strong>&hellip;</strong> entity.</p>
</div>
</div>
<h3 id="subscript-and-superscript">Subscript an' Superscript</h3>
<p>Ye can also use subscript an' superscript text. For more complex stuff, ye can use th' <a href="/hugo-theme-relearn/pir/shortcodes/math/index.html"><code>math</code> shortcode</a>.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <a href="https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension" rel="external" target="_self">activate this through th' <em>Cap'n Hugo Extra Extension</em></a> 'n yer <code>hugo.toml</code></p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">How many liters H~2~O fit into 1dm^3^?</span></span></code></pre></div>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <a href="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe" rel="external" target="_self">usage o' HTML</a>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">How many liters H<span class="p">&lt;</span><span class="nt">sub</span><span class="p">&gt;</span>2<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>O fit into 1dm<span class="p">&lt;</span><span class="nt">sup</span><span class="p">&gt;</span>3<span class="p">&lt;/</span><span class="nt">sup</span><span class="p">&gt;</span>?</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>How many liters H<sub>2</sub>O fit into 1dm<sup>3</sup>?</p>
</div>
</div>
<h3 id="keyboard-shortcuts">Keyboard Shortcuts</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-code"></i></span><span class="badge-content" style="background-color: orangered;">HTML</span></span> Ye can use th' <code>&lt;kbd&gt;</code> element t' style keyboard shortcuts.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Press <span class="p">&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>STRG<span class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>ALT<span class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>DEL<span class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;</span> t' end yer shift early.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Press <kbd>STRG</kbd> <kbd>ALT</kbd> <kbd>DEL</kbd> t' end yer shift early.</p>
</div>
</div>
<h2 id="lists">Lists</h2>
<h3 id="unordered">Unordered</h3>
<p>Ye can write a list o' items 'n which th' order o' th' items does not explicitly matter.</p>
<p>It be poss'ble t' nest lists by indent'n an item fer th' next sublevel.</p>
<p>Ye may use any o' <code>-</code>, <code>*</code> or <code>+</code> t' denote bullets fer each list item but should not switch between those symbols inside one whole list.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">-</span> Lorem ipsum dolor sit amet
</span></span><span class="line"><span class="cl"><span class="k">-</span> Consectetur adipisc'n elit
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Vestibulum laoreet porttitor sem
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Ac tristique libero volutpat at
</span></span><span class="line"><span class="cl"><span class="k">-</span> Nulla volutpat aliquam velit
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Phasellus iaculis neque
</span></span><span class="line"><span class="cl"> <span class="k">-</span> Purus sodales ultricies
</span></span><span class="line"><span class="cl">- Faucibus porta lacus fringilla vel</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisc'n elit
<ul>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
</ul>
</div>
</div>
<h3 id="ordered">Ordered</h3>
<p>Ye can create a list o' items 'n which th' order o' items does explicitly matter.</p>
<p>It be poss'ble t' nest lists by indent'n an item fer th' next sublevel.</p>
<p>Marrrkdown will automatically number each o' yer items consecutively. This means, th' order number ye be provid'n be irrelevant.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">1.</span> Lorem ipsum dolor sit amet
</span></span><span class="line"><span class="cl"><span class="k">3.</span> Consectetur adipisc'n elit
</span></span><span class="line"><span class="cl"> <span class="k">1.</span> Integer molestie lorem at massa
</span></span><span class="line"><span class="cl"> <span class="k">7.</span> Facilisis 'n pretium nisl aliquet
</span></span><span class="line"><span class="cl"><span class="k">99.</span> Nulla volutpat aliquam velit
</span></span><span class="line"><span class="cl"> <span class="k">1.</span> Faucibus porta lacus fringilla vel
</span></span><span class="line"><span class="cl"> <span class="k">1.</span> Aenean sit amet erat nunc
</span></span><span class="line"><span class="cl">17. Eget porttitor lorem</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisc'n elit
<ol>
<li>Integer molestie lorem at massa</li>
<li>Facilisis 'n pretium nisl aliquet</li>
</ol>
</li>
<li>Nulla volutpat aliquam velit
<ol>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
</ol>
</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
</div>
<h3 id="tasks">Tasks</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can add task lists result'n 'n checked or unchecked non-click'ble items</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">- [x]</span> Basic Test
</span></span><span class="line"><span class="cl"><span class="k">- [ ]</span> More Tests
</span></span><span class="line"><span class="cl"> <span class="k">- [x]</span> View
</span></span><span class="line"><span class="cl"> <span class="k">- [x]</span> Hear
</span></span><span class="line"><span class="cl"> - [ ] Smell</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<ul>
<li><input checked="" disabled="" type="checkbox"> Basic Test</li>
<li><input disabled="" type="checkbox"> More Tests
<ul>
<li><input checked="" disabled="" type="checkbox"> View</li>
<li><input checked="" disabled="" type="checkbox"> Hear</li>
<li><input disabled="" type="checkbox"> Smell</li>
</ul>
</li>
</ul>
</div>
</div>
<h3 id="definitions">Definit'ns</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-php"></i></span><span class="badge-content" style="background-color: #888cc4;">PHP</span></span> Definit'n lists be made o' terms an' definit'ns o' these terms, much like 'n a dictionary.</p>
<p>A definit'n list 'n Marrrkdown Extra be made o' a single-line term followed by a colon an' th' definit'n fer that term. Ye can also associate more than one term t' a definit'n.</p>
<p>If ye add empty lines around th' definit'n terms, additional vertical space will be generated. Also multiple paragraphs be poss'ble</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Apple
</span></span><span class="line"><span class="cl">: Pomaceous fruit o' plants o' th' genus Malus 'n th' family Rosaceae.
</span></span><span class="line"><span class="cl">: An American computer company.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Orange
</span></span><span class="line"><span class="cl">: Th' fruit o' an evergreen tree o' th' genus Citrus.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> Ye can make juice out o' it.
</span></span><span class="line"><span class="cl">: A telecommunicat'n company.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> Ye can&#39;t make juice out o' it.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<dl>
<dt>Apple</dt>
<dd>Pomaceous fruit o' plants o' th' genus Malus 'n th' family Rosaceae.</dd>
<dd>An American computer company.</dd>
<dt>Orange</dt>
<dd>Th' fruit o' an evergreen tree o' th' genus Citrus.
<p>Ye can make juice out o' it.</p>
</dd>
<dd>A telecommunicat'n company.
<p>Ye can&rsquo;t make juice out o' it.</p>
</dd>
</dl>
</div>
</div>
<h2 id="code">Code</h2>
<h3 id="inline-code">Inline Code</h3>
<p>Inline snippets o' code can be wrapped wit' backticks <code>`</code>.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">In this example, <span class="sb">`&lt;div&gt;&lt;/div&gt;`</span> be marked as code.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>In this example, <code>&lt;div&gt;&lt;/div&gt;</code> be marked as code.</p>
</div>
</div>
<h3 id="indented-code-block">Indented Code Block</h3>
<p>A simple code block can be generated by indent'n several lines o' code by at least two spaces.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Be impressed by my advanced code:
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> // Some comments
</span></span><span class="line"><span class="cl"> line 1 o' code
</span></span><span class="line"><span class="cl"> line 2 o' code
</span></span><span class="line"><span class="cl"> line 3 o' code</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>Be impressed by my advanced code:</p>
<pre><code>// Some comments
line 1 o' code
line 2 o' code
line 3 o' code
</code></pre>
</div>
</div>
<h3 id="fenced-code-block">Fenced Code Block</h3>
<p>If ye want t' gain more control o' yer code block ye can enclose yer code by at least three backticks <code>```</code> a so called fence.</p>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can also add a language specifier directly after th' open'n fence, <code>```js</code>, an' rules highlight'n will automatically be applied accord'n t' th' selected language 'n th' rendered HTML.</p>
<p>See <a href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html">Code Highlight'n</a> fer additional documentat'n.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">```js
</span></span><span class="line"><span class="cl">{
</span></span><span class="line"><span class="cl"> name: &#34;Claus&#34;,
</span></span><span class="line"><span class="cl"> surname: &#34;Santa&#34;,
</span></span><span class="line"><span class="cl"> profession: &#34;courier&#34;,
</span></span><span class="line"><span class="cl"> age: 666,
</span></span><span class="line"><span class="cl"> address: {
</span></span><span class="line"><span class="cl"> city: &#34;North Pole&#34;,
</span></span><span class="line"><span class="cl"> postalCode: 1,
</span></span><span class="line"><span class="cl"> country: &#34;Arctic&#34;
</span></span><span class="line"><span class="cl"> },
</span></span><span class="line"><span class="cl"> friends: [ &#34;Dasher&#34;, &#34;Dancer&#34;, &#34;Prancer&#34;, &#34;Vixen&#34;, &#34;Comet&#34;, &#34;Cupid&#34;, &#34;Donder&#34;, &#34;Blitzen&#34;, &#34;Rudolph&#34; ]
</span></span><span class="line"><span class="cl">};
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Claus&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">surname</span><span class="o">:</span> <span class="s2">&#34;Santa&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">profession</span><span class="o">:</span> <span class="s2">&#34;courier&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">666</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">address</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">city</span><span class="o">:</span> <span class="s2">&#34;North Pole&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">postalCode</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">country</span><span class="o">:</span> <span class="s2">&#34;Arctic&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nx">friends</span><span class="o">:</span> <span class="p">[</span> <span class="s2">&#34;Dasher&#34;</span><span class="p">,</span> <span class="s2">&#34;Dancer&#34;</span><span class="p">,</span> <span class="s2">&#34;Prancer&#34;</span><span class="p">,</span> <span class="s2">&#34;Vixen&#34;</span><span class="p">,</span> <span class="s2">&#34;Comet&#34;</span><span class="p">,</span> <span class="s2">&#34;Cupid&#34;</span><span class="p">,</span> <span class="s2">&#34;Donder&#34;</span><span class="p">,</span> <span class="s2">&#34;Blitzen&#34;</span><span class="p">,</span> <span class="s2">&#34;Rudolph&#34;</span> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span></span></span></code></pre></div>
</div>
</div>
<h2 id="tables">Tables</h2>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Ye can create tables by add'n pipes as dividers between each cell, an' by add'n a line o' dashes (also separated by bars) beneath th' header. Avast that th' pipes do not need t' be vertically aligned.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">| Opt'n | Descript'n |
</span></span><span class="line"><span class="cl">|--------|-------------|
</span></span><span class="line"><span class="cl">| data | path t' data files t' supply th' data that will be passed into templates. |
</span></span><span class="line"><span class="cl">| engine | engine t' be used fer process'n templates. Handlebars be th' default. |
</span></span><span class="line"><span class="cl">| ext | extension t' be used fer dest files. |</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<table>
<thead>
<tr>
<th>Opt'n</th>
<th>Descript'n</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>path t' data files t' supply th' data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine t' be used fer process'n templates. Handlebars be th' default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension t' be used fer dest files.</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3 id="aligned-columns">Aligned Columns</h3>
<p>Add'n a colon on th' left and/or right side o' th' dashes below any head'n will align th' text fer that column accordingly.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">| Opt'n | Number | Descript'n |
</span></span><span class="line"><span class="cl">|-------:|:------:|:------------|
</span></span><span class="line"><span class="cl">| data | 1 | path t' data files t' supply th' data that will be passed into templates. |
</span></span><span class="line"><span class="cl">| engine | 2 | engine t' be used fer process'n templates. Handlebars be th' default. |
</span></span><span class="line"><span class="cl">| ext | 3 | extension t' be used fer dest files. |</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<table>
<thead>
<tr>
<th style="text-align: right">Opt'n</th>
<th style="text-align: center">Number</th>
<th style="text-align: left">Descript'n</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: right">data</td>
<td style="text-align: center">1</td>
<td style="text-align: left">path t' data files t' supply th' data that will be passed into templates.</td>
</tr>
<tr>
<td style="text-align: right">engine</td>
<td style="text-align: center">2</td>
<td style="text-align: left">engine t' be used fer process'n templates. Handlebars be th' default.</td>
</tr>
<tr>
<td style="text-align: right">ext</td>
<td style="text-align: center">3</td>
<td style="text-align: left">extension t' be used fer dest files.</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2 id="links">Links</h2>
<h3 id="autolink">Autolink</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-github"></i></span><span class="badge-content" style="background-color: darkgray;">GFM</span></span> Absolute URLs will automatically be converted into a link.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">This be a link t' https://example.com.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>This be a link t' <a href="https://example.com" rel="external" target="_self">https://example.com</a>.</p>
</div>
</div>
<h3 id="basic-link">Basic Link</h3>
<p>Ye can explicitly define links 'n case ye want t' use non-absolute URLs or want t' give different text.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[<span class="nt">Assemble</span>](<span class="na">http://assemble.io</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="http://assemble.io" rel="external" target="_self">Assemble</a></p>
</div>
</div>
<h3 id="link-with-tooltip">Link wit' Tooltip</h3>
<p>For even further informat'n, ye can add an additional text, displayed 'n a tooltip on hover'n over th' link.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[<span class="nt">Upstage</span>](<span class="na">https://github.com/upstage/ &#34;Visit Upstage!&#34;</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="https://github.com/upstage/" rel="external" target="_self" title="Visit Upstage!">Upstage</a></p>
</div>
</div>
<h3 id="link-references">Link References</h3>
<p>Links can be simplyfied fer recurr'n reuse by us'n a reference ID t' later define th' URL locat'n. This simplyfies writ'n if ye want t' use a link more than once 'n a document.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[Example][somelinkID]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[somelinkID]: https://example.com &#34;Go t' example domain&#34;</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="https://example.com" rel="external" target="_self" title="Go t' example domain">Example</a></p>
</div>
</div>
<h3 id="footnotes">Footnotes</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-php"></i></span><span class="badge-content" style="background-color: #888cc4;">PHP</span></span> Footnotes work mostly like reference-style links. A footnote be made o' two th'ns, a marker 'n th' text that will become a superscript number an' a footnote definit'n that will be placed 'n a list o' footnotes.</p>
<p>Usually th' list o' footnotes will be shown at th' end o' yer document. If we use a footnote 'n a notice box it will instead be listed at th' end o' its box.</p>
<p>Footnotes can contain block elements, which means that ye can put multiple paragraphs, lists, blockquotes an' so on 'n a footnote. It works th' same as fer list items, just indent th' follow'n paragraphs by four spaces 'n th' footnote definit'n.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">That&#39;s some text wit' a footnote[^1]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[^1]: An' that&#39;s th' footnote.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">That&#39;s some more text wit' a footnote.[^someid]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[^someid]:
</span></span><span class="line"><span class="cl"> Anyth'n o' interest goes here.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> Blue light glows blue.</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
<p>That&rsquo;s some more text wit' a footnote.<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup></p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>An' that&rsquo;s th' footnote.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2">
<p>Anyth'n o' interest goes here.</p>
<p>Blue light glows blue.&#160;<a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
</div>
</div>
<h2 id="images">Images</h2>
<h3 id="basic-images">Basic Images</h3>
<p>Images have a similar rules t' links but include a preced'n exclamat'n mark.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Spock</span>](<span class="na">https://octodex.github.com/images/spocktocat.png</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-29b606a266b675593ecf58fcdf20d19f" class="lightbox-link"><img alt="Spock" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/spocktocat.png?width=20vw" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-29b606a266b675593ecf58fcdf20d19f"><img alt="Spock" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/spocktocat.png?width=20vw"></a></p>
</div>
</div>
<h3 id="image-with-tooltip">Image wit' Tooltip</h3>
<p>Like links, images can also be given a tooltip.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Picard</span>](<span class="na">https://octodex.github.com/images/jean-luc-picat.jpg &#34;Jean Luc Picard&#34;</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-432eee81ef595ceecaaf5e0f5e65c14d" class="lightbox-link"><img alt="Picard" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" style=" height: auto; width: 20vw;" title="Jean Luc Picard"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-432eee81ef595ceecaaf5e0f5e65c14d"><img alt="Picard" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" title="Jean Luc Picard"></a></p>
</div>
</div>
<h3 id="image-references">Image References</h3>
<p>Images can also be linked by reference ID t' later define th' URL locat'n. This simplyfies writ'n if ye want t' use an image more than once 'n a document.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![La Forge][laforge]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[laforge]: https://octodex.github.com/images/trekkie.jpg &#34;Geordi La Forge&#34;</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-4df7c63ea23ca07033ecfe35a407326a" class="lightbox-link"><img alt="La Forge" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/trekkie.jpg?width=20vw" style=" height: auto; width: 20vw;" title="Geordi La Forge"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-4df7c63ea23ca07033ecfe35a407326a"><img alt="La Forge" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/trekkie.jpg?width=20vw" title="Geordi La Forge"></a></p>
</div>
</div>
<h3 id="image-effects">Image Effects</h3>
<p><span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-puzzle-piece"></i></span><span class="badge-content" style="background-color: #7dc903;">Relearrrn</span></span> This theme allows additional non-standard formatt'n by sett'n query parameter at th' end o' th' image URL. See th' <a href="/hugo-theme-relearn/pir/authoring/imageeffects/index.html">image effects docs</a> fer a detailed example an' how t' configure it.</p>
<h4 id="resizing">Resiz'n</h4>
<p>Add query parameter <code>width</code> and/or <code>height</code> t' th' link image t' resize th' image. Values be CSS values (default be <code>auto</code>).</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?width=20vw</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-1c9a2e41dda8293485b61500b26a7cb1" class="lightbox-link"><img alt="Minion" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/minion.png?width=20vw" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-1c9a2e41dda8293485b61500b26a7cb1"><img alt="Minion" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/minion.png?width=20vw"></a></p>
</div>
</div>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-81a45b91a0a40d425e53c757b8a60a20" class="lightbox-link"><img alt="Minion" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px" style=" height: 50px; width: auto;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-81a45b91a0a40d425e53c757b8a60a20"><img alt="Minion" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px"></a></p>
</div>
</div>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-da5143a5c0c977dd70fae73a5110ff7e" class="lightbox-link"><img alt="Minion" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px&width=40vw" style=" height: 50px; width: 40vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-da5143a5c0c977dd70fae73a5110ff7e"><img alt="Minion" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/minion.png?height=50px&width=40vw"></a></p>
</div>
</div>
<h4 id="css-classes">CSS Classes</h4>
<p>Add a query parameter <code>classes</code> t' th' link image t' add CSS classes. Add some o' th' predefined values or even define yer own 'n yer CSS.</p>
<h5 id="shadow">Shadow</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Spidertocat</span>](<span class="na">https://octodex.github.com/images/spidertocat.png?classes=shadow</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-6e314bf5580443e0d2af07396bdadbc9" class="lightbox-link"><img alt="Spidertocat" class="bg-white border lazy lightbox noborder shadow figure-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,noborder" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-6e314bf5580443e0d2af07396bdadbc9"><img alt="Spidertocat" class="bg-white border lazy lightbox noborder shadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,noborder"></a></p>
</div>
</div>
<h5 id="border">Border</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">DrOctocat</span>](<span class="na">https://octodex.github.com/images/droctocat.png?classes=border</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-ac43921d6763a816efe373ba8d7a1373" class="lightbox-link"><img alt="DrOctocat" class="bg-white border lazy lightbox noshadow noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=20vw&classes=border,noshadow" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-ac43921d6763a816efe373ba8d7a1373"><img alt="DrOctocat" class="bg-white border lazy lightbox noshadow noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=20vw&classes=border,noshadow"></a></p>
</div>
</div>
<h5 id="left">Left</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Supertocat</span>](<span class="na">https://octodex.github.com/images/okal-eltocat.jpg?classes=left</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-877ae136f61d14ba7fa64bb8f40c5561" class="lightbox-link"><img alt="Supertocat" class="bg-white border lazy left lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&classes=left" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-877ae136f61d14ba7fa64bb8f40c5561"><img alt="Supertocat" class="bg-white border lazy left lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&classes=left"></a></p>
</div>
</div>
<h5 id="right">Right</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Riddlocat</span>](<span class="na">https://octodex.github.com/images/riddlocat.jpg?classes=right</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-599687e351c57b4e57cd722d43915f50" class="lightbox-link"><img alt="Riddlocat" class="bg-white border lazy lightbox right noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&classes=right" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-599687e351c57b4e57cd722d43915f50"><img alt="Riddlocat" class="bg-white border lazy lightbox right noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&classes=right"></a></p>
</div>
</div>
<h5 id="inline">Inline</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Spidertocat</span>](<span class="na">https://octodex.github.com/images/spidertocat.png?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">DrOctocat</span>](<span class="na">https://octodex.github.com/images/droctocat.png?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">Supertocat</span>](<span class="na">https://octodex.github.com/images/okal-eltocat.jpg?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">Riddlocat</span>](<span class="na">https://octodex.github.com/images/riddlocat.jpg?classes=inline</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-0b59158b17553a5d67456453a4013a32" class="lightbox-link"><img alt="Spidertocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-0b59158b17553a5d67456453a4013a32"><img alt="Spidertocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline"></a>
<a href="#R-image-4a51a53dbb9747167ba4e998d6e87b5f" class="lightbox-link"><img alt="DrOctocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-4a51a53dbb9747167ba4e998d6e87b5f"><img alt="DrOctocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/droctocat.png?width=10vw&classes=inline"></a>
<a href="#R-image-649274029293bec6a5ce51b5844be474" class="lightbox-link"><img alt="Supertocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-649274029293bec6a5ce51b5844be474"><img alt="Supertocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&classes=inline"></a>
<a href="#R-image-b6a12681116f8c4e14ca6e2d0aab79ef" class="lightbox-link"><img alt="Riddlocat" class="bg-white border inline lazy lightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&classes=inline" style=" height: auto; width: 10vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-b6a12681116f8c4e14ca6e2d0aab79ef"><img alt="Riddlocat" class="bg-white border inline lazy lightbox noshadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&classes=inline"></a></p>
</div>
</div>
<h5 id="combination">Combinat'n</h5>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">X-tocat</span>](<span class="na">https://octodex.github.com/images/xtocat.jpg?classes=shadow,border,left</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><a href="#R-image-08ebda9a91ab14b3e87c1e84b6e59262" class="lightbox-link"><img alt="X-tocat" class="bg-white border lazy left lightbox shadow figure-image" loading="lazy" src="https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left" style=" height: auto; width: 20vw;"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-08ebda9a91ab14b3e87c1e84b6e59262"><img alt="X-tocat" class="bg-white border lazy left lightbox shadow lightbox-image" loading="lazy" src="https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left"></a></p>
</div>
</div>
<h4 id="lightbox">Lightbox</h4>
<p>Add th' query parameter <code>lightbox=false</code> t' th' image link t' dis'ble th' lightbox.</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Homercat</span>](<span class="na">https://octodex.github.com/images/homercat.png?lightbox=false</span>)</span></span></code></pre></div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-eye"></i> Result
</div>
<div class="box-content">
<p><img alt="Homercat" class="bg-white border lazy nolightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false" style=" height: auto; width: 20vw;"></p>
</div>
</div>
<div class="box notices cstyle note">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-circle"></i> Avast
</div>
<div class="box-content">
<p>If ye want t' wrap an image 'n a link an' <code>lightbox=true</code> be yer default sett'n, ye have t' explicitly dis'ble th' lightbox t' avoid it t' hijack'n yer link like:</p>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">[<span class="nt">![Homercat</span>](<span class="na">https://octodex.github.com/images/homercat.png?lightbox=false</span>)](https://octodex.github.com/#homercat)</span></span></code></pre></div>
<p><a href="https://octodex.github.com/#homercat" rel="external" target="_self"><img alt="Homercat" class="bg-white border lazy nolightbox noshadow figure-image" loading="lazy" src="https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false" style=" height: auto; width: 20vw;"></a></p>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
</ul>
</div>
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="image-effects">Image Effects</h1>
<p>Th' theme offers <a href="/hugo-theme-relearn/pir/authoring/markdown/index.html#image-effects">graphical effects</a> fer yer linked images.</p>
<p>Ye can <a href="/hugo-theme-relearn/pir/configuration/customization/imageeffects/index.html">define additional custom image effects an' set defaults</a> 'n yer configurat'n.</p>
<p>Th' default image effects shipped wit' th' theme be</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Descript'n</th>
</tr>
</thead>
<tbody>
<tr>
<td>border</td>
<td>Draws a light thin border around th' image</td>
</tr>
<tr>
<td>lazy</td>
<td>Lets th' image be lazy boarded</td>
</tr>
<tr>
<td>lightbox</td>
<td>Th' image will be click'ble t' show it enlarged</td>
</tr>
<tr>
<td>shadow</td>
<td>Draws a shadow around th' image t' make it appear hovered/glow'n</td>
</tr>
</tbody>
</table>
<p>One way t' use them be t' add them as URL query parameter t' each individually linked image.</p>
<p>This can become cumbersome t' be done consistently fer th' whole ship. Instead, ye can <a href="/hugo-theme-relearn/pir/configuration/customization/imageeffects/index.html">configure th' defaults</a> 'n yer <code>hugo.toml</code> as well as overrid'n these defaults 'n a page&rsquo;s front matter.</p>
<p>Explicitly set URL query parameter will override th' defaults set fer a plank or yer ship.</p>
<p>Without any sett'ns 'n yer <code>hugo.toml</code> <code>imageEffects</code> defaults t'</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">imageEffects</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;imageEffects&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;border&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lazy&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lightbox&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;shadow&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<p><span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-markdown"></i></span><span class="badge-content">Front Matter</span></span> This can be overridden 'n a planks front matter fer example by</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">imageEffects</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;imageEffects&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lazy&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<p>Or by explicitly override sett'ns by URL query parameter</p>
<div class="tab-panel" data-tab-group="4c9cc11d105e0073ba5c89f829e28652">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="url"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('4c9cc11d105e0073ba5c89f829e28652','url')"
>
<span class="tab-nav-text">URL</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="url"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?lazy=true&amp;lightbox=false</span>)</span></span></code></pre></div>
</div>
</div>
</div>
</div><p>Th' sett'ns applied t' th' above image would be</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;border&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lazy&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lightbox&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;shadow&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/explanation/index.html">Explanation</a></li>
</ul>
</div>
</footer>
</article>
</section>
</div>
</main>
</div>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1729780242" defer></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1729780242" defer></script>
<script src="/hugo-theme-relearn/js/theme.js?1729780242" defer></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink