<liitemscopeitemtype="https://schema.org/ListItem"itemprop="itemListElement"class="a11y-only"><aitemprop="item"href="/hugo-theme-relearn/pir/index.html"><spanitemprop="name">Cap'n Hugo Relearrrn Theme</span></a><metaitemprop="position"content="1"> > </li>
<h2class="children-title"id="front-matter"><ahref="/hugo-theme-relearn/pir/authoring/frontmatter/index.html">Front Matter</a></h2><p>All th'ns front matter</p>
<h2class="children-title"id="meta-information"><ahref="/hugo-theme-relearn/pir/authoring/meta/index.html">Meta Informat'n</a></h2><p>What plank meta informat'n be avail'ble</p>
<h2class="children-title"id="markdown-syntax"><ahref="/hugo-theme-relearn/pir/authoring/markdown/index.html">Marrrkdown Rules</a></h2><p>Reference o' CommonMark an' Marrrkdown extensions</p>
<h2class="children-title"id="linking"><ahref="/hugo-theme-relearn/pir/authoring/linking/index.html">Link'n</a></h2><p>How t' link yer rrrambl'n</p>
<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 <ahref="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>
<li><iclass="fa-fw fab fa-markdown cstyle secondary"></i><span>third-day.md</span></li>
<li><iclass="fa-fw fab fa-markdown cstyle secondary"></i><span>_index.md</span></li>
</ul>
</li>
<li><iclass="fa-fw fab fa-markdown cstyle secondary"></i><span>_index.md</span></li>
</ul>
</li>
</ul>
</div>
<detailsopenclass=" box cstyle notices note">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-exclamation-circle"></i>
Avast
</summary>
<divclass="box-content">
<p>While ye can also go different, <code>_index.md</code> (with an underscore) be recommended fer each directory, it’s yer <em>directory’s home plank</em>.</p>
<p>See <ahref="https://gohugo.io/content-management/"rel="external"target="_self">Hugo’s guide fer rrrambl'n </a> t' learn more.</p>
<h2class="children-title"id="page-designs"><ahref="/hugo-theme-relearn/pir/authoring/frontmatter/designs/index.html">Plank Designs</a></h2><p>How t' vary layouts by us'n plank designs</p>
<h2class="children-title"id="menus"><ahref="/hugo-theme-relearn/pir/authoring/frontmatter/menus/index.html">Menus</a></h2><p>Sett'n th' behavior o' th' menus</p>
<h2class="children-title"id="linking"><ahref="/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>
<h2class="children-title"id="reference"><ahref="/hugo-theme-relearn/pir/authoring/frontmatter/reference/index.html">Reference</a></h2><p>All front matter fer th' Relearrrn theme</p>
<h1class="a11y-only">Subsct'ns o' Front Matter</h1>
<articleclass="default">
<headerclass="headline">
</header>
<h1id="page-designs">Page Designs</h1>
<p>Plank designs be used t' provide different layouts fer yer planks.</p>
<p>A plank be displayed by exactly one plank design an' be represented by <ahref="https://gohugo.io/content-management/front-matter/#type"rel="external"target="_self">Hugo’s reserved <code>type</code> front matter</a>.</p>
<p>Th' Relearrrn theme ships wit' th' plank designs <code>home</code>, <code>chapter</code>, an' <code>default</code> fer th' HTML output format but ye can <ahref="/hugo-theme-relearn/pir/configuration/customization/designs/index.html">define further custom plank designs</a>.</p>
<h2id="using-a-page-design">Us'n a Plank Design</h2>
<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 <ahref="https://gohugo.io/content-management/archetypes/"rel="external"target="_self">archetype file</a>, ye can just do</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new --kind chapter log/_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 t' make yer plank displayed wit' th' <code>chapter</code> plank design.</p>
<p>If no <code>type</code> be set 'n yer front matter or th' plank design doesn’t exist fer a given output format, th' plank be treated as if <code>type='default'</code> was set.</p>
<h2id="predefined-designs-for-the-html-output-format">Predefined Designs fer th' HTML Output Format</h2>
<h3id="archetypes-home">Home</h3>
<p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It’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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new --kind home _index.md</span></span></code></pre></div>
<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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new --kind chapter log/_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 <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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new log/first-day/_index.md</span></span></code></pre></div>
<p>or</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new log/second-day/index.md</span></span></code></pre></div>
<p>or</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-shell"data-lang="shell"><spanclass="line"><spanclass="cl">hugo new log/third-day.md</span></span></code></pre></div>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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 <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"rel="external"target="_self">link target</a>.</p>
<p>T' set default values fer all links, use <ahref="/hugo-theme-relearn/pir/authoring/linking/linkeffects/index.html">link effects</a>.</p>
<p>For example, this will open links 'n th' same tab</p>
<h2id="enabling-link-and-image-link-warnings">Enabl'n Link an' Image Link Warn'ns</h2>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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 plank and/or 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' <ahref="/hugo-theme-relearn/pir/shortcodes/include/index.html#enabling-link-warnings">include</a> an' <ahref="/hugo-theme-relearn/pir/shortcodes/openapi/index.html#enabling-link-warnings">openapi</a> shorrrtcodes.</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> In case ye want t' use link warnings but be bothered by false negatives, ye can configure an ignore list o' regular expressions. Th' referenced address will be checked against all regexes o' this list. If th' address matches at least one regex, no output will be written t' th' console. Th' check uses <ahref="https://gohugo.io/functions/strings/findre/"rel="external"target="_self">Hugo’s <code>findRE</code> funct'n</a>.</p>
<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, <ahref="/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><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-bars"></i></span></span><strong>sidebar</strong>: opens th' sidebar flyout if 'n mobile layout</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-list-alt"></i></span></span><strong>toc</strong>: <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#table-of-contents">opens th' table o' contents 'n an overlay</a></li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-pen"></i></span></span><strong>edit</strong>: browses t' th' editable plank if th' <code>editURL</code><ahref="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#edit-button">parameter be set</a></li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-code"></i></span></span><strong>source</strong>: browses t' th' <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#source-button">chapters source code</a> if <ahref="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#source-support">source support</a> was activated</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fab fa-markdown"></i></span></span><strong>markdown</strong>: browses t' th' <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#markdown-button">chapters Marrrkdown source</a> if <ahref="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#markdown-support">markdown support</a> was activated</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-print"></i></span></span><strong>print</strong>: browses t' th' <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#print-button">chapters printable plank</a> if <ahref="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#print-support">print support</a> was activated</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-chevron-left"></i></span></span><strong>prev</strong>: browses t' th' <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#arrow-navigation">previous plank</a> if there be one</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-chevron-right"></i></span></span><strong>next</strong>: browses t' th' <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#arrow-navigation">next plank</a> if there be one</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-ellipsis-v"></i></span></span><strong>more</strong>: opens th' overlay if screen space be limited</li>
</ul>
<h2id="table-of-contents">T'ble o' Contents</h2>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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’s front matter.</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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' <ahref="/hugo-theme-relearn/pir/configuration/content/titles/index.html">rrrambl'n configurat'n section</a>.</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> Ye can hide th' Marrrkdown button if th' <ahref="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#markdown-support">Marrrkdown output format</a> be active by sett'n <code>disableMarkdownButton=true</code>.</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> Ye can hide th' Source button if th' <ahref="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#source-support">Source output format</a> be active by sett'n <code>disableSourceButton=true</code>.</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> Ye can hide th' print button if th' <ahref="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#print-support">print output format</a> be active by sett'n <code>disablePrintButton=true</code>.</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Opt'n</span></span><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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>
<p>Every Cap'n Hugo plank must have front matter.</p>
<p>In addit'n t' <ahref="https://gohugo.io/content-management/front-matter/#fields"rel="external"target="_self">Hugo’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 <spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> badge.</p>
<p>Add theme front matter directly t' th' root o' yer page’s front matter. For example:</p>
<p>Here’s a list o' all avail'ble front matter wit' example values. Default values be described 'n th' <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/reference/index.html#annotated-front-matter">annotated example</a> below or 'n each front matter’s documentat'n.</p>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Th' plank design t' be used</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Default: not set</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># This decides th' layout o' yer plank. Th' theme ships 'home', 'chapter' an'</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># 'default'. If not set, 'default' be taken.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># type = ''</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Submenus can be ordered by 'weight', 'title', 'linktitle', 'modifieddate',</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># 'expirydate', 'publishdate', 'date', 'length' or 'default' (adher'n t'</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Default: see notes</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># If not given, defaults t'</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># - a home button if configured; if ye redefine this, use a Cap'n Hugo menu an' a type=menu t' replicate this</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># - a divider t' separate from th' sidebarmenus (depend'n on th' configurat'n o' th' theme variant)</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Th' main sidebar header.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Default: see notes</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># - a divider t' separate from th' sidebarmenus if any o' th' follow'n be configured</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># - th' language switcher if multilingual be configured</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># - th' variant switcher if multiple variants be configured</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># - th' history clearer if ye configured t' mark visited planks</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># These opt'ns configure how hidden planks be treated.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># A plank flagged as hidden, be only removed from th' navigat'n menu if ye be</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># currently not on this plank or th' hidden plank be not part o' current page's</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># ancestors. For all other functionality 'n Hugo a hidden plank behaves like any</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># other plank if not otherwise configured.</span>
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Hide a page's menu entry.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Ye can control what should happen if a path can not be resolved t' as</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># a resource or via th' file system. If not set, no output will be written</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># fer th' unresolved path. If set t' `warning` th' same happens an' an additional</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># warning be printed. If set t' `error` an error message be printed an' th' build</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># be aborted.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># If not set, th' set value o' yer site's hugo.toml be used.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Ye can control what should happen if a local image can not be resolved t' as</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># a resource. If not set, th' unresolved link be written as given into th' result'n</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># output. If set t' `warning` th' same happens an' an additional warning be</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># printed. If set t' `error` an error message be printed an' th' build be</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Please note that wit' Cap'n Hugo < 0.123.0 + `uglyURLs=true` this can lead t' false</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># If a, Math shortcode or codefence be found, th' opt'n will be ignored an'</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Math will be boarded regardlessly. This opt'n be useful 'n case ye</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># be us'n passthrough configurat'n t' render yer math. In this case no shortcode or</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># codefence be involved an' th' library be not boarded by default so ye can</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># force load'n it by sett'n `math=true`.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># This opt'n has an alias `math.force`.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># If not set, th' set value o' yer site's hugo.toml be used.</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># Ye can control what should happen if a local OpenAPI spec link can not be resolved</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># t' a resource. If not set, th' unresolved link be written as given into th' result'n</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># output. If set t' `warning` th' same happens an' an additional warning be</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="c"># printed. If set t' `error` an error message be printed an' th' build be</span>
<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 <ahref="/hugo-theme-relearn/pir/authoring/meta/index.html#hidden">treated as if <code>hidden=true</code></a> has been set.</p>
<p>Th' <code>descript'n</code> be used fer generat'n HTML meta informat'n, 'n th' <ahref="/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’s hugo.toml be used fer th' HTML meta informat'n an' social media meta informat'n. It appears empty fer th' <ahref="/hugo-theme-relearn/pir/shortcodes/children/index.html">children</a> shortcode.</p>
</span></span><spanclass="line"><spanclass="cl"><spanclass="nx">descript'n</span><spanclass="p">=</span><spanclass="s1">'Some lenghty example description'</span>
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="w"></span><spanclass="nt">descript'n</span><spanclass="p">:</span><spanclass="w"></span><spanclass="l">Some lenghty example descript'n</span><spanclass="w">
</span></span><spanclass="line"><spanclass="cl"><spanclass="nt">"description"</span><spanclass="p">:</span><spanclass="s2">"Some lenghty example description"</span>
<h2id="social-media-images">Social Media Images</h2>
<p>Th' theme adds social media meta tags includ'n feature images fer th' <ahref="https://gohugo.io/templates/internal/#open-graph"rel="external"target="_self">Open Graph</a> protocol an' <ahref="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>
<p><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> Ye can hide yer planks from th' menu by sett'n <code>hidden=true</code>.</p>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-bars"></i></span><spanclass="badge-content"style="background-color: blueviolet;">Menu</span></span> For <ahref="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><ahref="/hugo-theme-relearn/pir/configuration/content/hidden/index.html">See how ye can further configure visibility</a> throughout yer ship.</p>
<h2id="add-icon-to-the-title-heading">Add Ay'con t' th' Title Head'n</h2>
<p><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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' <ahref="/hugo-theme-relearn/pir/configuration/customization/extending/index.html#adding-javascript-or-stylesheets-to-all-pages">apply further CSS</a> 'n this case.</p>
<p><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="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 <ahref="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 <ahref="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 <ahref="https://gohugo.io/methods/page/gitinfo/"rel="external"target="_self">GitInfo</a> be active, otherwise <ahref="https://gohugo.io/methods/page/date/"rel="external"target="_self">Hugo’s <code>date</code> front matter</a></li>
</ul>
<p>See how t' further <ahref="/hugo-theme-relearn/pir/configuration/content/meta/index.html">configure this informat'n</a> on a site-wide basis.</p>
<p>Let’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’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’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’s been marked up wit' tags or formatt'n instruct'ns. While Markdown’s rules has been influenced by several exist'n text-to-HTML filters, th' single biggest source o' inspirat'n fer Markdown’s rules be th' format o' plain text email.
<cite>John Gruber</cite></p></blockquote>
<detailsopenclass=" box cstyle notices tip">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-lightbulb"></i>
Smarrrt Arrrse
</summary>
<divclass="box-content">
<p><iclass="fa-fw fas fa-bookmark"></i> Bookmark this plank fer easy future reference!</p>
<p>If not otherwise noted, th' shown examples adhere t' th' <ahref="https://commonmark.org/help/"rel="external"target="_self">CommonMark</a> standard. In addit'n th' theme supports th' follow'n extensions that <ahref="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><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-github"></i></span><spanclass="badge-content"style="background-color: darkgray;">GFM</span></span> Extension on top o' standard Marrrkdown adher'n t' <ahref="https://github.github.com/gfm/"rel="external"target="_self">GitHub Flavored Marrrkdown</a>.</p>
</li>
<li>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-php"></i></span><spanclass="badge-content"style="background-color: #888cc4;">PHP</span></span> Extension on top o' standard Marrrkdown adher'n t' <ahref="https://michelf.ca/projects/php-markdown/extra/"rel="external"target="_self">PHP Marrrkdown</a>.</p>
</li>
<li>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-lightbulb"></i></span><spanclass="badge-content"style="background-color: darkorange;">Pants</span></span> Extension by John Gruber adher'n t' <ahref="https://daringfireball.net/projects/smartypants/"rel="external"target="_self">SmartyPants</a>.</p>
</li>
<li>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-hackerrank"></i></span><spanclass="badge-content"style="background-color: fuchsia;">Cap'n Hugo</span></span><ahref="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><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw far fa-gem"></i></span><spanclass="badge-content"style="background-color: #7c3aed;">Obsidian</span></span> Extension implemented by <ahref="https://obsidian.md/"rel="external"target="_self">Obsidian</a>.</p>
</li>
<li>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-code"></i></span><spanclass="badge-content"style="background-color: orangered;">HTML</span></span> If th' <ahref="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><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-puzzle-piece"></i></span><spanclass="badge-content"style="background-color: #7dc903;">Relearrrn</span></span> Extension specific t' this theme.</p>
</li>
</ul>
<h2id="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="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>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="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>
</details>
<h2id="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’t use <code>h1</code> as this be generated by yer theme an' ye should only have one such element 'n a document.</p>
<p>T' further structure yer rrrambl'n ye can add horizontal rules. They create a “thematic break” between paragraph blocks. In Marrrkdown, ye can create it wit' three consecutive dashes <code>---</code>.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.
</span></span><spanclass="line"><spanclass="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>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="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>
</details>
<h2id="blockquotes">Blockquotes</h2>
<h3id="quotations">Quotat'ns</h3>
<p>For quot'n blocks o' rrrambl'n from another source within yer document add <code>></code> before any text ye want t' quote.</p>
<p>Blockquotes can also be nested.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl"><spanclass="k">></span><spanclass="ge">Donec massa lacus, ultricies a ullamcorper 'n, fermentum sed augue. Nunc augue, aliquam non hendrerit ac, commodo vel nisi.
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="k"></span><spanclass="ge">>> 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><spanclass="line"><spanclass="cl">> 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>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="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>
</details>
<h3id="github-alerts">GitHub Alerts</h3>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-github"></i></span><spanclass="badge-content"style="background-color: darkgray;">GFM</span></span> Since Cap'n Hugo <spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-hackerrank"></i></span><spanclass="badge-content"style="background-color: fuchsia;">0.132.0</span></span><ahref="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' <ahref="/hugo-theme-relearn/pir/shortcodes/notice/index.html">notice shortcode</a>.</p>
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span><spanclass="k">></span><spanclass="ge">Advises about risks or negative outcomes o' certain act'ns.
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span><spanclass="k">></span><spanclass="ge">Key informat'n users need t' know t' achieve their goal.
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span><spanclass="k">></span><spanclass="ge">Useful informat'n that users should know, even when skimm'n rrrambl'n.
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span><spanclass="k">></span><spanclass="ge">Helpful advice fer do'n th'ns better or more easily.
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span>> Urgent info that needs immediate user attent'n t' avoid problems.</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<detailsopenclass=" box cstyle notices caution">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-hand"></i>
Caut'n
</summary>
<divclass="box-content">
<p>Advises about risks or negative outcomes o' certain act'ns.</p>
<p>Key informat'n users need t' know t' achieve their goal.</p>
</div>
</details>
<detailsopenclass=" box cstyle notices info">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-info-circle"></i>
Ahoi
</summary>
<divclass="box-content">
<p>Informat'n that users <ins><em>might</em></ins> find interest'n.</p>
</div>
</details>
<detailsopenclass=" box cstyle notices note">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-exclamation-circle"></i>
Avast
</summary>
<divclass="box-content">
<p>Useful informat'n that users should know, even when skimm'n rrrambl'n.</p>
</div>
</details>
<detailsopenclass=" box cstyle notices tip">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-lightbulb"></i>
Smarrrt Arrrse
</summary>
<divclass="box-content">
<p>Helpful advice fer do'n th'ns better or more easily.</p>
</div>
</details>
<detailsopenclass=" box cstyle notices warning">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-exclamation-triangle"></i>
Arrr
</summary>
<divclass="box-content">
<p>Urgent info that needs immediate user attent'n t' avoid problems.</p>
</div>
</details>
</div>
</details>
<h3id="obsidian-callouts">Obsidian Callouts</h3>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw far fa-gem"></i></span><spanclass="badge-content"style="background-color: #7c3aed;">Obsidian</span></span> Since Cap'n Hugo <spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-hackerrank"></i></span><spanclass="badge-content"style="background-color: fuchsia;">0.134.0</span></span><ahref="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' <ahref="/hugo-theme-relearn/pir/shortcodes/notice/index.html">notice shortcode</a>.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl"><spanclass="k">></span><spanclass="ge">[!tip] Callouts can have custom titles
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span><spanclass="k">></span><spanclass="ge">Like this one.
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="k">></span><spanclass="ge">[!note]- Be callouts fold'ble?
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span><spanclass="k">></span><spanclass="ge">Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="k">></span><spanclass="ge">[!note]+ Be callouts fold'ble?
</span></span></span><spanclass="line"><spanclass="cl"><spanclass="ge"></span>> Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</span></span></code></pre></div>
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</details>
</div>
</details>
<h2id="text-markers">Text Markers</h2>
<h3id="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">I am rendered wit' **bold text**</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p>I am rendered wit' <strong>bold text</strong></p>
</div>
</details>
<h3id="italics">Italics</h3>
<p>Ye can emphasize a snippet o' text wit' italics by enclos'n it wit' underscores <code>_</code>.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">I am rendered wit' _italicized text_</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p>I am rendered wit' <em>italicized text</em></p>
</div>
</details>
<h3id="marked-text">Marked Text</h3>
<p>Ye can mark text 'n th' predefined accent color o' yer stylesheet.</p>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-hackerrank"></i></span><spanclass="badge-content"style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <ahref="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">==Parts== o' this text ==are marked!==</span></span></code></pre></div>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-code"></i></span><spanclass="badge-content"style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <ahref="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe"rel="external"target="_self">usage o' HTML</a>.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-html"data-lang="html"><spanclass="line"><spanclass="cl"><spanclass="p"><</span><spanclass="nt">mark</span><spanclass="p">></span>Parts<spanclass="p"></</span><spanclass="nt">mark</span><spanclass="p">></span> o' this text <spanclass="p"><</span><spanclass="nt">mark</span><spanclass="p">></span>be marked!<spanclass="p"></</span><spanclass="nt">mark</span><spanclass="p">></span></span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p><mark>Parts</mark> o' this text <mark>be marked!</mark></p>
</div>
</details>
<h3id="inserted-text">Inserted Text</h3>
<p>Ye can mark text addit'ns t' exist'n text.</p>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-hackerrank"></i></span><spanclass="badge-content"style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <ahref="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>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-code"></i></span><spanclass="badge-content"style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <ahref="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe"rel="external"target="_self">usage o' HTML</a>.</p>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-github"></i></span><spanclass="badge-content"style="background-color: darkgray;">GFM</span></span> Ye can do strikethroughs by enclos'n text wit' two tildes <code>~~</code>. See <ahref="https://gohugo.io/getting-started/configuration-markup/#extras"rel="external"target="_self">Hugo’s documentat'n remarks</a> if ye want t' use this together wit' th' subscript rules.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">~~Strike through~~ this text</span></span></code></pre></div>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-lightbulb"></i></span><spanclass="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">Do'ble quotes <spanclass="sb">`"`</span> an' single quotes <spanclass="sb">`'`</span> o' enclosed text be replaced by <spanclass="ge">**</span>"do'ble curly quotes"** an' <spanclass="ge">**</span>'single curly quotes'**.
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="cl">Do'ble dashes <spanclass="sb">`--`</span> an' triple dashes <spanclass="sb">`---`</span> be replaced by en-dash <spanclass="ge">**</span>--** an' em-dash <spanclass="ge">**</span>---** entities.
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="cl">Do'ble arrows point'n left <spanclass="sb">`<<`</span> or right <spanclass="sb">`>>`</span> be replaced by arrow <spanclass="ge">**</span><spanclass="err"><<</span>** an' <spanclass="ge">**</span>>>** entities.
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="cl">Three consecutive dots <spanclass="sb">`...`</span> be replaced by an ellipsis <spanclass="ge">**</span>...** entity.</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p>Do'ble quotes <code>"</code> an' single quotes <code>'</code> o' enclosed text be replaced by <strong>“do'ble curly quotes”</strong> an' <strong>‘single curly quotes’</strong>.</p>
<p>Do'ble dashes <code>--</code> an' triple dashes <code>---</code> be replaced by en-dash <strong>–</strong> an' em-dash <strong>—</strong> entities.</p>
<p>Do'ble arrows point'n left <code><<</code> or right <code>>></code> be replaced by arrow <strong>«</strong> an' <strong>»</strong> entities.</p>
<p>Three consecutive dots <code>...</code> be replaced by an ellipsis <strong>…</strong> entity.</p>
<p>Ye can also use subscript an' superscript text. For more complex stuff, ye can use th' <ahref="/hugo-theme-relearn/pir/shortcodes/math/index.html"><code>math</code> shortcode</a>.</p>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-hackerrank"></i></span><spanclass="badge-content"style="background-color: fuchsia;">Cap'n Hugo</span></span> Since Cap'n Hugo 0.126.0, ye can <ahref="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">How many liters H~2~O fit into 1dm^3^?</span></span></code></pre></div>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-code"></i></span><spanclass="badge-content"style="background-color: orangered;">HTML</span></span> Ye can also use it by configur'n Hugo fer <ahref="https://gohugo.io/getting-started/configuration-markup/#rendererunsafe"rel="external"target="_self">usage o' HTML</a>.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-html"data-lang="html"><spanclass="line"><spanclass="cl">How many liters H<spanclass="p"><</span><spanclass="nt">sub</span><spanclass="p">></span>2<spanclass="p"></</span><spanclass="nt">sub</span><spanclass="p">></span>O fit into 1dm<spanclass="p"><</span><spanclass="nt">sup</span><spanclass="p">></span>3<spanclass="p"></</span><spanclass="nt">sup</span><spanclass="p">></span>?</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p>How many liters H<sub>2</sub>O fit into 1dm<sup>3</sup>?</p>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-code"></i></span><spanclass="badge-content"style="background-color: orangered;">HTML</span></span> Ye can use th' <code><kbd></code> element t' style keyboard shortcuts.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-html"data-lang="html"><spanclass="line"><spanclass="cl">Press <spanclass="p"><</span><spanclass="nt">kbd</span><spanclass="p">></span>STRG<spanclass="p"></</span><spanclass="nt">kbd</span><spanclass="p">></span><spanclass="p"><</span><spanclass="nt">kbd</span><spanclass="p">></span>ALT<spanclass="p"></</span><spanclass="nt">kbd</span><spanclass="p">></span><spanclass="p"><</span><spanclass="nt">kbd</span><spanclass="p">></span>DEL<spanclass="p"></</span><spanclass="nt">kbd</span><spanclass="p">></span> t' end yer shift early.</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p>Press <kbd>STRG</kbd><kbd>ALT</kbd><kbd>DEL</kbd> t' end yer shift early.</p>
</div>
</details>
<h2id="lists">Lists</h2>
<h3id="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl"><spanclass="k">-</span> Lorem ipsum dolor sit amet
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">-</span> Vestibulum laoreet porttitor sem
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">-</span> Ac tristique libero volutpat at
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">-</span> Nulla volutpat aliquam velit
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">-</span> Phasellus iaculis neque
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">-</span> Purus sodales ultricies
</span></span><spanclass="line"><spanclass="cl">- Faucibus porta lacus fringilla vel</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="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>
</details>
<h3id="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl"><spanclass="k">1.</span> Lorem ipsum dolor sit amet
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">1.</span> Integer molestie lorem at massa
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">7.</span> Facilisis 'n pretium nisl aliquet
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">99.</span> Nulla volutpat aliquam velit
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">1.</span> Faucibus porta lacus fringilla vel
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">1.</span> Aenean sit amet erat nunc
</span></span><spanclass="line"><spanclass="cl">17. Eget porttitor lorem</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="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>
</details>
<h3id="tasks">Tasks</h3>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-github"></i></span><spanclass="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl"><spanclass="k">- [x]</span> Basic Test
</span></span><spanclass="line"><spanclass="cl"><spanclass="k">- [ ]</span> More Tests
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-puzzle-piece"></i></span><spanclass="badge-content"style="background-color: #7dc903;">Relearrrn</span></span> Ye can add lists as a tree wit' configur'ble ay'cons an' colors.</p>
<p>Th' name can be followed by an optional pipe (<code>|</code>) t' define an ay'con an' further optional pipe t' define th' icon’s color.</p>
<p>More details can be found 'n th' <ahref="/hugo-theme-relearn/pir/shortcodes/tree/index.html"><code>tree</code> shortcode docs</a>.</p>
<li><iclass="fa-fw fab fa-php"style="color: #888cc4;"></i><span>home.php</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</details>
<h3id="definitions">Definit'ns</h3>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-php"></i></span><spanclass="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>
</span></span><spanclass="line"><spanclass="cl">: Th' fruit o' an evergreen tree o' th' genus Citrus.
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="cl"> Ye can make juice out o' it.
</span></span><spanclass="line"><spanclass="cl">: A telecommunicat'n company.
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="cl"> Ye can't make juice out o' it.</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="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’t make juice out o' it.</p>
</dd>
</dl>
</div>
</details>
<h2id="code">Code</h2>
<h3id="inline-code">Inline Code</h3>
<p>Inline snippets o' code can be wrapped wit' backticks <code>`</code>.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">In this example, <spanclass="sb">`<div></div>`</span> be marked as code.</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p>In this example, <code><div></div></code> be marked as code.</p>
<p>A simple code block can be generated by indent'n several lines o' code by at least two spaces.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">Be impressed by my advanced code:
</span></span><spanclass="line"><spanclass="cl">
</span></span><spanclass="line"><spanclass="cl"> // Some comments
</span></span><spanclass="line"><spanclass="cl"> line 1 o' code
</span></span><spanclass="line"><spanclass="cl"> line 2 o' code
</span></span><spanclass="line"><spanclass="cl"> line 3 o' code</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="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>
</details>
<h3id="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><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-github"></i></span><spanclass="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 <ahref="/hugo-theme-relearn/pir/shortcodes/highlight/index.html">Code Highlight'n</a> fer additional documentat'n.</p>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-github"></i></span><spanclass="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>
</span></span><spanclass="line"><spanclass="cl">| data | 1 | path t' data files t' supply th' data that will be passed into templates. |
</span></span><spanclass="line"><spanclass="cl">| engine | 2 | engine t' be used fer process'n templates. Handlebars be th' default. |
</span></span><spanclass="line"><spanclass="cl">| ext | 3 | extension t' be used fer dest files. |</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<table>
<thead>
<tr>
<thstyle="text-align: right">Opt'n</th>
<thstyle="text-align: center">Number</th>
<thstyle="text-align: left">Descript'n</th>
</tr>
</thead>
<tbody>
<tr>
<tdstyle="text-align: right">data</td>
<tdstyle="text-align: center">1</td>
<tdstyle="text-align: left">path t' data files t' supply th' data that will be passed into templates.</td>
</tr>
<tr>
<tdstyle="text-align: right">engine</td>
<tdstyle="text-align: center">2</td>
<tdstyle="text-align: left">engine t' be used fer process'n templates. Handlebars be th' default.</td>
</tr>
<tr>
<tdstyle="text-align: right">ext</td>
<tdstyle="text-align: center">3</td>
<tdstyle="text-align: left">extension t' be used fer dest files.</td>
</tr>
</tbody>
</table>
</div>
</details>
<h2id="links">Links</h2>
<h3id="autolink">Autolink</h3>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-github"></i></span><spanclass="badge-content"style="background-color: darkgray;">GFM</span></span> Absolute URLs will automatically be converted into a link.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">This be a link t' https://example.com.</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p>This be a link t' <ahref="https://example.com"rel="external"target="_self">https://example.com</a>.</p>
</div>
</details>
<h3id="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>
<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>
</span></span><spanclass="line"><spanclass="cl">[somelinkID]: https://example.com "Go t' example domain"</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p><ahref="https://example.com"rel="external"target="_self"title="Go t' example domain">Example</a></p>
</div>
</details>
<h3id="footnotes">Footnotes</h3>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-php"></i></span><spanclass="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>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">That's some text wit' a footnote[^1]
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-puzzle-piece"></i></span><spanclass="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' URL. See th' <ahref="/hugo-theme-relearn/pir/authoring/linking/linkeffects/index.html">link effects docs</a> fer a detailed example an' how t' configure it.</p>
<h4id="target">Target</h4>
<p>Add query parameter <code>target=_self</code> or <code>target=_blank</code> t' override <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/linking/index.html#opening-links">site-wide sett'ns</a> o' <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"rel="external"target="_self">th' target behavior</a> individuallly fer each link.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">[<spanclass="nt">Magic 'n new window</span>](<spanclass="na">images/magic.gif?target=_blank</span>)</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p><ahref="/hugo-theme-relearn/pir/images/magic.gif?target=_blank"target="_blank">Magic 'n new window</a></p>
</div>
</details>
<h4id="download">Download</h4>
<p>Add query parameter <code>download</code> or <code>download=myfile.gif</code> t' force yer browser <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download"rel="external"target="_self">t' download th' link target</a> instead o' open'n it.</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">[<spanclass="nt">Magic as a download</span>](<spanclass="na">images/magic.gif?download</span>)</span></span></code></pre></div>
<detailsopenclass=" box cstyle notices code">
<summaryclass="box-label"tabindex="-1">
<iclass="fa-fw fas fa-eye"></i>
Result
</summary>
<divclass="box-content">
<p><aclass="download"downloadhref="/hugo-theme-relearn/pir/images/magic.gif?download">Magic as a download</a></p>
</div>
</details>
<h2id="images">Images</h2>
<h3id="basic-images">Basic Images</h3>
<p>Images have a similar rules t' links but include a preced'n exclamat'n mark.</p>
<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>
</span></span><spanclass="line"><spanclass="cl">[laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"</span></span></code></pre></div>
<p><spanclass="badge cstyle default badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-puzzle-piece"></i></span><spanclass="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' <ahref="/hugo-theme-relearn/pir/authoring/linking/imageeffects/index.html">image effects docs</a> fer a detailed example an' how t' configure it.</p>
<h4id="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>
<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>
<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>
<h2class="children-title"id="pages--resources"><ahref="/hugo-theme-relearn/pir/authoring/linking/pages/index.html">Planks & Resources</a></h2><p>How t' link t' planks an' resources</p>
<h2class="children-title"id="link-effects"><ahref="/hugo-theme-relearn/pir/authoring/linking/linkeffects/index.html">Link Effects</a></h2><p>How t' apply effects t' yer links</p>
<h2class="children-title"id="image-effects"><ahref="/hugo-theme-relearn/pir/authoring/linking/imageeffects/index.html">Image Effects</a></h2><p>How t' apply effects t' yer images</p>
<h1id="pages--resources">Pages & Resources</h1>
<h2id="standard-links">Standard Links</h2>
<p>Th' usual way t' link t' a plank or a resource be t' use a Marrrkdown link 'n th' form o' <code>[some page](a-page)</code> or <code></code>.</p>
<p>Images be searched 'n th' resources o' th' current plank an' yer global <code>assets</code> directory.</p>
<h2id="links-to-other-page-translations">Links t' Other Plank Translat'ns</h2>
<p>By giv'n th' query parameter <code>lang</code>, contain'n th' language code, ye can link t' planks o' other translat'ns o' yer ship, e.g. <code>[some translated page](my-page?lang=pir)</code>.</p>
<h2id="links-to-other-page-output-formats">Links t' Other Plank Output Formats</h2>
<p>Ye can link t' different output formats o' a plank by add'n th' query parameter <code>format</code>. For example t' link t' th' print format o' a plank, write <code>[a printable page](my-page?format=print)</code>.</p>
<p>Th' theme offers <ahref="/hugo-theme-relearn/pir/authoring/markdown/index.html#link-effects">effects</a> fer yer linked links.</p>
<p>Ye can <ahref="/hugo-theme-relearn/pir/configuration/customization/linkeffects/index.html">define additional custom link effects an' set defaults</a> 'n yer configurat'n.</p>
<p>Th' default link effects shipped wit' th' theme be</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Descript'n</th>
</tr>
</thead>
<tbody>
<tr>
<td>download</td>
<td>Causes th' linked resource t' be downloaded instead o' shown 'n yer browser.<br><br>- <code>false</code>: a usual link send'n ye t' th' locat'n 'n yer browser<br>- <code>true</code>: a link t' download th' resource<br>- <em><string></em>: a link t' download th' resource wit' th' given filename</td>
</tr>
<tr>
<td>target</td>
<td>Whether t' show th' link 'n a separate browser tab.<br><br>- <code>false</code>: shown 'n th' same tab<br>- <em><string></em>: <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"rel="external"target="_self">a valid <code>a</code><code>target</code> value</a><br><br>If <ahref="/hugo-theme-relearn/pir/authoring/frontmatter/linking/index.html#opening-links"><code>externalLinkTarget</code> be configured</a> an' th' URL be external, this will overwrite th' link effect value o' yer <code>hugo.toml</code> an' page’s front matter but can still be overwritten 'n th' URL query parameter.</td>
</tr>
</tbody>
</table>
<p>One way t' use them be t' add them as URL query parameter t' each individual link.</p>
<p>This can become cumbersome t' be done consistently fer th' whole ship. Instead, ye can <ahref="/hugo-theme-relearn/pir/configuration/customization/linkeffects/index.html">configure th' defaults</a> 'n yer <code>hugo.toml</code> as well as overrid'n these defaults 'n a page’s front matter.</p>
<p>Explicitly set URL query parameter will override th' defaults set fer a plank or yer ship.</p>
<p>If an effect accepts boolean values, only sett'n th' parameter name without a value 'n th' URL will set it t' <code>true</code>.</p>
<p>Without any sett'ns 'n yer <code>hugo.toml</code><code>linkEffects</code> defaults t'</p>
<p><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> This can be overridden 'n a planks front matter fer example by</p>
<divclass="highlight wrap-code"dir="auto"><pretabindex="0"class="chroma"><codeclass="language-md"data-lang="md"><spanclass="line"><spanclass="cl">[<spanclass="nt">Magic 'n new window</span>](<spanclass="na">images/magic.gif?target=_self</span>)</span></span></code></pre></div>
</div>
</div>
</div>
</div><p>Th' sett'ns applied t' th' above link would be</p>
<p>Th' theme offers <ahref="/hugo-theme-relearn/pir/authoring/markdown/index.html#image-effects">effects</a> fer yer linked images.</p>
<p>Ye can <ahref="/hugo-theme-relearn/pir/configuration/customization/imageeffects/index.html">define additional custom image effects an' set defaults</a> 'n yer configurat'n.</p>
<td>Draws a light thin border around th' image</td>
</tr>
<tr>
<td>dataurl</td>
<td>if th' linked image points t' a resource, it be converted t' a base64 encoded dataurl</td>
</tr>
<tr>
<td>inlinecontent</td>
<td>if th' linked image points t' a SVG resource, th' rrrambl'n will be used instead o' an <code><img></code> element, this be useful fer apply'n additional CSS styles t' th' elements inside o' th' SVG which be otherwise imposs'ble</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 <ahref="/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’s front matter.</p>
<p>Explicitly set URL query parameter will override th' defaults set fer a plank or yer ship.</p>
<p>If an effect accepts boolean values, only sett'n th' parameter name without a value 'n th' URL will set it t' <code>true</code>.</p>
<p>Without any sett'ns 'n yer <code>hugo.toml</code><code>imageEffects</code> defaults t'</p>
<p><spanclass="badge cstyle green badge-with-title"><spanclass="badge-title"><iclass="fa-fw fab fa-markdown"></i></span><spanclass="badge-content">Front Matter</span></span> This can be overridden 'n a planks front matter fer example by</p>
