nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-24 00:03:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
hugo-theme-relearn/pir/cont/index.print.html
McShelby a7c69c2851 deploy: 2f010f3944
2023-06-08 16:01:30 +00:00

1490 lines
114 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="pir" dir="rtl">
<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.113.0">
<meta name="generator" content="Relearn 5.15.2+tip">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<title>Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://McShelby.github.io/hugo-theme-relearn/cont/index.html" rel="alternate" hreflang="x-default">
<link href="https://McShelby.github.io/hugo-theme-relearn/cont/index.html" rel="alternate" hreflang="en">
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="canonical" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../images/logo.svg?1686240080" rel="icon" type="image/svg+xml">
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
<link href="../../css/fontawesome-all.min.css?1686240084" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1686240084" rel="stylesheet"></noscript>
<link href="../../css/nucleus.css?1686240084" rel="stylesheet">
<link href="../../css/auto-complete.css?1686240084" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1686240084" rel="stylesheet"></noscript>
<link href="../../css/perfect-scrollbar.min.css?1686240084" rel="stylesheet">
<link href="../../css/fonts.css?1686240084" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1686240084" rel="stylesheet"></noscript>
<link href="../../css/theme.css?1686240084" rel="stylesheet">
<link href="../../css/theme-auto.css?1686240084" rel="stylesheet" id="variant-style">
<link href="../../css/variant.css?1686240084" rel="stylesheet">
<link href="../../css/print.css?1686240084" rel="stylesheet" media="print">
<link href="../../css/format-print.css?1686240084" rel="stylesheet">
<link href="../../css/ie.css?1686240084" rel="stylesheet">
<script src="../../js/url.js?1686240084"></script>
<script src="../../js/variant.js?1686240084"></script>
<script>
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
window.index_js_url="../../pir/index.search.js";
var root_url="../../";
var baseUri=root_url.replace(/\/$/, '');
// translations
window.T_Copy_to_clipboard = 'Copy t\u0027 clipboard';
window.T_Copied_to_clipboard = 'Copied t\u0027 clipboard!';
window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
window.T_No_results_found = 'No rrresults found fer \u0022{0}\u0022';
window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
// some further base stuff
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
</script>
<style>
#body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/cont/index.html">
<div id="body" class="default-animation">
<div id="sidebar-overlay"></div>
<div id="toc-overlay"></div>
<nav id="topbar" class="highlightable">
<div>
<div id="breadcrumbs">
<span id="sidebar-toggle-span">
<a href="#" id="sidebar-toggle" class="topbar-link" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
</span>
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1"> &gt; </li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Rambl&#39;n</span><meta itemprop="position" content="2"></li>
</ol>
</div>
</div>
</nav>
<main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
<div class="flex-block-wrapper">
<article class="chapter">
<header class="headline">
</header>
<div class="article-subheading">T&#39; chapterrr 2</div>
<h1 id="rambln">Rambl&#39;n</h1>
<p>Find out how t' create an' org'nize yer rrrambl'n quickly an' intuitively.</p>
<footer class="footline">
</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="planks-orrrganizatn">planks orrrganizat&#39;n</h1>
<p>In <strong>Cap'n Hugo</strong>, planks be th' core o' yer ship. Once it be configured, planks be definitely th' added value t' yer documentat'n ship.</p>
<h2 id="folders">Folders</h2>
<p>Org'nize yer ship like <a href="https://gohugo.io/content/organization/" target="_blank">any other Cap'n Hugo project</a>. Typically, ye will have a <em>rrrambl'n</em> folder wit' all yer planks.</p>
<div class="highlight"><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">├── level-one
</span></span><span class="line"><span class="cl">│ ├── level-two
</span></span><span class="line"><span class="cl">│ │ ├── level-three
</span></span><span class="line"><span class="cl">│ │ │ ├── level-four
</span></span><span class="line"><span class="cl">│ │ │ │ ├── _index.md &lt;-- /level-one/level-two/level-three/level-four
</span></span><span class="line"><span class="cl">│ │ │ │ ├── page-4-a.md &lt;-- /level-one/level-two/level-three/level-four/page-4-a
</span></span><span class="line"><span class="cl">│ │ │ │ ├── page-4-b.md &lt;-- /level-one/level-two/level-three/level-four/page-4-b
</span></span><span class="line"><span class="cl">│ │ │ │ └── page-4-c.md &lt;-- /level-one/level-two/level-three/level-four/page-4-c
</span></span><span class="line"><span class="cl">│ │ │ ├── _index.md &lt;-- /level-one/level-two/level-three
</span></span><span class="line"><span class="cl">│ │ │ ├── page-3-a.md &lt;-- /level-one/level-two/level-three/page-3-a
</span></span><span class="line"><span class="cl">│ │ │ ├── page-3-b.md &lt;-- /level-one/level-two/level-three/page-3-b
</span></span><span class="line"><span class="cl">│ │ │ └── page-3-c.md &lt;-- /level-one/level-two/level-three/page-3-c
</span></span><span class="line"><span class="cl">│ │ ├── _index.md &lt;-- /level-one/level-two
</span></span><span class="line"><span class="cl">│ │ ├── page-2-a.md &lt;-- /level-one/level-two/page-2-a
</span></span><span class="line"><span class="cl">│ │ ├── page-2-b.md &lt;-- /level-one/level-two/page-2-b
</span></span><span class="line"><span class="cl">│ │ └── page-2-c.md &lt;-- /level-one/level-two/page-2-c
</span></span><span class="line"><span class="cl">│ ├── _index.md &lt;-- /level-one
</span></span><span class="line"><span class="cl">│ ├── page-1-a.md &lt;-- /level-one/page-1-a
</span></span><span class="line"><span class="cl">│ ├── page-1-b.md &lt;-- /level-one/page-1-b
</span></span><span class="line"><span class="cl">│ └── page-1-c.md &lt;-- /level-one/page-1-c
</span></span><span class="line"><span class="cl">├── _index.md &lt;-- /
</span></span><span class="line"><span class="cl">└── page-top.md &lt;-- /page-top
</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><code>_index.md</code> be required 'n each folder, it’s yer “folder home page”</p>
</div>
</div>
<h2 id="create-your-project">Create yer project</h2>
<p>Th' follow'n steps be here t' help ye initialize yer new website. If ye don&rsquo;t know Cap'n Hugo at all, we strongly suggest ye t' train by follow'n <a href="https://gohugo.io/overview/quickstart/" target="_blank">great documentat'n fer beginners</a>.</p>
<p>Cap'n Hugo provides a <code>new</code> command t' create a new website.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new ship &lt;new_project&gt;
</span></span></code></pre></div><p>Th' Relearrrn theme provides <a href="../../cont/archetypes/">archetypes</a> t' help ye create this kind o' planks.</p>
<h2 id="frontmatter-configuration">Frontmatter Configurat'n</h2>
<p>Each Cap'n Hugo plank has t' define a <a href="https://gohugo.io/content/front-matter/" target="_blank">frontmatter</a> 'n <em>toml</em>, <em>yaml</em> or <em>json</em>. This ship will use <em>toml</em> 'n all cases.</p>
<p>Th' Relearrrn theme uses th' follow'n parameters on top o' Cap'n Hugo ones:</p>
<div class="highlight"><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"># T'ble o' contents (toc) be enabled by default. Set this parameter t' true t' dis'ble it.</span>
</span></span><span class="line"><span class="cl"><span class="c"># Avast: Toc be always disabled fer chapter planks</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="c"># If set, this will be used fer th' page&#39;s menu entry (instead o' th' `title` attribute)</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuTitle</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="c"># If set, this will explicitly override common rules fer th' expand state o' a page&#39;s menu entry</span>
</span></span><span class="line"><span class="cl"><span class="nx">alwaysopen</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="c"># If set, this will explicitly override common rules fer th' sort'n order o' a page&#39;s submenu entries</span>
</span></span><span class="line"><span class="cl"><span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;title&#34;</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="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' th' plank head'n will be postfixed 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="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' th' plank 'n 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="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Th' title o' th' plank 'n menu will be postfixed 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="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Hide a menu entry by sett'n this t' true</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="c"># Display name o' this plank modifier. If set, it will be displayed 'n th' footer.</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierDisplayName</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="c"># Email o' this plank modifier. If set wit' LastModifierDisplayName, it will be displayed 'n th' footer</span>
</span></span><span class="line"><span class="cl"><span class="nx">LastModifierEmail</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
</span></span></code></pre></div><h3 id="add-icon-to-a-menu-entry">Add ay'con t' a menu entry</h3>
<p>In th' plank frontmatter, add a <code>menuPre</code> param t' insert any HTML code before th' menu label. Th' example below uses th' GitHub ay'con.</p>
<div class="highlight"><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;GitHub repo&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
</span></span></code></pre></div><p>
<a href="#image-2fb2961d10aa2b38d413949ebd902147" class="lightbox-link">
<img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=18.75rem" alt="Title wit' icon" class="shadow" style="height: auto; width: 18.75rem;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-2fb2961d10aa2b38d413949ebd902147">
<img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=18.75rem" alt="Title wit' icon" class="lightbox-image" loading="lazy">
</a></p>
<h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
<p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
<p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
<div class="highlight"><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;My page&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">5</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
</span></span></code></pre></div><h3 id="using-a-custom-title-for-menu-entries">Us'n a custom title fer menu entries</h3>
<p>By default, th' Relearrrn theme will use a page&rsquo;s <code>title</code> attribute fer th' menu item (or <code>linkTitle</code> if defined).</p>
<p>But a page&rsquo;s title has t' be descriptive on its own while th' menu be a hierarchy.
We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
<p>For example (for a plank named <code>content/install/linux.md</code>):</p>
<div class="highlight"><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;Install on Linux&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">menuTitle</span> <span class="p">=</span> <span class="s2">&#34;Linux&#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
</span></span></code></pre></div><h3 id="override-expand-state-rules-for-menu-entries">Override expand state rules fer menu entries</h3>
<p>Ye can change how th' theme expands menu entries on th' side o' th' rrrambl'n wit' th' <code>alwaysopen</code> sett'n on a per plank basis. 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' menu based on th' follow'n rules:</p>
<ul>
<li>all parent entries o' th' active plank includ'n their sibl'ns be shown regardless o' any sett'ns</li>
<li>immediate children entries o' th' active plank 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 vis'ble entries show their immediate children entries if <code>alwaysopen=true</code>; this proceeds recursively</li>
<li>all remain'n entries be not shown</li>
</ul>
<p>Ye can see this feature 'n act'n on th' example plank fer <a href="../../shortcodes/children/">children shortcode</a> an' its children planks.</p>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="arrrchetypes">Arrrchetypes</h1>
<p>Us'n th' command: <code>hugo new [relative new rrrambl'n path]</code>, ye can start a rrrambl'n file wit' th' date an' title automatically set. While this be a welcome feature, active writers need more: <a href="https://gohugo.io/content/archetypes/" target="_blank">archetypes</a>. These be preconfigured skeleton planks wit' default frontmatter.</p>
<p>Th' Relearrrn theme defines some few archetypes o' planks but ye be free t' define new ones t' yer lik'n. All can be used at any level o' th' documentat'n, th' only difference be'n th' layout o' th' rrrambl'n.</p>
<h2 id="predefined-archetypes">Predefined Archetypes</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>
<a href="#image-39122ece0363f8736864fee10e076ca6" class="lightbox-link">
<img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-39122ece0363f8736864fee10e076ca6">
<img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
</a></p>
<p>T' create a home plank, run th' follow'n command</p>
<div class="highlight"><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>This leads t' a file wit' th' follow'n rrrambl'n</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">archetype = &#34;home&#34;
</span></span><span class="line"><span class="cl">title = &#34;{{ replace .Name &#34;-&#34; &#34; &#34; | title }}&#34;
</span></span><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Lorem Ipsum.
</span></span></code></pre></div><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. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
<p>
<a href="#image-c26025d15ddbf97f5552fe1a6c35f344" class="lightbox-link">
<img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-c26025d15ddbf97f5552fe1a6c35f344">
<img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
</a></p>
<p>T' create a chapter plank, run th' follow'n command</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md
</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">archetype = &#34;chapter&#34;
</span></span><span class="line"><span class="cl">title = &#34;{{ replace .Name &#34;-&#34; &#34; &#34; | title }}&#34;
</span></span><span class="line"><span class="cl">weight = X
</span></span><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Lorem Ipsum.
</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number 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 level.</p>
<h3 id="archetypes-default">Default</h3>
<p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
<p>
<a href="#image-3823be85831cef2fd0166a2aa1eb7ada" class="lightbox-link">
<img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-3823be85831cef2fd0166a2aa1eb7ada">
<img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
</a></p>
<p>T' create a default plank, run either one o' th' follow'n commands</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md
</span></span></code></pre></div><p>or</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md
</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">title = &#34;{{ replace .Name &#34;-&#34; &#34; &#34; | title }}&#34;
</span></span><span class="line"><span class="cl">weight = X
</span></span><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Lorem Ipsum.
</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number or delete th' whole <code>weight</code> parameter entirely.</p>
<h2 id="self-defined-archetypes">Self defined Archetypes</h2>
<p>If ye be 'n need o' further archetypes ye can define yer own or even redefine exist'n ones.</p>
<h3 id="template">Template</h3>
<p>Define a template file 'n yer project at <code>archetypes/&lt;kind&gt;.md</code> an' make sure it has at least th' frontmatter parameter fer that archetype like</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">archetype = &#34;<span class="p">&lt;</span><span class="nt">kind</span><span class="p">&gt;</span>&#34;
</span></span><span class="line"><span class="cl">+++
</span></span></code></pre></div><p>Afterwards ye can generate new rrrambl'n files o' that kind wit' th' follow'n command</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind &lt;kind&gt; &lt;name&gt;/_index.md
</span></span></code></pre></div><h3 id="partials">Partials</h3>
<p>T' define how yer archetypes be rendered, define correspond'n partial files 'n yer projects directory <code>layouts/partials/archetypes/&lt;kind&gt;</code>.</p>
<p>If ye use an unknown archetype 'n yer frontmatter, th' <code>default</code> archetype will be used t' generate th' plank.</p>
<p>Related t' each archetype, several <em>hook</em> partial files 'n th' form o' <code>&lt;hook&gt;.html</code> can be given inside each archetype directory. If a partial fer a specific hook be miss'n, no output be generated fer this hook.</p>
<p>Th' follow'n hooks be used:</p>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">styleclass</td>
<td style="text-align:left">Defines a set o' CSS classes t' be added t' th' HTML&rsquo;s <code>&lt;main&gt;</code> element. Ye can use these classes t' define own CSS rules 'n yer <code>custom-header.html</code></td>
</tr>
<tr>
<td style="text-align:left">article</td>
<td style="text-align:left">Defines th' HTML how t' render yer rrrambl'n</td>
</tr>
</tbody>
</table>
<p>Take a look at th' exist'n archetypes o' this theme t' get an idea how t' utilize it.</p>
<h4 id="output-formats">Output formats</h4>
<p>Each hook file can be overridden o' a specific <a href="https://gohugo.io/templates/output-formats/" target="_blank">output format</a>. Eg. if ye define a new output format <code>PLAINTEXT</code> 'n yer <code>config.toml</code>, ye can add a file <code>layouts/partials/archetypes/default.plaintext.html</code> t' change th' way how normal rrrambl'n be written fer that output format.</p>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
<div class="tags">
<a class="tag-link" href="../../pir/tags/content/index.html">content</a>
</div>
</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’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>
<p>Without further delay, let us go over th' main elements o' Marrrkdown an' what th' result'n HTML looks like:</p>
<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 an' th' <a href="https://commonmark.org/help/" target="_blank">official Commonmark reference</a> fer easy future reference!</p>
</div>
</div>
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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"><span class="gu">###### h6 Head'n
</span></span></span></code></pre></div>
<div class="box notices cstyle secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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="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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">I am rendered wit' <span class="gs">**bold text**</span>
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">I am rendered wit' <span class="ge">_italicized text_</span>
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<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="strikethrough">Strikethrough</h3>
<p>In GFM (GitHub Flavored Markdown) ye can do strikethroughs by enclos'n text wit' two tildes <code>~~</code>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">~~Strike through this text~~
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p><del>Strike through this text</del></p>
</div>
</div>
<h2 id="text-substitution">Text substitut'n</h2>
<p>This Marrrkdown dialect supports an extension t' 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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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>
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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"><span class="k">-</span> Faucibus porta lacus fringilla vel
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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"><span class="k">17.</span> Eget porttitor lorem
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<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>In GFM (GitHub Flavored Markdown) ye can add task lists result'n 'n checked or unchecked non-click'ble items</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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"> <span class="k">- [ ]</span> Smell
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<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>This Marrrkdown dialect supports an extension t' add definit'n lists. 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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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>In GFM (GitHub Flavored Markdown) ye can also add a language specifier directly aft 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="../../cont/syntaxhighlight/">Code Highlight'n</a> fer additional documentat'n.</p>
<div class="highlight"><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">grunt.initConfig({
</span></span><span class="line"><span class="cl"> assemble: {
</span></span><span class="line"><span class="cl"> opt'ns: {
</span></span><span class="line"><span class="cl"> assets: &#39;docs/assets&#39;,
</span></span><span class="line"><span class="cl"> data: &#39;src/data/*.{json,yml}&#39;,
</span></span><span class="line"><span class="cl"> helpers: &#39;src/custom-helpers.js&#39;,
</span></span><span class="line"><span class="cl"> partials: [&#39;src/partials/**/*.{hbs,md}&#39;]
</span></span><span class="line"><span class="cl"> },
</span></span><span class="line"><span class="cl"> planks: {
</span></span><span class="line"><span class="cl"> opt'ns: {
</span></span><span class="line"><span class="cl"> layout: &#39;default.hbs&#39;
</span></span><span class="line"><span class="cl"> },
</span></span><span class="line"><span class="cl"> files: {
</span></span><span class="line"><span class="cl"> &#39;./&#39;: [&#39;src/templates/pages/index.hbs&#39;]
</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">};
</span></span><span class="line"><span class="cl">```
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
</span></span><span class="line"><span class="cl"> <span class="nx">assemble</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">opt'ns</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">assets</span><span class="o">:</span> <span class="s1">&#39;docs/assets&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="s1">&#39;src/data/*.{json,yml}&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">helpers</span><span class="o">:</span> <span class="s1">&#39;src/custom-helpers.js&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nx">partials</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;src/partials/**/*.{hbs,md}&#39;</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="nx">planks</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">opt'ns</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;default.hbs&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nx">files</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s1">&#39;./&#39;</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;src/templates/pages/index.hbs&#39;</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="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>
<h2 id="tables">Tables</h2>
<p>In GFM (GitHub Flavored Markdown) 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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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="blockquotes">Blockquotes</h2>
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 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><span class="k">&gt;
</span></span></span><span class="line"><span class="cl"><span class="k"></span><span class="ge">&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></span></code></pre></div>
<div class="box notices cstyle secondary">
<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 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>
<h2 id="links">Links</h2>
<h3 id="autolink">Autolink</h3>
<p>In GFM (GitHub Flavored Markdown) absolute URLs will automatically be converted into a link.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">This be a link t' https://example.com.
</span></span></code></pre></div>
<div class="box notices cstyle secondary">
<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" target="_blank">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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p><a href="http://assemble.io" target="_blank">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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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/" title="Visit Upstage!" target="_blank">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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p><a href="https://example.com" title="Go t' example domain" target="_blank">Example</a></p>
</div>
</div>
<h3 id="footnotes">Footnotes</h3>
<p>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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-d3edf3c7bf125f5e0f0d4901de839b68" class="lightbox-link">
<img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-d3edf3c7bf125f5e0f0d4901de839b68">
<img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
</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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-7366a2232d9ca2d3c9de3789cb2981ab" class="lightbox-link">
<img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-7366a2232d9ca2d3c9de3789cb2981ab">
<img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
</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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-e2a6aa97002cadf1f4a7d2a0bdb4c730" class="lightbox-link">
<img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-e2a6aa97002cadf1f4a7d2a0bdb4c730">
<img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<h3 id="further-image-formatting">Further Image Formatt'n</h3>
<p>This theme allows additional non-standard formatt'n by sett'n query parameter at th' end o' th' image URL.</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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-c8d50fbadfc31ad847582f5e5a4edca5" class="lightbox-link">
<img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-c8d50fbadfc31ad847582f5e5a4edca5">
<img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-2bb2d43db8253201345f46810effd1c5" class="lightbox-link">
<img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-2bb2d43db8253201345f46810effd1c5">
<img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-8e511c84f06467d9e6e6141420f7a374" class="lightbox-link">
<img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-8e511c84f06467d9e6e6141420f7a374">
<img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
</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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-b458ab070671d1d7aa4f10dcb4a2e5d4" class="lightbox-link">
<img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-b458ab070671d1d7aa4f10dcb4a2e5d4">
<img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<h5 id="border">Border</h5>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-d60d6bdcc28bdcacfbb500807de7d5e7" class="lightbox-link">
<img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-d60d6bdcc28bdcacfbb500807de7d5e7">
<img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<h5 id="left">Left</h5>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-a40609bd1bb3c1a1c86ef9d477711c6a" class="lightbox-link">
<img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-a40609bd1bb3c1a1c86ef9d477711c6a">
<img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<h5 id="right">Right</h5>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-ccd4223d5f42d60d52bcf9e822006b94" class="lightbox-link">
<img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-ccd4223d5f42d60d52bcf9e822006b94">
<img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<h5 id="inline">Inline</h5>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-af99bc6a55319c33e2acf4d88d0a0533" class="lightbox-link">
<img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-af99bc6a55319c33e2acf4d88d0a0533">
<img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
</a>
<a href="#image-fc61fd40deebcd9ba7ff84b7cd97e427" class="lightbox-link">
<img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-fc61fd40deebcd9ba7ff84b7cd97e427">
<img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
</a>
<a href="#image-4195ae88f4429b122f835118e0bd46b2" class="lightbox-link">
<img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-4195ae88f4429b122f835118e0bd46b2">
<img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
</a>
<a href="#image-1f662fb74e2a09090e64042a89acc7ff" class="lightbox-link">
<img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-1f662fb74e2a09090e64042a89acc7ff">
<img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
</a></p>
</div>
</div>
<h5 id="combination">Combinat'n</h5>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<a href="#image-af4178bb153da8ab66dea81c84848ee7" class="lightbox-link">
<img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-af4178bb153da8ab66dea81c84848ee7">
<img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
</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"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><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 secondary">
<div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
<div class="box-content">
<p>
<img src="https://octodex.github.com/images/homercat.png?width=20vw&amp;lightbox=false&amp;classes=bg-white" alt="Homercat" class="bg-white" style="height: auto; width: 20vw;" loading="lazy"></p>
</div>
</div>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="code-highlightn">Code highlight&#39;n</h1>
<p>Th' Relearrrn theme uses <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">Hugo&rsquo;s built-in rules highlight'n</a> fer code.</p>
<h2 id="markdown-syntax">Marrrkdown rules</h2>
<p>Wrap th' code block wit' three backticks an' th' name o' th' language. Highlight will try t' auto detect th' language if one be not provided.</p>
<!-- markdownlint-dis'ble MD046 -->
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">```json
</span></span><span class="line"><span class="cl">[
</span></span><span class="line"><span class="cl"> {
</span></span><span class="line"><span class="cl"> &#34;title&#34;: &#34;apples&#34;,
</span></span><span class="line"><span class="cl"> &#34;count&#34;: [12000, 20000],
</span></span><span class="line"><span class="cl"> &#34;description&#34;: {&#34;text&#34;: &#34;...&#34;, &#34;sensitive&#34;: false}
</span></span><span class="line"><span class="cl"> },
</span></span><span class="line"><span class="cl"> {
</span></span><span class="line"><span class="cl"> &#34;title&#34;: &#34;oranges&#34;,
</span></span><span class="line"><span class="cl"> &#34;count&#34;: [17500, null],
</span></span><span class="line"><span class="cl"> &#34;description&#34;: {&#34;text&#34;: &#34;...&#34;, &#34;sensitive&#34;: false}
</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></code></pre></div><!-- markdownlint-dis'ble MD046 -->
<p>Renders t':</p>
<div class="highlight"><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="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;apples&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;count&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">12000</span><span class="p">,</span> <span class="mi">20000</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="p">{</span><span class="nt">&#34;text&#34;</span><span class="p">:</span> <span class="s2">&#34;...&#34;</span><span class="p">,</span> <span class="nt">&#34;sensitive&#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="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;oranges&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;count&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">17500</span><span class="p">,</span> <span class="kc">null</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="p">{</span><span class="nt">&#34;text&#34;</span><span class="p">:</span> <span class="s2">&#34;...&#34;</span><span class="p">,</span> <span class="nt">&#34;sensitive&#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="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">]</span>
</span></span></code></pre></div><h2 id="supported-languages">Supported languages</h2>
<p>Cap'n Hugo comes wit' a <a href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" target="_blank">remark'ble list</a> o' supported languages.</p>
<h2 id="recommended-configuration">Recommended configurat'n</h2>
<p>Ye can choose a color theme from th' <a href="https://xyproto.github.io/splash/docs/all.html" target="_blank">list o' supported themes</a> an' add it 'n yer <code>config.toml</code></p>
<div class="highlight"><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">marrrkup</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">highlight</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="c"># if `guessSyntax = true`, there will be no unstyled code even if no language</span>
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a</span>
</span></span><span class="line"><span class="cl"> <span class="c"># mandatory sett'n fer yer ship if ye want t' use Merrrmaid or Math codefences</span>
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</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"># choose a color theme or create yer own</span>
</span></span><span class="line"><span class="cl"> <span class="nx">style</span> <span class="p">=</span> <span class="s2">&#34;base16-snazzy&#34;</span>
</span></span></code></pre></div>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="menu-extrrra-shorrrtcuts">Menu extrrra shorrrtcuts</h1>
<p>Ye can define additional menu entries or shortcuts 'n th' navigat'n menu without any link t' rrrambl'n.</p>
<h2 id="basic-configuration">Basic configurat'n</h2>
<p>Edit th' website configurat'n <code>config.toml</code> an' add a <code>[[menu.shortcuts]]</code> entry fer each link yer want t' add.</p>
<p>Example from th' current website:</p>
<div class="highlight"><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">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-fw fa-github&#39;&gt;&lt;/i&gt; GitHub repo&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;ds&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;https://github.com/McShelby/hugo-theme-relearn&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">10</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">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-camera&#39;&gt;&lt;/i&gt; Showcases&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;showcase/&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">11</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">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-bookmark&#39;&gt;&lt;/i&gt; Cap'n Hugo Documentation&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;hugodoc&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;https://gohugo.io/&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">20</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">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-bullhorn&#39;&gt;&lt;/i&gt; Credits&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;more/credits/&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">30</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">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-tags&#39;&gt;&lt;/i&gt; Tags&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;tags/&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">40</span>
</span></span></code></pre></div><p>By default, shortcuts be preceded by a title. This title can be disabled by sett'n <code>disableShortcutsTitle=true</code>.
However, if ye want t' keep th' title but change its value, it can be overridden by chang'n yer local i18n translat'n str'n configurat'n.</p>
<p>For example, 'n yer local <code>i18n/en.toml</code> file, add th' follow'n rrrambl'n</p>
<div class="highlight"><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">Shortcuts-Title</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">other</span> <span class="p">=</span> <span class="s2">&#34;&lt;Your value&gt;&#34;</span>
</span></span></code></pre></div><p>Read more about <a href="https://gohugo.io/extras/menus/" target="_blank">hugo menu</a> an' <a href="https://gohugo.io/content-management/multilingual/#translation-of-strings" target="_blank">hugo i18n translat'n str'ns</a></p>
<h2 id="i18n">Configurat'n fer Multilingual mode</h2>
<p>When us'n a multilingual website, ye can set different menus fer each language. In th' <code>config.toml</code> file, prefix yer menu configurat'n by <code>Languages.&lt;language-id&gt;</code>.</p>
<p>Example from th' current website:</p>
<div class="highlight"><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">languages</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Hugo Relearrrn Theme&#34;</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 class="nx">languageName</span> <span class="p">=</span> <span class="s2">&#34;English&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-fw fa-github&#39;&gt;&lt;/i&gt; GitHub repo&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;ds&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;https://github.com/McShelby/hugo-theme-relearn&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">10</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-camera&#39;&gt;&lt;/i&gt; Showcases&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;showcase/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">11</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-bookmark&#39;&gt;&lt;/i&gt; Cap'n Hugo Documentation&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;hugodoc&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;https://gohugo.io/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">20</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-bullhorn&#39;&gt;&lt;/i&gt; Credits&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;more/credits/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">30</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-tags&#39;&gt;&lt;/i&gt; Tags&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;tags/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">40</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Cap&#39;n Hugo Relearrrn Theme&#34;</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 class="nx">languageName</span> <span class="p">=</span> <span class="s2">&#34;Arrr! Pirrrates&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">.</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Home&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-fw fa-github&#39;&gt;&lt;/i&gt; GitHub repo&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;ds&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;https://github.com/McShelby/hugo-theme-relearn&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">10</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-camera&#39;&gt;&lt;/i&gt; Showcases&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;showcase/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">11</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-bookmark&#39;&gt;&lt;/i&gt; Cap&#39;n Hugo Documentat&#39;n&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;hugodoc&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;https://gohugo.io/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">20</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-bullhorn&#39;&gt;&lt;/i&gt; Crrredits&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;more/credits/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">30</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-fw fa-tags&#39;&gt;&lt;/i&gt; Arrr! Tags&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;tags/&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">40</span>
</span></span></code></pre></div><p>Read more about <a href="https://gohugo.io/extras/menus/" target="_blank">hugo menu</a> an' <a href="https://gohugo.io/content-management/multilingual/#menus" target="_blank">hugo multilingual menus</a></p>
<h2 id="shortcuts-to-pages-inside-of-your-project">Shortcuts t' planks inside o' yer project</h2>
<p>If ye have shortcuts t' planks inside o' yer project an' ye don&rsquo;t want them t' show up 'n plank menu section, ye have two choices:</p>
<ol>
<li>
<p>Make th' plank file fer th' shortcut section a <a href="https://gohugo.io/content-management/age-bundles/#headless-bundle" target="_blank">headless branch bundle</a> (contained 'n its own subdirectory an' called <code>_index.md</code>) an' add th' follow'n rontmatter configurat'n t' th' file (see exampleSite&rsquo;s <code>content/showcase</code>). This causes its rrrambl'n t' <strong>not</strong> be ontained 'n th' sitemap.</p>
<div class="highlight"><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">_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="s2">&#34;never&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">list</span> <span class="p">=</span> <span class="s2">&#34;never&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">publishResources</span> <span class="p">=</span> <span class="kc">false</span>
</span></span></code></pre></div></li>
<li>
<p>Store th' plank file fer th' shortcut section below a parent headless branch bundle an' add th' follow'n frontmatter t' he <strong>parent</strong>. In this case, th' file itself can be a branch bundle, leaf bundle or simple plank (see exampleSite&rsquo;s content/more/<code>an'</code>content/more/credits`). This causes its rrrambl'n t' be contained 'n th' sitemap.</p>
<div class="highlight"><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">_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="s2">&#34;always&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">list</span> <span class="p">=</span> <span class="s2">&#34;never&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">publishResources</span> <span class="p">=</span> <span class="kc">true</span>
</span></span></code></pre></div></li>
</ol>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
</header>
<h1 id="multilingual-an-i18n">Multilingual an&#39; i18n</h1>
<p>Th' Relearrrn theme be fully compat'ble wit' Cap'n Hugo multilingual mode.</p>
<ul>
<li>Avail'ble languages: Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, English, Finnish French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese. Feel free t' contribute!</li>
<li>Full support fer languages written right t' left</li>
<li>Automatic menu generat'n from multilingual rrrambl'n</li>
<li>In-browser language switch'n</li>
</ul>
<p>
<a href="#image-54f7a3a12140ea416dfe9bc6dc64f3d4" class="lightbox-link">
<img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=18.75rem" alt="I18n menu" class="shadow" style="height: auto; width: 18.75rem;" loading="lazy">
</a>
<a href="javascript:history.back();" class="lightbox" id="image-54f7a3a12140ea416dfe9bc6dc64f3d4">
<img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=18.75rem" alt="I18n menu" class="lightbox-image" loading="lazy">
</a></p>
<h2 id="basic-configuration">Basic configurat'n</h2>
<p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
<p>For example wit' current English an' Piratized English website.</p>
<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>Make sure yer default language be defined as th' first one 'n th' <code>[languages]</code> array, as th' theme needs t' make assumpt'ns on it</p>
</div>
</div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="c"># English be th' default language</span>
</span></span><span class="line"><span class="cl"><span class="nx">defaultContentLanguage</span> <span class="p">=</span> <span class="s2">&#34;en&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Hugo Relearrrn Theme&#34;</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 class="nx">languageName</span> <span class="p">=</span> <span class="s2">&#34;English&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Cap&#39;n Hugo Relearrrn Theme&#34;</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="nx">languageName</span> <span class="p">=</span> <span class="s2">&#34;Arrr! Pirrrates&#34;</span>
</span></span></code></pre></div><p>Then, fer each new plank, append th' <em>id</em> o' th' language t' th' file.</p>
<ul>
<li>Single file <code>my-page.md</code> be split 'n two files:
<ul>
<li>'n English: <code>my-page.md</code></li>
<li>'n Piratized English: <code>my-page.pir.md</code></li>
</ul>
</li>
<li>Single file <code>_index.md</code> be split 'n two files:
<ul>
<li>'n English: <code>_index.md</code></li>
<li>'n Piratized English: <code>_index.pir.md</code></li>
</ul>
</li>
</ul>
<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>Be aware that only translated planks be displayed 'n menu. It&rsquo;s not replaced wit' default language 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>Use <a href="https://gohugo.io/content-management/multilingual/#translate-your-content" target="_blank">slug</a> frontmatter parameter t' translate urls too.</p>
</div>
</div>
<h2 id="search">Search</h2>
<p>In case each page&rsquo;s rrrambl'n be written 'n one single language only, th' above configurat'n will already configure th' site&rsquo;s search functionality correctly.</p>
<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>Although th' theme supports a wide variety o' supported languages, th' site&rsquo;s search via th' <a href="https://lunrjs.com" target="_blank">Lunr</a> search library does not.
You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported language. Currently unsupported be:</p>
<ul>
<li>Czech</li>
<li>Indonesian</li>
<li>Polish</li>
</ul>
</div>
</div>
<h3 id="search-with-mixed-language-support">Search wit' mixed language support</h3>
<p>In case yer page&rsquo;s rrrambl'n contains text 'n multiple languages (e.g. ye be writ'n a Russian documentat'n fer yer english API), ye can add those languages t' yer <code>config.toml</code> t' broaden search.</p>
<div class="highlight"><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">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">additionalContentLanguage</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;en&#34;</span> <span class="p">]</span>
</span></span></code></pre></div><p>As this be an array, ye can add multiple additional languages.</p>
<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>Keep 'n mind that th' language code required here, be th' base language code. E.g. if ye have additional rrrambl'n 'n <code>zh-CN</code>, ye have t' add just <code>zh</code> t' this parameter.</p>
</div>
</div>
<h2 id="overwrite-translation-strings">Overwrite translat'n str'ns</h2>
<p>Translat'ns str'ns be used fer common default values used 'n th' theme (<em>Edit</em> button, <em>Search placeholder</em> an' so on). Translat'ns be avail'ble 'n English an' Piratized English but ye may use another language or want t' override default values.</p>
<p>T' override these values, create a new file 'n yer local i18n folder <code>i18n/&lt;idlanguage&gt;.toml</code> an' inspire yourself from th' theme <code>themes/hugo-theme-relearn/i18n/en.toml</code></p>
<h2 id="disable-language-switching">Dis'ble language switch'n</h2>
<p>Switch'n th' language 'n th' browser be a great feature, but fer some reasons ye may want t' dis'ble it.</p>
<p>Just set <code>disableLanguageSwitchingButton=true</code> 'n yer <code>config.toml</code></p>
<div class="highlight"><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">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="c"># When us'n multilingual website, dis'ble th' switch language button.</span>
</span></span><span class="line"><span class="cl"> <span class="nx">disableLanguageSwitchingButton</span> <span class="p">=</span> <span class="kc">true</span>
</span></span></code></pre></div>
<footer class="footline">
</footer>
</article>
<article class="default">
<header class="headline">
<div class="tags">
<a class="tag-link" href="../../pir/tags/tutorrrial/index.html">tutorrrial</a>
</div>
</header>
<h1 id="taxonomy">Taxonomy</h1>
<p>Th' Relearrrn theme supports Hugo&rsquo;s default taxonomies <em>tag</em> an' <em>category</em> out o' th' box.</p>
<h2 id="configuration">Configurat'n</h2>
<p>Just add tags and/or categories t' any plank. They can be given as a single str'n or an array o' str'ns.</p>
<div class="highlight"><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">categories</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;taxonomy&#34;</span><span class="p">,</span> <span class="s2">&#34;content&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">tags</span> <span class="p">=</span> <span class="s2">&#34;tutorial&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Taxonomy&#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
</span></span></code></pre></div><h2 id="behavior">Behavior</h2>
<p>Th' tags be displayed at th' top o' th' plank 'n alphabetical order.</p>
<p>Th' categories be displayed at th' bottom o' th' plank 'n alphabetical order 'n th' default implementat'n o' th' theme but can be customized by provid'n yer own <code>content-footer.html</code> partial.</p>
<p>Each item be a link t' a taxonomy plank display'n all th' articles wit' th' given term.</p>
<h2 id="list-all-the-tags">List all th' tags</h2>
<p>In th' <code>config.toml</code> file ye can add a shortcut t' display all th' tags an' categories</p>
<div class="highlight"><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">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-tags&#39;&gt;&lt;/i&gt; Tags&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/tags&#34;</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">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-list&#39;&gt;&lt;/i&gt; Categories&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/categories&#34;</span>
</span></span></code></pre></div>
<footer class="footline">
<i class='fas fa-list'></i>
<a class="tag-link" href="../../pir/categories/content/index.html">content</a>
| <a class="tag-link" href="../../pir/categories/taxonomy/index.html">taxonomy</a>
</footer>
</article>
</section>
</div>
</main>
</div>
<script src="../../js/clipboard.min.js?1686240085" defer></script>
<script src="../../js/perfect-scrollbar.min.js?1686240085" defer></script>
<script src="../../js/theme.js?1686240085" defer></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink