mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 18:53:18 +00:00
1490 lines
126 KiB
HTML
1490 lines
126 KiB
HTML
<!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.120.3">
|
||
<meta name="generator" content="Relearn 5.23.2+tip">
|
||
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
||
<meta name="author" content="Sören Weber">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
|
||
<meta name="twitter:title" content="Rambl'n :: Cap'n Hugo Relearrrn Theme">
|
||
<meta name="twitter:description" content="Documentation for Hugo Relearn Theme">
|
||
<meta property="og:title" content="Rambl'n :: Cap'n Hugo Relearrrn Theme">
|
||
<meta property="og:description" content="Documentation for Hugo Relearn Theme">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html">
|
||
<meta property="og:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
|
||
<meta property="og:site_name" content="Cap'n Hugo Relearrrn Theme">
|
||
<title>Rambl'n :: Cap'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'n :: Cap'n Hugo Relearrrn Theme">
|
||
<link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl'n :: Cap'n Hugo Relearrrn Theme">
|
||
<link href="../../images/logo.svg?1699057438" 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?1699057440" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1699057440" rel="stylesheet"></noscript>
|
||
<link href="../../css/nucleus.css?1699057440" rel="stylesheet">
|
||
<link href="../../css/auto-complete.css?1699057440" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1699057440" rel="stylesheet"></noscript>
|
||
<link href="../../css/perfect-scrollbar.min.css?1699057440" rel="stylesheet">
|
||
<link href="../../css/fonts.css?1699057440" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1699057440" rel="stylesheet"></noscript>
|
||
<link href="../../css/theme.css?1699057440" rel="stylesheet">
|
||
<link href="../../css/theme-auto.css?1699057440" rel="stylesheet" id="R-variant-style">
|
||
<link href="../../css/variant.css?1699057440" rel="stylesheet">
|
||
<link href="../../css/print.css?1699057440" rel="stylesheet" media="print">
|
||
<link href="../../css/format-print.css?1699057440" rel="stylesheet">
|
||
<link href="../../css/ie.css?1699057440" rel="stylesheet">
|
||
<script src="../../js/url.js?1699057440"></script>
|
||
<script src="../../js/variant.js?1699057440"></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_Reset_view = 'Rrreset view';
|
||
window.T_View_reset = 'View rrreset!';
|
||
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', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
||
</script>
|
||
<style>
|
||
#R-body img.bg-white {
|
||
background-color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/cont/index.html">
|
||
<div id="R-body" class="default-animation">
|
||
<div id="R-body-overlay"></div>
|
||
<nav id="R-topbar">
|
||
<div class="topbar-wrapper">
|
||
<div class="topbar-sidebar-divider"></div>
|
||
<div class="topbar-area topbar-area-start" data-area="start">
|
||
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide">
|
||
<button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)">
|
||
<i class="fa-fw fas fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
|
||
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Rambl'n</span><meta itemprop="position" content="1"></li>
|
||
</ol>
|
||
<div class="topbar-area topbar-area-end" data-area="end">
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div id="R-main-overlay"></div>
|
||
<main id="R-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' chapterrr 2</div>
|
||
<h1 id="rambln">Rambl'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'ns o' Rambl'n</h1>
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="planks-orrrganizatn">planks orrrganizat'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="wrap-code 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 <-- /level-one/level-two/level-three/level-four
|
||
</span></span><span class="line"><span class="cl">│ │ │ │ ├── page-4-a.md <-- /level-one/level-two/level-three/level-four/page-4-a
|
||
</span></span><span class="line"><span class="cl">│ │ │ │ ├── page-4-b.md <-- /level-one/level-two/level-three/level-four/page-4-b
|
||
</span></span><span class="line"><span class="cl">│ │ │ │ └── page-4-c.md <-- /level-one/level-two/level-three/level-four/page-4-c
|
||
</span></span><span class="line"><span class="cl">│ │ │ ├── _index.md <-- /level-one/level-two/level-three
|
||
</span></span><span class="line"><span class="cl">│ │ │ ├── page-3-a.md <-- /level-one/level-two/level-three/page-3-a
|
||
</span></span><span class="line"><span class="cl">│ │ │ ├── page-3-b.md <-- /level-one/level-two/level-three/page-3-b
|
||
</span></span><span class="line"><span class="cl">│ │ │ └── page-3-c.md <-- /level-one/level-two/level-three/page-3-c
|
||
</span></span><span class="line"><span class="cl">│ │ ├── _index.md <-- /level-one/level-two
|
||
</span></span><span class="line"><span class="cl">│ │ ├── page-2-a.md <-- /level-one/level-two/page-2-a
|
||
</span></span><span class="line"><span class="cl">│ │ ├── page-2-b.md <-- /level-one/level-two/page-2-b
|
||
</span></span><span class="line"><span class="cl">│ │ └── page-2-c.md <-- /level-one/level-two/page-2-c
|
||
</span></span><span class="line"><span class="cl">│ ├── _index.md <-- /level-one
|
||
</span></span><span class="line"><span class="cl">│ ├── page-1-a.md <-- /level-one/page-1-a
|
||
</span></span><span class="line"><span class="cl">│ ├── page-1-b.md <-- /level-one/page-1-b
|
||
</span></span><span class="line"><span class="cl">│ └── page-1-c.md <-- /level-one/page-1-c
|
||
</span></span><span class="line"><span class="cl">├── _index.md <-- /
|
||
</span></span><span class="line"><span class="cl">└── page-top.md <-- /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’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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new ship <new_project></span></span></code></pre></div><p>Th' Relearrrn theme provides <a href="../../cont/archetypes/index.html">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="wrap-code 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'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">""</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c"># If set t' true, th' menu 'n th' sidebar will be displayed 'n a collaps'ble tree view. Although th' functionality works wit' old browsers (IE11), th' display o' th' expander ay'cons be limited t' modern browsers</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">collapsibleMenu</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 explicitly override common rules fer th' expand state o' a page'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's submenu entries</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">"weight"</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">""</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">""</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">""</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">""</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">""</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">""</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c"># Override default values fer image effects, ye can even add yer own arbitrary effects t' th' list</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">imageEffects</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"><span 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="wrap-code 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">"GitHub repo"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">"<i class='fab fa-github'></i> "</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-bf4696f698d435f021517aabe4495492" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-bf4696f698d435f021517aabe4495492"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" 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="wrap-code 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">"My page"</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’s <code>title</code> attribute fer th' menu item (or <code>linkTitle</code> if defined).</p>
|
||
<p>But a page’s title has t' be descriptive on its own while th' menu be a hierarchy.
|
||
We’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="wrap-code 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">"Install on Linux"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">menuTitle</span> <span class="p">=</span> <span class="s2">"Linux"</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/index.html">children shortcode</a> an' its children planks.</p>
|
||
<h2 id="disable-section-pages">Dis'ble Sect'n Planks</h2>
|
||
<p>Ye may want t' structure yer planks 'n a hierachical way but don’t want t' generate planks fer those sections? Th' theme got ye covered.</p>
|
||
<p>T' stay wit' th' initial example: Suppose ye want <code>level-one</code> appear 'n th' sidebar but don’t want t' generate a plank fer it. So th' entry 'n th' sidebar should not be click'ble but should show an expander.</p>
|
||
<p>For this, open <code>content/level-one/_index.md</code> an' add th' follow'n frontmatter</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">collapsibleMenu</span> <span class="p">=</span> <span class="kc">true</span> <span class="c"># this adds th' expander t' th' menu entry if not already set 'n yer config.toml</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">_build</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">render</span> <span class="p">=</span> <span class="s2">"never"</span> <span class="c"># no plank will be generated so th' plank does not have a url</span></span></span></code></pre></div>
|
||
|
||
<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’s best t' have only one plank o' this kind 'n yer project.</p>
|
||
<p><a href="#R-image-15c8a0cce8c3868c03232e23a9754deb" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-15c8a0cce8c3868c03232e23a9754deb"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||
<p>T' create a home plank, run th' follow'n command</p>
|
||
<div class="wrap-code 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="wrap-code 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 = "home"
|
||
</span></span><span class="line"><span class="cl">title = "{{ replace .Name "-" " " | title }}"
|
||
</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="#R-image-e1a4d308256d5f950a129983f97bf691" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-e1a4d308256d5f950a129983f97bf691"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||
<p>T' create a chapter plank, run th' follow'n command</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter <name>/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
|
||
<div class="wrap-code 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 = "chapter"
|
||
</span></span><span class="line"><span class="cl">title = "{{ replace .Name "-" " " | title }}"
|
||
</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="#R-image-cef5bb2bd6e1fb1b6bca25ee5c08f80a" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-cef5bb2bd6e1fb1b6bca25ee5c08f80a"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||
<p>T' create a default plank, run either one o' th' follow'n commands</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new <chapter>/<name>/_index.md</span></span></code></pre></div><p>or</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new <chapter>/<name>.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
|
||
<div class="wrap-code 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 = "{{ replace .Name "-" " " | title }}"
|
||
</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/<kind>.md</code> an' make sure it has at least th' frontmatter parameter fer that archetype like</p>
|
||
<div class="wrap-code 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 = "<span class="p"><</span><span class="nt">kind</span><span class="p">></span>"
|
||
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind <kind> <name>/_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/<kind></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><hook>.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>Name</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>styleclass</td>
|
||
<td>Defines a set o' CSS classes t' be added t' th' HTML’s <code><main></code> element. Ye can use these classes t' define own CSS rules 'n yer <code>custom-header.html</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>article</td>
|
||
<td>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=" taxonomy-tags term-list cstyle tags" title="Tag-a-taggs" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<ul>
|
||
<li><a class="term-link" href="../../pir/tags/content/index.html">Content</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
<h1 id="marrrkdown-rules">Marrrkdown rules</h1>
|
||
|
||
|
||
<p>Let’s face it: Writ'n rrrambl'n fer th' web be tiresome. WYSIWYG editors help alleviate this task, but they generally result 'n horr'ble code, or worse yet, ugly web planks.</p>
|
||
<p><strong>Marrrkdown</strong> be a better way t' write <strong>HTML</strong>, without all th' complexities an' ugliness that usually accompanies it.</p>
|
||
<p>Some o' th' key benefits be:</p>
|
||
<ol>
|
||
<li>Marrrkdown be simple t' learn, wit' minimal extra characters so it’s also quicker t' write rrrambl'n.</li>
|
||
<li>Less chance o' errors when writ'n 'n Marrrkdown.</li>
|
||
<li>Produces valid HTML output.</li>
|
||
<li>Keeps th' rrrambl'n an' th' visual display separate, so ye cannot mess up th' look o' yer ship.</li>
|
||
<li>Write 'n any text editor or Marrrkdown applicat'n ye like.</li>
|
||
<li>Marrrkdown be a joy t' use!</li>
|
||
</ol>
|
||
<p>John Gruber, th' author o' Marrrkdown, puts it like this:</p>
|
||
<blockquote>
|
||
<p>Th' overrid'n design goal fer Markdown’s formatt'n rules be t' make it as read'ble as poss'ble. Th' idea be that a Markdown-formatted document should be publish'ble as-is, as plain text, without look'n like it’s been marked up wit' tags or formatt'n instruct'ns. While Markdown’s rules has been influenced by several exist'n text-to-HTML filters, th' single biggest source o' inspirat'n fer Markdown’s rules be th' format o' plain text email.
|
||
<cite>John Gruber</cite></p>
|
||
</blockquote>
|
||
<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="wrap-code 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’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="wrap-code 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">###### h6 Head'n</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 “thematic break” between paragraph blocks. In Marrrkdown, ye can create it wit' three consecutive dashes <code>---</code>.</p>
|
||
<div class="wrap-code 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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">I am rendered wit' **bold 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>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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">I am rendered wit' _italicized 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>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="wrap-code 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="wrap-code 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">`"`</span> an' single quotes <span class="sb">`'`</span> o' enclosed text be replaced by <span class="ge">**</span>"do'ble curly quotes"** an' <span class="ge">**</span>'single curly quotes'**.
|
||
</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">`<<`</span> or right <span class="sb">`>>`</span> be replaced by arrow <span class="ge">**</span><span class="err"><<</span>** an' <span class="ge">**</span>>>** 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>"</code> an' single quotes <code>'</code> o' enclosed text be replaced by <strong>“do'ble curly quotes”</strong> an' <strong>‘single curly quotes’</strong>.</p>
|
||
<p>Do'ble dashes <code>--</code> an' triple dashes <code>---</code> be replaced by en-dash <strong>–</strong> an' em-dash <strong>—</strong> entities.</p>
|
||
<p>Do'ble arrows point'n left <code><<</code> or right <code>>></code> be replaced by arrow <strong>«</strong> an' <strong>»</strong> entities.</p>
|
||
<p>Three consecutive dots <code>...</code> be replaced by an ellipsis <strong>…</strong> entity.</p>
|
||
</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="wrap-code 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">- 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="wrap-code 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">17. 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="wrap-code 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"> - [ ] 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="wrap-code 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'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’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="wrap-code 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">`<div></div>`</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><div></div></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="wrap-code 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 after th' open'n fence, <code>```js</code>, an' rules highlight'n will automatically be applied accord'n t' th' selected language 'n th' rendered HTML.</p>
|
||
<p>See <a href="../../shortcodes/highlight/index.html">Code Highlight'n</a> fer additional documentat'n.</p>
|
||
<div class="wrap-code 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: 'docs/assets',
|
||
</span></span><span class="line"><span class="cl"> data: 'src/data/*.{json,yml}',
|
||
</span></span><span class="line"><span class="cl"> helpers: 'src/custom-helpers.js',
|
||
</span></span><span class="line"><span class="cl"> partials: ['src/partials/**/*.{hbs,md}']
|
||
</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: 'default.hbs'
|
||
</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"> './': ['src/templates/pages/index.hbs']
|
||
</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="wrap-code 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">'docs/assets'</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">'src/data/*.{json,yml}'</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">'src/custom-helpers.js'</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">'src/partials/**/*.{hbs,md}'</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">'default.hbs'</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">'./'</span><span class="o">:</span> <span class="p">[</span><span class="s1">'src/templates/pages/index.hbs'</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="wrap-code 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="wrap-code 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>></code> before any text ye want t' quote.</p>
|
||
<p>Blockquotes can also be nested.</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </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">>
|
||
</span></span></span><span class="line"><span class="cl"><span class="k"></span><span class="ge">> > Sed adipisc'n elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis 'n dolor tincidunt mollis ac eu diam.
|
||
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>>
|
||
</span></span><span class="line"><span class="cl">> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.</span></span></code></pre></div>
|
||
<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="wrap-code 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="wrap-code 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="wrap-code 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/ "Visit Upstage!"</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="wrap-code 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 "Go t' example domain"</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">That'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's th' footnote.
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl">That'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’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’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’s th' footnote. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
||
</li>
|
||
<li id="fn:2">
|
||
<p>Anyth'n o' interest goes here.</p>
|
||
<p>Blue light glows blue. <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</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="wrap-code 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="#R-image-fd5671c53471a49296907749f36da4ae" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-fd5671c53471a49296907749f36da4ae"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" 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="wrap-code 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 "Jean Luc Picard"</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="#R-image-3100cf51e03e61236d7d6f0b76997e65" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-3100cf51e03e61236d7d6f0b76997e65"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" 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="wrap-code 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 "Geordi La Forge"</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="#R-image-60246a21f1fa7b15bb6d5942376734bf" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-60246a21f1fa7b15bb6d5942376734bf"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<h3 id="image-effects">Image Effects</h3>
|
||
<p>This theme allows additional non-standard formatt'n by sett'n query parameter at th' end o' th' image URL. Th' default <a href="../../cont/imageeffects/index.html">behavior be configur'ble</a> thru yer <code>config.toml</code> or frontmatter parameter.</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="wrap-code 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="#R-image-1c3aea709158ed3cd19fe59d05cb271a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-1c3aea709158ed3cd19fe59d05cb271a"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-code 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="#R-image-340c02c32c104e074f0f2e0ff18c7bf4" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-340c02c32c104e074f0f2e0ff18c7bf4"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-code 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&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="#R-image-02a5e8c724b4cd0819dcf86c0b83005b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-02a5e8c724b4cd0819dcf86c0b83005b"><img src="https://octodex.github.com/images/minion.png?height=50px&width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" 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="wrap-code 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="#R-image-73bf4e9a46113ce8ce4286e7bcf6ced9" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-73bf4e9a46113ce8ce4286e7bcf6ced9"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<h5 id="border">Border</h5>
|
||
<div class="wrap-code 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="#R-image-9241ece0da2625ed20473dd61efdfacb" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-9241ece0da2625ed20473dd61efdfacb"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<h5 id="left">Left</h5>
|
||
<div class="wrap-code 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="#R-image-620fff50f6223c2851608258675b5470" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-620fff50f6223c2851608258675b5470"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<h5 id="right">Right</h5>
|
||
<div class="wrap-code 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="#R-image-ec8ac2e828e8002443663f93e45e794f" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-ec8ac2e828e8002443663f93e45e794f"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<h5 id="inline">Inline</h5>
|
||
<div class="wrap-code 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="#R-image-a52e1a28cb2d97400de7487d7a094532" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-a52e1a28cb2d97400de7487d7a094532"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
|
||
<a href="#R-image-d35417aad0831dc3ae179a5c1008feb1" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-d35417aad0831dc3ae179a5c1008feb1"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
|
||
<a href="#R-image-a4e85ee89f8cdffc073761a297792586" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-a4e85ee89f8cdffc073761a297792586"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
|
||
<a href="#R-image-82c7fff398e38751ce1d154f3bdb2fc5" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-82c7fff398e38751ce1d154f3bdb2fc5"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
<h5 id="combination">Combinat'n</h5>
|
||
<div class="wrap-code 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="#R-image-2e637bdfbd9b92156296b7cb5a85837c" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-2e637bdfbd9b92156296b7cb5a85837c"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" 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="wrap-code 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&lightbox=false" alt="Homercat" class="figure-image bg-white border nolightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
|
||
<p>If ye want t' wrap an image 'n a link an' <code>lightbox=true</code> be yer default sett'n, ye have t' explicitly dis'ble th' lightbox t' avoid it t' hijack'n yer link like:</p>
|
||
<div class="wrap-code 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>)](https://octodex.github.com/#homercat)</span></span></code></pre></div><p><a href="https://octodex.github.com/#homercat" target="_blank"><img src="https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false" alt="Homercat" class="figure-image bg-white border nolightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a></p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<header class="headline">
|
||
</header>
|
||
<h1 id="image-effects">Image Effects</h1>
|
||
|
||
|
||
<p>Th' theme supports non-standard <a href="../../cont/markdown/index.html#image-effects">image effects</a>.</p>
|
||
<p>As described, ye can add this t' th' URL query parameter, but this may be cumbersome t' do it consistently fer th' whole plank.</p>
|
||
<p>Instead, ye can configure th' defaults 'n yer <code>config.toml</code> aswell as overrid'n these default 'n th' planks frontmatter.</p>
|
||
<p>Explicitly set URL query parameter will override th' defaults 'n effect fer a plank.</p>
|
||
<p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
|
||
|
||
|
||
<div class="tab-panel" data-tab-group="39772c6d60f9e9730248a1e0e8dec384">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="configtoml"
|
||
class="tab-nav-button tab-panel-style cstyle initial active"
|
||
onclick="switchTab('39772c6d60f9e9730248a1e0e8dec384','configtoml')"
|
||
>
|
||
<span class="tab-nav-text">config.toml</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="configtoml"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code 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="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">imageEffects</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div></div>
|
||
</div>
|
||
</div>
|
||
</div><p>This can be overridden 'n a planks frontmatter by eg.</p>
|
||
|
||
|
||
<div class="tab-panel" data-tab-group="9c0b1251303730d44546d8f810a82b3a">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="frontmatter"
|
||
class="tab-nav-button tab-panel-style cstyle initial active"
|
||
onclick="switchTab('9c0b1251303730d44546d8f810a82b3a','frontmatter')"
|
||
>
|
||
<span class="tab-nav-text">frontmatter</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="frontmatter"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code 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="p">[</span><span class="nx">imageEffects</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div></div>
|
||
</div>
|
||
</div>
|
||
</div><p>Or by explicitly override sett'ns by URL query parameter</p>
|
||
|
||
|
||
<div class="tab-panel" data-tab-group="914e123a5c36a3191867b89095a4f9fe">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="url"
|
||
class="tab-nav-button tab-panel-style cstyle initial active"
|
||
onclick="switchTab('914e123a5c36a3191867b89095a4f9fe','url')"
|
||
>
|
||
<span class="tab-nav-text">URL</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="url"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code 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?lightbox=false&bg-white=true</span>)</span></span></code></pre></div></div>
|
||
</div>
|
||
</div>
|
||
</div><p>Th' sett'ns applied t' th' above image would be</p>
|
||
|
||
|
||
<div class="tab-panel" data-tab-group="ca22e155c17e6258c382d1dad2511393">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="result"
|
||
class="tab-nav-button tab-panel-style cstyle initial active"
|
||
onclick="switchTab('ca22e155c17e6258c382d1dad2511393','result')"
|
||
>
|
||
<span class="tab-nav-text">Result</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="result"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">bg-white</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div></div>
|
||
</div>
|
||
</div>
|
||
</div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
|
||
|
||
|
||
<div class="tab-panel" data-tab-group="c38f22e5646ba25865a3db2ce912c380">
|
||
<div class="tab-nav">
|
||
<div class="tab-nav-title">​</div>
|
||
<button
|
||
data-tab-item="html"
|
||
class="tab-nav-button tab-panel-style cstyle initial active"
|
||
onclick="switchTab('c38f22e5646ba25865a3db2ce912c380','html')"
|
||
>
|
||
<span class="tab-nav-text">HTML</span>
|
||
</button>
|
||
</div>
|
||
<div class="tab-content-container">
|
||
<div
|
||
data-tab-item="html"
|
||
class="tab-content tab-panel-style cstyle initial active">
|
||
<div class="tab-content-text">
|
||
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Minion"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-white border nolightbox noshadow"</span><span class="p">></span></span></span></code></pre></div></div>
|
||
</div>
|
||
</div>
|
||
</div><h2 id="extending">Extend'n</h2>
|
||
<p>As ye can see 'n th' above example, th' <code>bg-white</code> parameter be not initially supported 'n th' themes default sett'ns. Nevertheless ye be free t' define arbitrary parameter by just add'n them t' th' URL query parameter or set them 'n yer <code>config.toml</code> or planks frontmatter.</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>If no extended parameter like <code>bg-white</code> 'n th' example be set on th' URL, a <code>class="nobg-white"</code> 'n th' HTML will only be generated if a default value was set 'n th' <code>config.toml</code> or planks frontmatter.</p>
|
||
</div>
|
||
</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="wrap-code 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">"<i class='fab fa-fw fa-github'></i> GitHub repo"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"ds"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://github.com/McShelby/hugo-theme-relearn"</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">"<i class='fas fa-fw fa-camera'></i> Showcases"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"showcase/"</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">"<i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentation"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"hugodoc"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://gohugo.io/"</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">"<i class='fas fa-fw fa-bullhorn'></i> Credits"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"more/credits/"</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">"<i class='fas fa-fw fa-tags'></i> Tags"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"tags/"</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="wrap-code 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">"<Your value>"</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.<language-id></code>.</p>
|
||
<p>Example from th' current website:</p>
|
||
<div class="wrap-code 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">"Hugo Relearrrn Theme"</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">"English"</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">"<i class='fas fa-home'></i> Home"</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">"<i class='fab fa-fw fa-github'></i> GitHub repo"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"ds"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://github.com/McShelby/hugo-theme-relearn"</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">"<i class='fas fa-fw fa-camera'></i> Showcases"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">"showcase/"</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">"<i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentation"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"hugodoc"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://gohugo.io/"</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">"<i class='fas fa-fw fa-bullhorn'></i> Credits"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">"more/credits/"</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">"<i class='fas fa-fw fa-tags'></i> Tags"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">"tags/"</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">"Cap'n Hugo Relearrrn Theme"</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">"Arrr! Pirrrates"</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">"<i class='fas fa-home'></i> Arrr! Home"</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">"<i class='fab fa-fw fa-github'></i> GitHub repo"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"ds"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://github.com/McShelby/hugo-theme-relearn"</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">"<i class='fas fa-fw fa-camera'></i> Showcases"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">"showcase/"</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">"<i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentat'n"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"hugodoc"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"https://gohugo.io/"</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">"<i class='fas fa-fw fa-bullhorn'></i> Crrredits"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">"more/credits/"</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">"<i class='fas fa-fw fa-tags'></i> Arrr! Tags"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">"tags/"</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’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 a <a href="https://gohugo.io/content-management/page-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 frontmatter configurat'n t' th' file (see exampleSite’s <code>content/showcase/_index.en.md</code>). This causes its rrrambl'n t' <strong>not</strong> be ontained 'n th' sitemap.</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Showcase"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">_build</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">render</span> <span class="p">=</span> <span class="s2">"always"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">list</span> <span class="p">=</span> <span class="s2">"never"</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>
|
||
<li>
|
||
<p>Store th' plank file fer th' shortcut below a parent headless branch bundle an' add th' follow'n frontmatter t' he <strong>parent</strong> (see exampleSite’s <code>content/more/_index.en.md</code>).</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="c"># title = "More" ### ATTENTION: Don't give this plank a title as this will cause it t' be 'n th' breadcrumbs - a th'n ye most likely don't want</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">_build</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">render</span> <span class="p">=</span> <span class="s2">"never"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">list</span> <span class="p">=</span> <span class="s2">"never"</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><p>In this case, th' file itself can be a branch bundle, leaf bundle or simple plank (see exampleSite’s <code>content/more/credits.en.md</code>). This causes its rrrambl'n t' be contained 'n th' sitemap.</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Credits"</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' 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, Hungarian, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Swahili, 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="#R-image-c33e5499c655e443d481fb1a5d53960f" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
|
||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-c33e5499c655e443d481fb1a5d53960f"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" 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="wrap-code 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">"en"</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">"Hugo Relearrrn Theme"</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">"English"</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">"Cap'n Hugo Relearrrn Theme"</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">"Arrr! Pirrrates"</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’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’s rrrambl'n be written 'n one single language only, th' above configurat'n will already configure th' site’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’s search via th' <a href="https://lunrjs.com" target="_blank">Lunr</a> search library does not.
|
||
You’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>
|
||
<li>Swahili</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<h3 id="search-with-mixed-language-support">Search wit' mixed language support</h3>
|
||
<p>In case yer page’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="wrap-code 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">"en"</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/<idlanguage>.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="wrap-code 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=" taxonomy-tags term-list cstyle tags" title="Tag-a-taggs" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<ul>
|
||
<li><a class="term-link" href="../../pir/tags/tutorrrial/index.html">tutorrrial</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
<h1 id="taxonomy">Taxonomy</h1>
|
||
|
||
|
||
<p>Th' Relearrrn theme supports Hugo’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="wrap-code 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">"taxonomy"</span><span class="p">,</span> <span class="s2">"content"</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">"tutorial"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Taxonomy"</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="wrap-code 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">"<i class='fas fa-tags'></i> Tags"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"/tags"</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">"<i class='fas fa-layer-group'></i> Categories"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">"/categories"</span></span></span></code></pre></div><h2 id="customization">Customizat'n</h2>
|
||
<p>If ye define <a href="https://gohugo.io/content-management/taxonomies/#configure-taxonomies" target="_blank">custom taxonomies</a> an' want t' display a list o' them somewhere on yer plank (often 'n th' <code>layouts/partials/content-footer.html</code>) ye can call a partial that does th' job fer ye:</p>
|
||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{- partial "term-list.html" (dict
|
||
</span></span><span class="line"><span class="cl"> "page" .
|
||
</span></span><span class="line"><span class="cl"> "taxonomy" "categories"
|
||
</span></span><span class="line"><span class="cl"> "icon" "layer-group"
|
||
</span></span><span class="line"><span class="cl">) }}</span></span></code></pre></div><h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Default</th>
|
||
<th>Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>plank</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Mandatory reference t' th' plank.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>taxonomy</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Th' plural name o' th' taxonomy t' display as used 'n yer frontmatter.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>class</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>Additional CSS classes set on th' outermost generated HTML element.<br><br>If set t' <code>tags</code> ye will get th' visuals fer display'n th' <em>tags</em> taxonomy, otherwise it will be a simple list o' links as fer th' <em>categories</em> taxonomy.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>style</strong></td>
|
||
<td><code>primary</code></td>
|
||
<td>Th' style scheme used if <strong>class</strong> be <code>tags</code>.<br><br>- by severity: <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>color</strong></td>
|
||
<td>see notes</td>
|
||
<td>Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">CSS color value</a> t' be used if <strong>class</strong> be <code>tags</code>. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>ay'con</strong></td>
|
||
<td><em><empty></em></td>
|
||
<td>An optional <a href="../../shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' list.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
|
||
<footer class="footline">
|
||
<div class=" taxonomy-categories term-list cstyle " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||
<i class="fa-fw fas fa-layer-group"></i>
|
||
<ul>
|
||
<li><a class="term-link" href="../../pir/categories/content/index.html">content</a></li>
|
||
<li><a class="term-link" href="../../pir/categories/taxonomy/index.html">taxonomy</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<script src="../../js/clipboard.min.js?1699057440" defer></script>
|
||
<script src="../../js/perfect-scrollbar.min.js?1699057440" defer></script>
|
||
<script src="../../js/theme.js?1699057440" defer></script>
|
||
</body>
|
||
</html>
|