mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-28 03:03:18 +00:00
1951 lines
143 KiB
HTML
1951 lines
143 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pir">
|
||
<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.99.1" />
|
||
<meta name="generator" content="Relearn 3.4.1+tip">
|
||
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
||
<meta name="author" content="Sören Weber">
|
||
<title>Shorrrtcodes :: Cap'n Hugo Relearrrn Theme</title>
|
||
<link rel="canonical" type="text/html" href="/hugo-theme-relearn/pir/shortcodes/" title="Cap'n Hugo Relearrrn Theme" />
|
||
<link rel="alternate" type="application/rss+xml" href="/hugo-theme-relearn/pir/shortcodes/index.xml" title="Cap'n Hugo Relearrrn Theme" />
|
||
<link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1653309750" type="image/svg+xml">
|
||
<link href="/hugo-theme-relearn/css/nucleus.css?1653309750" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1653309750" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/featherlight.min.css?1653309750" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1653309750" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/auto-complete.css?1653309750" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/theme.css?1653309750" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/theme-relearn-light.css?1653309750" rel="stylesheet" id="variant-style">
|
||
<link href="/hugo-theme-relearn/css/variant.css?1653309750" rel="stylesheet">
|
||
<link href="/hugo-theme-relearn/css/print.css?1653309750" rel="stylesheet">
|
||
<script src="/hugo-theme-relearn/js/variant.js?1653309750"></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
|
||
var index_url="/hugo-theme-relearn/pir/index.json";
|
||
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!';
|
||
// some further base stuff
|
||
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
|
||
variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
|
||
</script>
|
||
<script src="/hugo-theme-relearn/js/jquery.min.js?1653309750"></script>
|
||
</head>
|
||
<body class="mobile-support print" data-url="/hugo-theme-relearn/pir/shortcodes/">
|
||
<div id="body" class="default-animation">
|
||
<div id="sidebar-overlay"></div>
|
||
<div id="toc-overlay"></div>
|
||
<nav id="topbar" class="highlightable">
|
||
<div>
|
||
<div class="navigation">
|
||
<a class="nav nav-next" href="/hugo-theme-relearn/pir/shortcodes/attachments/" title="Attachments"><i class="fas fa-chevron-right fa-fw"></i></a>
|
||
</div>
|
||
<div class="navigation">
|
||
<a class="nav nav-prev" href="/hugo-theme-relearn/pir/cont/tags/" title="Tags"><i class="fas fa-chevron-left fa-fw"></i></a>
|
||
</div>
|
||
<div id="top-print-link">
|
||
<a class="print-link" title='Prrrint whole chapterrr' href="/hugo-theme-relearn/pir/shortcodes/_print/">
|
||
<i class="fas fa-print fa-fw"></i>
|
||
</a>
|
||
</div>
|
||
<div id="top-github-link">
|
||
<a class="github-link" title='Edit' href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/_index.pir.md" target="blank">
|
||
<i class="fas fa-pen fa-fw"></i>
|
||
</a>
|
||
</div>
|
||
<div id="breadcrumbs">
|
||
<span id="sidebar-toggle-span">
|
||
<a href="#" id="sidebar-toggle" title='Menu'><i class="fas fa-bars fa-fw"></i></a>
|
||
</span>
|
||
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
|
||
<meta itemprop="itemListOrder" content="Descending" />
|
||
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="2" /><a itemprop="item" href="/hugo-theme-relearn/pir/"><span itemprop="name">Cap'n Hugo Relearrrn Theme</span></a> > </li>
|
||
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="1" /><a itemprop="item" href="/hugo-theme-relearn/pir/shortcodes/" aria-disabled="true"><span itemprop="name">Shorrrtcodes</span></a></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<main id="body-inner" class="highlightable chapter">
|
||
<div class="flex-block-wrapper">
|
||
<div id="head-tags">
|
||
</div>
|
||
|
||
<article class="chapter">
|
||
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="chapter-3">Chapter 3</h3>
|
||
<h1 id="shortcodes">Shorrrtcodes</h1>
|
||
<p>Cap'n Hugo uses Marrrkdown fer its simple rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well. Ye could use pure HTML t' expand possibilities.</p>
|
||
<p>But this happens t' be a bad idea. Everyone uses Marrrkdown because it’s pure an' simple t' read even non-rendered. Ye should avoid HTML t' keep it as simple as poss'ble.</p>
|
||
<p>T' avoid this limitat'ns, Cap'n Hugo created <a href="https://gohugo.io/extras/shortcodes/">shorrrtcodes</a>. A shorrrtcode be a simple snippet inside a plank.</p>
|
||
<p>Th' Relearrrn theme provides multiple shorrrtcodes on top o' exist'n ones.</p>
|
||
|
||
|
||
<div class="children children-h2 children-sort-">
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/attachments/" >Attachments</a></h2>
|
||
<p>Th' Attachments shorrrtcode displays a list o' files attached t' a plank</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/button/" >Button</a></h2>
|
||
<p>Nice buttons on yer plank</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/" >Children</a></h2>
|
||
<p>List th' child planks o' a plank</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/expand/" >Expand</a></h2>
|
||
<p>Displays an expandable/collaps'ble section o' text on yer plank</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/include/" >Include</a></h2>
|
||
<p>Displays rrrambl'n from other Marrrkdown files</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/mermaid/" >Merrrmaid</a></h2>
|
||
<p>Generat'n o' diagram an' flowchart from text 'n a similar manner as Marrrkdown</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/notice/" >Notice</a></h2>
|
||
<p>Disclaimers t' help ye structure yer plank</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/siteparam/" >Ship param</a></h2>
|
||
<p>Get value o' ship params variables 'n yer plank</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/swagger/" >Swagger</a></h2>
|
||
<p>Adds UI fer yer Swagger / OpenAPI Specificat'ns</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/tabs/" >Tabbed views</a></h2>
|
||
<p>Synchr'nize select'n o' rrrambl'n 'n different tabbed views</p>
|
||
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
|
||
<article>
|
||
|
||
<h1>Attachments</h1>
|
||
|
||
<div class="box attachments transparent">
|
||
<div class="box-label"><i class="fas fa-paperclip fa-fw"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.pir.files/NoTreasure.txt">NoTreasure.txt</a> (26 B)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Th' Attachments shorrrtcode displays a list o' files attached t' a plank.</p>
|
||
|
||
<div class="box attachments transparent">
|
||
<div class="box-label"><i class="fas fa-paperclip fa-fw"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2 id="usage">Usage</h2>
|
||
<p>Th' shortcurt lists files found 'n a <strong>specific folder</strong>.
|
||
Currently, it support two implementat'ns fer planks</p>
|
||
<ol>
|
||
<li>
|
||
<p>If yer plank be a Marrrkdown file, attachements must be placed 'n a <strong>folder</strong> named like yer plank an' end'n wit' <strong>.files</strong>.</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li>plank.files
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
<li>plank.md</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</blockquote>
|
||
</li>
|
||
<li>
|
||
<p>If yer plank be a <strong>folder</strong>, attachements must be placed 'n a nested <strong>‘files’</strong> folder.</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li>plank
|
||
<ul>
|
||
<li>index.md</li>
|
||
<li>files
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</blockquote>
|
||
</li>
|
||
</ol>
|
||
<p>Be aware that if ye use a multilingual website, ye will need t' have as many folders as languages.</p>
|
||
<p>That’s all!</p>
|
||
<h3 id="parameters">Parameters</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Parameter</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Descript'n</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left">title</td>
|
||
<td style="text-align:left">“Attachments”</td>
|
||
<td style="text-align:left">List’s title</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">ay'con</td>
|
||
<td style="text-align:left">“paperclip”</td>
|
||
<td style="text-align:left">Sets th' ay'con near th' title; if ye want no ay'con at all, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">sort</td>
|
||
<td style="text-align:left">“asc”</td>
|
||
<td style="text-align:left">Sort'n th' output 'n <code>asc</code>end'n or <code>desc</code>end'n order</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">style</td>
|
||
<td style="text-align:left">""</td>
|
||
<td style="text-align:left">Choose between <code>orange</code>, <code>grey</code>, <code>blue</code> an' <code>green</code> fer nice style</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">pattern</td>
|
||
<td style="text-align:left">“.*”</td>
|
||
<td style="text-align:left">A regular expressions, used t' filter th' attachments by file name. <br/><br/>Th' <strong>pattern</strong> parameter value must be <a href="https://en.wikipedia.org/wiki/Regular_expression">regular expressions</a>.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>For example:</p>
|
||
<ul>
|
||
<li>T' match a file suffix o' ‘jpg’, use *<em>.<em>jpg</em></em> (not *.jpg).</li>
|
||
<li>T' match file names end'n 'n ‘jpg’ or ‘png’, use <strong>.*(jpg|png)</strong></li>
|
||
</ul>
|
||
<h3 id="examples">Examples</h3>
|
||
<h4 id="list-of-attachments-ending-in-pdf-or-mp4">List o' attachments end'n 'n pdf or mp4</h4>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span><span class="nx">attachments</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Related files"</span> <span class="nx">pattern</span><span class="p">=</span><span class="s">".*(pdf|mp4)"</span><span class="o">/%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>renders as</p>
|
||
|
||
<div class="box attachments transparent">
|
||
<div class="box-label"><i class="fas fa-paperclip fa-fw"></i> Related files</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h4 id="colored-styled-box">Colored styled box</h4>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span><span class="nx">attachments</span> <span class="nx">style</span><span class="p">=</span><span class="s">"orange"</span> <span class="o">/%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>renders as</p>
|
||
|
||
<div class="box attachments orange">
|
||
<div class="box-label"><i class="fas fa-paperclip fa-fw"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span><span class="nx">attachments</span> <span class="nx">style</span><span class="p">=</span><span class="s">"grey"</span> <span class="o">/%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>renders as</p>
|
||
|
||
<div class="box attachments grey">
|
||
<div class="box-label"><i class="fas fa-paperclip fa-fw"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span><span class="nx">attachments</span> <span class="nx">style</span><span class="p">=</span><span class="s">"blue"</span> <span class="o">/%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>renders as</p>
|
||
|
||
<div class="box attachments blue">
|
||
<div class="box-label"><i class="fas fa-paperclip fa-fw"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span><span class="nx">attachments</span> <span class="nx">style</span><span class="p">=</span><span class="s">"green"</span> <span class="o">/%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>renders as</p>
|
||
|
||
<div class="box attachments green">
|
||
<div class="box-label"><i class="fas fa-paperclip fa-fw"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="/hugo-theme-relearn/shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Button</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>A button be a just a click'ble button wit' optional ay'con.</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fas fa-download"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span> <span class="nx">wit'</span> <span class="nx">ay'con</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"fas fa-download"</span> <span class="nx">ay'con</span><span class="o">-</span><span class="nx">posit'n</span><span class="p">=</span><span class="s">"right"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span> <span class="nx">wit'</span> <span class="nx">ay'con</span> <span class="nx">right</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>
|
||
<a href="https://gohugo.io/" target="_blank" class="btn btn-default">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
|
||
|
||
<a href="https://gohugo.io/" target="_blank" class="btn btn-default">
|
||
<i class="fas fa-download"></i>
|
||
Get Cap'n Hugo wit' ay'con
|
||
</a>
|
||
|
||
|
||
<a href="https://gohugo.io/" target="_blank" class="btn btn-default">
|
||
Get Cap'n Hugo wit' ay'con right
|
||
<i class="fas fa-download"></i>
|
||
</a>
|
||
</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Children</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Use th' children shorrrtcode t' list th' child planks o' a plank an' th' further descendants (children’s children). By default, th' shorrrtcode displays links t' th' child planks.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Parameter</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Descript'n</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left">plank</td>
|
||
<td style="text-align:left"><em>current</em></td>
|
||
<td style="text-align:left">Specify th' plank name (section name) t' display children fer</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">containerstyle</td>
|
||
<td style="text-align:left">“ul”</td>
|
||
<td style="text-align:left">Choose th' style used t' group all children. It could be any HTML tag name</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">style</td>
|
||
<td style="text-align:left">“li”</td>
|
||
<td style="text-align:left">Choose th' style used t' display each descendant. It could be any HTML tag name</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">showhidden</td>
|
||
<td style="text-align:left">“false”</td>
|
||
<td style="text-align:left">When true, child planks hidden from th' menu will be displayed</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">descript'n</td>
|
||
<td style="text-align:left">“false”</td>
|
||
<td style="text-align:left">Allows ye t' include a short text under each plank 'n th' list. When no descript'n exists fer th' plank, children shorrrtcode takes th' first 70 words o' yer rrrambl'n. <a href="https://gohugo.io/content/summaries/">Read more info about summaries on gohugo.io</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">depth</td>
|
||
<td style="text-align:left">1</td>
|
||
<td style="text-align:left">Enter a number t' specify th' depth o' descendants t' display. For example, if th' value be 2, th' shorrrtcode will display 2 levels o' child planks. <strong>Tips:</strong> set 999 t' get all descendants</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">sort</td>
|
||
<td style="text-align:left"><a href="/hugo-theme-relearn/pir/basics/configuration/#global-site-parameters">ordersectionsby</a></td>
|
||
<td style="text-align:left">Sort children by <strong>weight</strong>, t' sort on menu order - <strong>title</strong>, t' sort alphabetically on menu label. If not set it be sorted by th' <code>ordersectionsby</code> sett'n o' th' ship an' th' planks frontmatter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="demo">Demo</h2>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/test/" >plank X</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/" >plank 1</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/" >plank 2</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/" >plank 3</a></li>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">descript'n</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/test/" >plank X</a></li>
|
||
<p>This be a plain plank test, an' th' beginn'n o' a YAML multiline descript'n...
|
||
</p>
|
||
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/" >plank 1</a></li>
|
||
<p>This be a demo child plank</p>
|
||
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/" >plank 2</a></li>
|
||
<p>This be a demo child plank wit' no descript'n.
|
||
So its rrrambl'n be used as descript'n.</p>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/" >plank 3</a></li>
|
||
<p>This be a demo child plank</p>
|
||
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">depth</span><span class="p">=</span><span class="s">"999"</span> <span class="nx">showhidden</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/test/" >plank X</a></li><ul></ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/" >plank 1</a></li><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/" >plank 1-1</a></li><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/" >plank 1-1-1 (hidden)</a></li><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/" >plank 1-1-1-1</a></li><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/" >plank 1-1-1-1-1 (hidden)</a></li><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/" >plank 1-1-1-1-1-1</a></li><ul></ul></ul></ul></ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/" >plank 1-1-2</a></li><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/" >plank 1-1-2-1</a></li><ul></ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/" >plank 1-1-2-2</a></li><ul></ul></ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/" >plank 1-1-3</a></li><ul></ul></ul></ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/" >plank 2</a></li><ul></ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/" >plank 3</a></li><ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/" >plank 3-1</a></li><ul></ul></ul>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-4/" >plank 4 (hidden)</a></li><ul></ul>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">"div"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"h2"</span> <span class="nx">depth</span><span class="p">=</span><span class="s">"3"</span> <span class="nx">descript'n</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
|
||
<div class="children children-h2 children-sort-">
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/test/" >plank X</a></h2>
|
||
<p>This be a plain plank test, an' th' beginn'n o' a YAML multiline descript'n...
|
||
</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/" >plank 1</a></h2>
|
||
<p>This be a demo child plank</p>
|
||
|
||
|
||
<h3><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/" >plank 1-1</a></h3>
|
||
<p>This be a demo child plank</p>
|
||
|
||
|
||
<h4><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/" >plank 1-1-2</a></h4>
|
||
<p>This be a demo child plank</p>
|
||
|
||
|
||
<h4><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/" >plank 1-1-3</a></h4>
|
||
<p>This be a demo child plank</p>
|
||
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/" >plank 2</a></h2>
|
||
<p>This be a demo child plank wit' no descript'n.
|
||
So its rrrambl'n be used as descript'n.</p>
|
||
|
||
<h2><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/" >plank 3</a></h2>
|
||
<p>This be a demo child plank</p>
|
||
|
||
|
||
<h3><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/" >plank 3-1</a></h3>
|
||
<p>This be a plain plank test nested 'n a parent</p>
|
||
|
||
</div>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">"div"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"div"</span> <span class="nx">depth</span><span class="p">=</span><span class="s">"999"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
|
||
<div class="children children-div children-sort-">
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/test/" >plank X</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/" >plank 1</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/" >plank 1-1</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/" >plank 1-1-2</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/" >plank 1-1-2-1</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/" >plank 1-1-2-2</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/" >plank 1-1-3</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/" >plank 2</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/" >plank 3</a></div>
|
||
<div><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/" >plank 3-1</a></div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
|
||
<article>
|
||
|
||
<h1>Plank X</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 1</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a demo child plank.</p>
|
||
<h2 id="subpages-of-this-page">Subpages o' this plank</h2>
|
||
|
||
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/" >plank 1-1</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 1-1</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a demo child plank wit' a hidden child. Ye can still access th' hidden child <a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/">directly</a> or via th' search.</p>
|
||
<h2 id="subpages-of-this-page">Subpages o' this plank</h2>
|
||
|
||
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/" >plank 1-1-1 (hidden)</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/" >plank 1-1-2</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/" >plank 1-1-3</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 1-1-2</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
<h2 id="subpages-of-this-page">Subpages o' this plank</h2>
|
||
|
||
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/" >plank 1-1-2-1</a></li>
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/" >plank 1-1-2-2</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 1-1-2-1</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 1-1-2-2</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 1-1-3</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
</section>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 2</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a demo child plank wit' no descript'n.</p>
|
||
<p>So its rrrambl'n be used as descript'n.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 3</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a demo child plank.</p>
|
||
<h2 id="subpages-of-this-page">Subpages o' this plank</h2>
|
||
|
||
|
||
<ul class="children children-li children-sort-">
|
||
<li><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/" >plank 3-1</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
<section>
|
||
|
||
<article>
|
||
|
||
<h1>Plank 3-1</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
</section>
|
||
|
||
<article>
|
||
|
||
<h1>Expand</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Th' Expand shorrrtcode displays an expandable/collaps'ble section o' text on yer plank.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="p">[</span> <span class="p"><</span><span class="kt">str'n</span><span class="p">></span> <span class="p">[</span> <span class="s">"true"</span> <span class="p">|</span> <span class="s">"false"</span> <span class="p">]</span> <span class="p">]</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Yes</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>Th' first optional parameter defines th' text that appears next t' th' expand/collapse ay'con. Th' default text be <code>"Expand me..."</code>.</p>
|
||
<p>Th' second optional parameter controls if th' block be initially shown as expanded (<code>"true"</code>) or collapsed (<code>"false"</code>). Th' default ist <code>"false"</code>.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
I'll tell ye a secret...
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<p>…maybe th' next time you’ll open this expander!</p>
|
||
|
||
</div>
|
||
</div>
|
||
<h3 id="all-defaults">All defaults</h3>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Expand me...
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<p>Yes, ye did it!</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="initially-expanded">Initially expanded</h3>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Expand me...
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<p>No need t' press ye!</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="s">"Expand me..."</span> <span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="arbitrary-text">Arbitrary text</h3>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show me endless possibilities
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<p>Some expand'ble text.</p>
|
||
<p>Ye can add:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <strong><em>bold emphasized</em></strong> text</li>
|
||
<li><a href="https://example.com">links</a></li>
|
||
<li>other shorrrtcodes besides <code>expand</code></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code
|
||
</span></span></code></pre></div><blockquote>
|
||
<p>th' possiblities be endless</p>
|
||
</blockquote>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="s">"Show me endless possibilities"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Some</span> <span class="nx">expand'ble</span> <span class="nx">text</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span><span class="p">:</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">besides</span> <span class="s">`expand`</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">th'</span> <span class="nx">possiblities</span> <span class="nx">be</span> <span class="nx">endless</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Include</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Th' include shorrrtcode includes other files from yer project inside o' th' current file. This can even contain Marrrkdown an' will be taken into account when generat'n th' t'ble o' contents.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">include</span> <span class="p"><</span><span class="kt">str'n</span><span class="p">></span> <span class="p">[</span> <span class="s">"true"</span> <span class="p">|</span> <span class="s">"false"</span> <span class="p">]</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>Th' first required parameter be th' path t' th' file t' be included.</p>
|
||
<p>If th' file’s rrrambl'n will be displayed as HTML, th' second optional parameter controls if th' first head'n o' th' included file should be displayed (<code>"true"</code>)- which be th' default - or be hidden.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="arbitray-content">Arbitray rrrambl'n</h3>
|
||
<p>Ye can add:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <strong><em>bold emphasized</em></strong> text</li>
|
||
<li><a href="https://example.com">links</a></li>
|
||
<li>other shorrrtcodes besides <code>include</code></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code
|
||
</span></span></code></pre></div><blockquote>
|
||
<p>th' possiblities be endless</p>
|
||
</blockquote>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">include</span> <span class="s">"shortcodes/INCLUDE_ME.md"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Merrrmaid</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p><a href="https://mermaidjs.github.io/">Merrrmaid</a> be a library help'n ye t' generate diagram an' flowcharts from text, 'n a similar manner as Marrrkdown.</p>
|
||
|
||
<div class="box notices note">
|
||
<div class="box-label"><i class="fas fa-exclamation-circle fa-fw"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>This only works 'n modern browsers.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label"><i class="fas fa-exclamation-triangle fa-fw"></i> Arrr</div>
|
||
<div class="box-content">
|
||
<p>Due t' limitat'ns wit' <a href="https://github.com/mermaid-js/mermaid/issues/1846">Merrrmaid</a>, it be currently not poss'ble t' use Merrrmaid code fences 'n an initially collapsed <code>expand</code> shorrrtcode. This be a know issue an' <a href="https://github.com/McShelby/hugo-theme-relearn/issues/187">can’t be fixed by this theme</a>.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>Just insert yer Merrrmaid code 'n th' <code>mermaid</code> shorrrtcode like this:</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">[</span> <span class="nx">align</span><span class="p">=(</span><span class="s">"left"</span><span class="p">|</span><span class="s">"right"</span><span class="p">|</span><span class="s">"center"</span><span class="p">|</span><span class="s">"justify"</span><span class="p">)</span> <span class="p">]</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">classDiagram</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Person</span> <span class="o">*--</span> <span class="nx">Dog</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div><p>Ye can set an optional <code>align</code> attribute which defaults t' <code>"center"</code>.</p>
|
||
<p>If ye don’t need alignment ye can use th' alternative rules us'n code fences if ye have turned off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n (see below):</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">```mermaid
|
||
</span></span><span class="line"><span class="cl">classDiagram
|
||
</span></span><span class="line"><span class="cl"> Person *-- Dog
|
||
</span></span><span class="line"><span class="cl">```
|
||
</span></span></code></pre></div><p>Th' generated graphs can be be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="flowchart">Flowchart</h3>
|
||
|
||
<div class="mermaid" align="left">
|
||
%%{init:{"theme":"forest"}}%%
|
||
graph LR;
|
||
A[Hard edge] -->|Link text| B(Round edge)
|
||
B --> C{<strong>Decision</strong>}
|
||
C -->|One| D[Result one]
|
||
C -->|Two| E[Result two]
|
||
</div>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="nx">align</span><span class="p">=</span><span class="s">"left"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">%%</span><span class="p">{</span><span class="nx">init</span><span class="p">:{</span><span class="s">"theme"</span><span class="p">:</span><span class="s">"forest"</span><span class="p">}}</span><span class="o">%%</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">graph</span> <span class="nx">LR</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">A</span><span class="p">[</span><span class="nx">Hard</span> <span class="nx">edge</span><span class="p">]</span> <span class="o">--</span><span class="p">>|</span><span class="nx">Link</span> <span class="nx">text</span><span class="p">|</span> <span class="nf">B</span><span class="p">(</span><span class="nx">Round</span> <span class="nx">edge</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">B</span> <span class="o">--</span><span class="p">></span> <span class="nx">C</span><span class="p">{<</span><span class="nx">strong</span><span class="p">></span><span class="nx">Decision</span><span class="p"><</span><span class="o">/</span><span class="nx">strong</span><span class="p">>}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">C</span> <span class="o">--</span><span class="p">>|</span><span class="nx">One</span><span class="p">|</span> <span class="nx">D</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">one</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">C</span> <span class="o">--</span><span class="p">>|</span><span class="nx">Two</span><span class="p">|</span> <span class="nx">E</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">two</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="sequence">Sequence</h3>
|
||
|
||
<div class="mermaid" align="center">
|
||
sequenceDiagram
|
||
participant Alice
|
||
participant Bob
|
||
Alice->>John: Hello John, how be ye?
|
||
loop Healthcheck
|
||
John->John: Fight against hypochondria
|
||
end
|
||
Note right of John: Rational thoughts <br/>prevail...
|
||
John-->Alice: Great!
|
||
John->Bob: How about ye?
|
||
Bob-->John: Jolly bloody!
|
||
</div>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">sequenceDiagram</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">participant</span> <span class="nx">Alice</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">participant</span> <span class="nx">Bob</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Alice</span><span class="o">->></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Hello</span> <span class="nx">John</span><span class="p">,</span> <span class="nx">how</span> <span class="nx">be</span> <span class="nx">ye</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">loop</span> <span class="nx">Healthcheck</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">-</span><span class="p">></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Fight</span> <span class="nx">against</span> <span class="nx">hypochondria</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">end</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Avast</span> <span class="nx">right</span> <span class="nx">o'</span> <span class="nx">John</span><span class="p">:</span> <span class="nx">Rational</span> <span class="nx">thoughts</span> <span class="p"><</span><span class="nx">br</span><span class="o">/</span><span class="p">></span><span class="nx">prevail</span><span class="o">...</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">--</span><span class="p">></span><span class="nx">Alice</span><span class="p">:</span> <span class="nx">Great</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">-</span><span class="p">></span><span class="nx">Bob</span><span class="p">:</span> <span class="nx">How</span> <span class="nx">about</span> <span class="nx">ye</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Bob</span><span class="o">--</span><span class="p">></span><span class="nx">John</span><span class="p">:</span> <span class="nx">Jolly</span> <span class="nx">bloody</span><span class="p">!</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="gantt">GANTT</h3>
|
||
|
||
<div class="mermaid" align="center">
|
||
gantt
|
||
dateFormat YYYY-MM-DD
|
||
title Add'n GANTT diagram functionality t' Merrrmaid
|
||
section A section
|
||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||
Active task :active, des2, 2014-01-09, 3d
|
||
Future task : des3, aft des2, 5d
|
||
Future task2 : des4, aft des3, 5d
|
||
section Critical tasks
|
||
Completed task 'n th' critical line :crit, done, 2014-01-06,24h
|
||
Implement parser an' jison :crit, done, aft des1, 2d
|
||
Create tests fer parser :crit, active, 3d
|
||
Future task 'n critical line :crit, 5d
|
||
Create tests fer renderer :2d
|
||
Add t' Merrrmaid :1d
|
||
</div>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">gantt</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">dateFormat</span> <span class="nx">YYYY</span><span class="o">-</span><span class="nx">MM</span><span class="o">-</span><span class="nx">DD</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">Add'n</span> <span class="nx">GANTT</span> <span class="nx">diagram</span> <span class="nx">functionality</span> <span class="nx">t'</span> <span class="nx">Merrrmaid</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">A</span> <span class="nx">section</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Completed</span> <span class="nx">task</span> <span class="p">:</span><span class="nx">done</span><span class="p">,</span> <span class="nx">des1</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mo">06</span><span class="p">,</span><span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mi">08</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Active</span> <span class="nx">task</span> <span class="p">:</span><span class="nx">active</span><span class="p">,</span> <span class="nx">des2</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mi">09</span><span class="p">,</span> <span class="mi">3</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task</span> <span class="p">:</span> <span class="nx">des3</span><span class="p">,</span> <span class="nx">aft</span> <span class="nx">des2</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task2</span> <span class="p">:</span> <span class="nx">des4</span><span class="p">,</span> <span class="nx">aft</span> <span class="nx">des3</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Critical</span> <span class="nx">tasks</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Completed</span> <span class="nx">task</span> <span class="nx">'n</span> <span class="nx">th'</span> <span class="nx">critical</span> <span class="nx">line</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="mi">2014</span><span class="o">-</span><span class="mo">01</span><span class="o">-</span><span class="mo">06</span><span class="p">,</span><span class="mi">24</span><span class="nx">h</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Implement</span> <span class="nx">parser</span> <span class="nx">an'</span> <span class="nx">jison</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="nx">aft</span> <span class="nx">des1</span><span class="p">,</span> <span class="mi">2</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Create</span> <span class="nx">tests</span> <span class="k">fer</span> <span class="nx">parser</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="nx">active</span><span class="p">,</span> <span class="mi">3</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Future</span> <span class="nx">task</span> <span class="nx">'n</span> <span class="nx">critical</span> <span class="nx">line</span> <span class="p">:</span><span class="nx">crit</span><span class="p">,</span> <span class="mi">5</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Create</span> <span class="nx">tests</span> <span class="k">fer</span> <span class="nx">renderer</span> <span class="p">:</span><span class="mi">2</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Add</span> <span class="nx">t'</span> <span class="nx">Merrrmaid</span> <span class="p">:</span><span class="mi">1</span><span class="nx">d</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="class">Class</h3>
|
||
|
||
<div class="mermaid" align="center">
|
||
classDiagram
|
||
Class01 <|-- AveryLongClass : Cool
|
||
Class03 *-- Class04
|
||
Class05 o-- Class06
|
||
Class07 .. Class08
|
||
Class09 --> C2 : Whar' am i?
|
||
Class09 --* C3
|
||
Class09 --|> Class07
|
||
Class07 : equals()
|
||
Class07 : Object[] elementData
|
||
Class01 : size()
|
||
Class01 : int chimp
|
||
Class01 : int gorilla
|
||
Class08 <--> C2: Cool label
|
||
</div>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">classDiagram</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class01</span> <span class="p"><|</span><span class="o">--</span> <span class="nx">AveryLongClass</span> <span class="p">:</span> <span class="nx">Cool</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class03</span> <span class="o">*--</span> <span class="nx">Class04</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class05</span> <span class="nx">o</span><span class="o">--</span> <span class="nx">Class06</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class07</span> <span class="p">..</span> <span class="nx">Class08</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class09</span> <span class="o">--</span><span class="p">></span> <span class="nx">C2</span> <span class="p">:</span> <span class="nx">Whar'</span> <span class="nx">am</span> <span class="nx">i</span><span class="err">?</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class09</span> <span class="o">--*</span> <span class="nx">C3</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class09</span> <span class="o">--</span><span class="p">|></span> <span class="nx">Class07</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class07</span> <span class="p">:</span> <span class="nf">equals</span><span class="p">()</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class07</span> <span class="p">:</span> <span class="nx">Object</span><span class="p">[]</span> <span class="nx">elementData</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class01</span> <span class="p">:</span> <span class="nf">size</span><span class="p">()</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class01</span> <span class="p">:</span> <span class="kt">int</span> <span class="nx">chimp</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class01</span> <span class="p">:</span> <span class="kt">int</span> <span class="nx">gorilla</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Class08</span> <span class="o"><--</span><span class="p">></span> <span class="nx">C2</span><span class="p">:</span> <span class="nx">Cool</span> <span class="nx">label</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="state">State</h3>
|
||
<div class="mermaid" align="center">stateDiagram-v2
|
||
open: Open Door
|
||
closed: Closed Door
|
||
locked: Locked Door
|
||
open --> closed: Close
|
||
closed --> locked: Lock
|
||
locked --> closed: Unlock
|
||
closed --> open: Open</div>
|
||
|
||
<div class="expand expand-expanded">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="s">```mermaid
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">stateDiagram-v2
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> open: Open Door
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> closed: Closed Door
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> locked: Locked Door
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> open --> closed: Close
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> closed --> locked: Lock
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> locked --> closed: Unlock
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> closed --> open: Open
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h2 id="configuration">Configurat'n</h2>
|
||
<p>Merrrmaid be configured wit' default sett'ns. Ye can cust'mize Mermaid’s default sett'ns fer all o' yer files thru a JSON object 'n yer <code>config.toml</code>, override these sett'ns per plank thru yer planks frontmatter or override these sett'n per diagramm thru <a href="https://mermaid-js.github.io/mermaid/#/directives?id=directives">diagram directives</a>.</p>
|
||
<p>Th' JSON object o' yer <code>config.toml</code> / frontmatter be forwarded into Mermaid’s <code>mermaid.initialize()</code> funct'n.</p>
|
||
<p>See <a href="http://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults">Merrrmaid documentat'n</a> fer all allowed sett'ns.</p>
|
||
<p>Th' <code>theme</code> sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n <code>config.toml</code>, frontmatter or diagram directives.</p>
|
||
|
||
<div class="box notices note">
|
||
<div class="box-label"><i class="fas fa-exclamation-circle fa-fw"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>If ye want t' use mermaid codefences, ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<h3 id="example">Example</h3>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s2">"{ \"theme\": \"dark\" }"</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">highlight</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># if set t' `guessSyntax = true`, there will be no unstyled code even if no language</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT mermaid code fences will not work anymore! So this be a mandatory</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># sett'n fer yer ship</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span></code></pre></div><p>or planks frontmatter</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">mermaidInitialize</span> <span class="p">=</span> <span class="s2">"{ \"theme\": \"dark\" }"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
|
||
</span></span></code></pre></div>
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Notice</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Th' notice shorrrtcode shows four types o' disclaimers t' help ye structure yer plank.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nf">notice</span> <span class="p">(</span> <span class="nx">note</span> <span class="p">|</span> <span class="nx">info</span> <span class="p">|</span> <span class="nx">tip</span> <span class="p">|</span> <span class="nx">warning</span> <span class="p">)</span> <span class="p">[</span> <span class="p"><</span><span class="kt">str'n</span><span class="p">></span> <span class="p">[</span> <span class="p"><</span><span class="kt">str'n</span><span class="p">></span> <span class="p">]</span> <span class="p">]</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Some</span> <span class="nx">marrrkup</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>Th' first parameter be required an' indicates th' type o' notice.</p>
|
||
<p>Th' second parameter be optional. If provided, it will be used as th' title o' th' notice. If not provided, then th' type o' notice will be used as th' title. For example, th' title o' a warning notice will be “Warning”.</p>
|
||
<p>Th' third parameter be optional. If provided, it will set th' ay'con o' near th' title. For th' standard types o' notices, this be automatically determined but can be overridden wit' this parameter. If ye want no ay'con at all, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces).</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="note">Avast</h3>
|
||
|
||
<div class="box notices note">
|
||
<div class="box-label"><i class="fas fa-exclamation-circle fa-fw"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>A <strong>notice</strong> disclaimer</p>
|
||
<p>Ye can add:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <em><strong>bold emphasized</strong></em> text</li>
|
||
<li><a href="https://example.com">links</a></li>
|
||
<li>other shorrrtcodes besides <code>notice</code></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code
|
||
</span></span></code></pre></div><blockquote>
|
||
<p>th' possiblities be endless</p>
|
||
</blockquote>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">note</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">notice</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span><span class="p">:</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">***</span><span class="nx">bold</span> <span class="nx">emphasized</span><span class="o">***</span> <span class="nx">text</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">besides</span> <span class="s">`notice`</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">th'</span> <span class="nx">possiblities</span> <span class="nx">be</span> <span class="nx">endless</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="info">Ahoi</h3>
|
||
|
||
<div class="box notices info">
|
||
<div class="box-label"><i class="fas fa-info-circle fa-fw"></i> Ahoi</div>
|
||
<div class="box-content">
|
||
<p>An <strong>informat'n</strong> disclaimer</p>
|
||
<p>Ye can add:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <em><strong>bold emphasized</strong></em> text</li>
|
||
<li><a href="https://example.com">links</a></li>
|
||
<li>other shorrrtcodes besides <code>notice</code></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code
|
||
</span></span></code></pre></div><blockquote>
|
||
<p>th' possiblities be endless</p>
|
||
</blockquote>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">info</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">An</span> <span class="o">**</span><span class="nx">informat'n</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span><span class="p">:</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">***</span><span class="nx">bold</span> <span class="nx">emphasized</span><span class="o">***</span> <span class="nx">text</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">besides</span> <span class="s">`notice`</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">th'</span> <span class="nx">possiblities</span> <span class="nx">be</span> <span class="nx">endless</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="tip">Smarrrt Arrrse</h3>
|
||
|
||
<div class="box notices tip">
|
||
<div class="box-label"><i class="fas fa-lightbulb fa-fw"></i> Smarrrt Arrrse</div>
|
||
<div class="box-content">
|
||
<p>A <strong>tip</strong> disclaimer</p>
|
||
<p>Ye can add:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <em><strong>bold emphasized</strong></em> text</li>
|
||
<li><a href="https://example.com">links</a></li>
|
||
<li>other shorrrtcodes besides <code>notice</code></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code
|
||
</span></span></code></pre></div><blockquote>
|
||
<p>th' possiblities be endless</p>
|
||
</blockquote>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">tip</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">tip</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span><span class="p">:</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">***</span><span class="nx">bold</span> <span class="nx">emphasized</span><span class="o">***</span> <span class="nx">text</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">besides</span> <span class="s">`notice`</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">th'</span> <span class="nx">possiblities</span> <span class="nx">be</span> <span class="nx">endless</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="warning">Arrr</h3>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label"><i class="fas fa-exclamation-triangle fa-fw"></i> Arrr</div>
|
||
<div class="box-content">
|
||
<p>A <strong>warning</strong> disclaimer</p>
|
||
<p>Ye can add:</p>
|
||
<ul>
|
||
<li>multiple paragraphs</li>
|
||
<li>bullet point lists</li>
|
||
<li><em>emphasized</em>, <strong>bold</strong> an' even <em><strong>bold emphasized</strong></em> text</li>
|
||
<li><a href="https://example.com">links</a></li>
|
||
<li>other shorrrtcodes besides <code>notice</code></li>
|
||
<li>etc.</li>
|
||
</ul>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code
|
||
</span></span></code></pre></div><blockquote>
|
||
<p>th' possiblities be endless</p>
|
||
</blockquote>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">warning</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">warning</span><span class="o">**</span> <span class="nx">disclaimer</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span><span class="p">:</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">***</span><span class="nx">bold</span> <span class="nx">emphasized</span><span class="o">***</span> <span class="nx">text</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">besides</span> <span class="s">`notice`</span>
|
||
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">></span> <span class="nx">th'</span> <span class="nx">possiblities</span> <span class="nx">be</span> <span class="nx">endless</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
<h3 id="notice-with-default-color-custom-title-and-icon">Notice wit' default color, custom title an' ay'con</h3>
|
||
<p>Ye can cust'mize th' title o' th' notice by pass'n it as a second parameter.</p>
|
||
|
||
<div class="box notices default">
|
||
<div class="box-label"><i class="fas fa-skull-crossbones fa-fw"></i> Pay Attent'n t' this Avast!</div>
|
||
<div class="box-content">
|
||
<p>Th' title be now th' parameter that was provided.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expand">
|
||
<a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
|
||
<i class="fas fa-chevron-down"></i>
|
||
<i class="fas fa-chevron-right"></i>
|
||
Show marrrkup
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="k">default</span> <span class="s">"Pay Attent'n t' this Avast!"</span> <span class="s">"skull-crossbones"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">Th'</span> <span class="nx">title</span> <span class="nx">be</span> <span class="nx">now</span> <span class="nx">th'</span> <span class="nx">parameter</span> <span class="nx">that</span> <span class="nx">was</span> <span class="nx">provided</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Ship param</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Th' <code>siteparam</code> shorrrtcode be used t' help ye print values o' ship params.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">siteparam</span> <span class="p"><</span><span class="kt">str'n</span><span class="p">></span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>Th' first required parameter be th' name o' th' ship param t' be displayed.</p>
|
||
<h2 id="examples">Examples</h2>
|
||
<p>For instance, 'n this current ship, th' <code>editURL</code> vari'ble be used 'n <code>config.toml</code></p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">editURL</span> <span class="p">=</span> <span class="s2">"https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/"</span>
|
||
</span></span></code></pre></div><p>Use th' <code>siteparam</code> shorrrtcode t' display its value.</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="s">`editURL`</span> <span class="nx">Value</span> <span class="p">:</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">siteparam</span> <span class="s">"editURL"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><p>be displayed as</p>
|
||
<p><code>editURL</code> Value : <a href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/">https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/</a></p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Swaggerrr</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>This shorrrtcode uses th' <a href="https://mrin9.github.io/RapiDoc">RapiDoc</a> library t' display yer OpenAPI Specificat'ns.</p>
|
||
|
||
<div class="box notices note">
|
||
<div class="box-label"><i class="fas fa-exclamation-circle fa-fw"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>This only works 'n modern browsers.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<h2 id="configuration">Configurat'n</h2>
|
||
<p>Swagger be configured wit' default sett'ns. Ye can cust'mize Swagger’s default sett'ns fer all o' yer files thru a JSON object 'n yer <code>config.toml</code> or override these sett'ns per plank thru yer planks frontmatter.</p>
|
||
<p>Th' JSON object o' yer <code>config.toml</code> / frontmatter be forwarded into Swagger’s initializat'n. At th' moment, only th' <code>theme</code> sett'n be supported.</p>
|
||
<p>Th' <code>theme</code> sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n <code>config.toml</code> or frontmatter.</p>
|
||
<h3 id="example">Example</h3>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">swaggerInitialize</span> <span class="p">=</span> <span class="s2">"{ \"theme\": \"dark\" }"</span>
|
||
</span></span></code></pre></div><h2 id="usage">Usage</h2>
|
||
<p>Just insert give th' URL t' yer OpenAPI Specificat'n like this:</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">swagger</span> <span class="nx">src</span><span class="p">=</span><span class="s">"https://petstore3.swagger.io/api/v3/openapi.json"</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div><p>If yer plank be a leaf or branch bundle, ye can also use relative URLs:</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">swagger</span> <span class="nx">src</span><span class="p">=</span><span class="s">"petstore.json"</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div><p>Th' <code>src</code> parameter be mandatory an' can be either an absolute or a relative URL.</p>
|
||
<h2 id="example-1">Example</h2>
|
||
|
||
<rapi-doc
|
||
allow-spec-file-download="true"
|
||
default-schema-tab="example"
|
||
font-size="largest"
|
||
layout="column"
|
||
load-fonts="false"
|
||
render-style="view"
|
||
schema-description-expanded="true"
|
||
schema-style="table"
|
||
show-header="false"
|
||
spec-url="/hugo-theme-relearn/pir/shortcodes/swagger/petstore.json"
|
||
sort-tags="true"
|
||
></rapi-doc>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article>
|
||
|
||
<h1>Tabbed views</h1>
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label">Arrr! ☠ Pirrrates ☠</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Choose which rrrambl'n t' see across th' plank. Very handy fer provid'n code
|
||
snippets fer multiple languages or provid'n configurat'n 'n different formats.</p>
|
||
<h2 id="code-example">Code example</h2>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"python"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```python
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">print("Hello World!")
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"R"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```R
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">> print("Hello World!")
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"Bash"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```Bash
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">echo "Hello World!"
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div><p>Renders as:</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="python"
|
||
data-tab-group="default"
|
||
class="tab-nav-button btn active"
|
||
onclick="switchTab('default','python')"
|
||
><span>python</span></button>
|
||
<button
|
||
data-tab-item="R"
|
||
data-tab-group="default"
|
||
class="tab-nav-button btn "
|
||
onclick="switchTab('default','R')"
|
||
><span>R</span></button>
|
||
<button
|
||
data-tab-item="Bash"
|
||
data-tab-group="default"
|
||
class="tab-nav-button btn "
|
||
onclick="switchTab('default','Bash')"
|
||
><span>Bash</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="python" data-tab-group="default" class="tab-item active">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="R" data-tab-group="default" class="tab-item ">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-R" data-lang="R"><span class="line"><span class="cl"><span class="o">></span> <span class="nf">print</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">)</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="Bash" data-tab-group="default" class="tab-item ">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-Bash" data-lang="Bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Tab views wit' th' same tabs that belong t' th' same group sychr'nize their select'n:</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="python"
|
||
data-tab-group="default"
|
||
class="tab-nav-button btn active"
|
||
onclick="switchTab('default','python')"
|
||
><span>python</span></button>
|
||
<button
|
||
data-tab-item="R"
|
||
data-tab-group="default"
|
||
class="tab-nav-button btn "
|
||
onclick="switchTab('default','R')"
|
||
><span>R</span></button>
|
||
<button
|
||
data-tab-item="Bash"
|
||
data-tab-group="default"
|
||
class="tab-nav-button btn "
|
||
onclick="switchTab('default','Bash')"
|
||
><span>Bash</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="python" data-tab-group="default" class="tab-item active">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">)</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="R" data-tab-group="default" class="tab-item ">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-R" data-lang="R"><span class="line"><span class="cl"><span class="o">></span> <span class="nf">print</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">)</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="Bash" data-tab-group="default" class="tab-item ">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-Bash" data-lang="Bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">"Hello World!"</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="config-example">Config example</h2>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tabs</span> <span class="nx">groupId</span><span class="p">=</span><span class="s">"config"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"json"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```json
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">{
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> "Hello": "World"
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">}
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"XML"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```xml
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"><Hello>World</Hello>
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"properties"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="s">```properties
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">Hello = World
|
||
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div><p>Renders as:</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="json"
|
||
data-tab-group="config"
|
||
class="tab-nav-button btn active"
|
||
onclick="switchTab('config','json')"
|
||
><span>json</span></button>
|
||
<button
|
||
data-tab-item="XML"
|
||
data-tab-group="config"
|
||
class="tab-nav-button btn "
|
||
onclick="switchTab('config','XML')"
|
||
><span>XML</span></button>
|
||
<button
|
||
data-tab-item="properties"
|
||
data-tab-group="config"
|
||
class="tab-nav-button btn "
|
||
onclick="switchTab('config','properties')"
|
||
><span>properties</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="json" data-tab-group="config" class="tab-item active">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nt">"Hello"</span><span class="p">:</span> <span class="s2">"World"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="XML" data-tab-group="config" class="tab-item ">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="nt"><Hello></span>World<span class="nt"></Hello></span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="properties" data-tab-group="config" class="tab-item ">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ini" data-lang="ini"><span class="line"><span class="cl"><span class="na">Hello</span> <span class="o">=</span> <span class="s">World</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="box notices warning">
|
||
<div class="box-label"><i class="fas fa-exclamation-triangle fa-fw"></i> Arrr</div>
|
||
<div class="box-content">
|
||
<p>When us'n tab views wit' different rrrambl'n sets, make sure t' use a common <code>groupId</code> fer equal sets but distinct
|
||
<code>groupId</code> fer different sets. Th' <code>groupId</code> defaults t' <code>'default'</code>.
|
||
<strong>Take this into account across th' whole ship!</strong>
|
||
Th' tab select'n be restored automatically based on th' <code>groupId</code> an' if it cannot find a tab item because it came
|
||
from th' <code>'default'</code> group on a different plank then all tabs will be empty at first.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<aside id="sidebar" class="default-animation showVisitedLinks">
|
||
<div id="header-wrapper" class="default-animation">
|
||
<div id="header" class="default-animation">
|
||
<style>
|
||
#logo svg,
|
||
#logo svg * {
|
||
color: #282828;
|
||
color: var(--MENU-SECTIONS-BG-color);
|
||
fill: #282828 !important;
|
||
fill: var(--MENU-SECTIONS-BG-color) !important;
|
||
opacity: .945;
|
||
}
|
||
a#logo {
|
||
color: #282828;
|
||
color: var(--MENU-SECTIONS-BG-color);
|
||
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
|
||
font-size: 30px;
|
||
font-weight: 300;
|
||
margin-top: -13px;
|
||
max-width: 60%;
|
||
text-transform: uppercase;
|
||
width: 226px;
|
||
white-space: nowrap;
|
||
}
|
||
a#logo:hover {
|
||
color: #282828;
|
||
color: var(--MENU-SECTIONS-BG-color);
|
||
}
|
||
#logo svg {
|
||
margin-bottom: -20px;
|
||
margin-left: -23.5px;
|
||
width: 40.5%;
|
||
}
|
||
@media only all and (max-width: 59.938em) {
|
||
a#logo {
|
||
font-size: 25px;
|
||
margin-top: -3px;
|
||
}
|
||
#logo svg {
|
||
margin-bottom: -12px;
|
||
margin-left: -23px;
|
||
}
|
||
}
|
||
@media all and (-ms-high-contrast:none) {
|
||
/* IE11s understanding of positioning is weird at best */
|
||
a#logo {
|
||
margin-top: -58px;
|
||
}
|
||
#logo svg {
|
||
margin-bottom: -62px;
|
||
}
|
||
}
|
||
</style>
|
||
<a id="logo" href="/hugo-theme-relearn/pir/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044">
|
||
<path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
|
||
<path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
|
||
<path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#282828;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/>
|
||
<path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
|
||
</svg>
|
||
Relearn
|
||
</a>
|
||
</div>
|
||
<div class="searchbox default-animation">
|
||
<label for="search-by"><i class="fas fa-search"></i></label>
|
||
<input data-search-input id="search-by" type="search" placeholder="Searrrch...">
|
||
<span data-search-clear=""><i class="fas fa-times"></i></span>
|
||
</div>
|
||
<script src="/hugo-theme-relearn/js/lunr.min.js?1653309750"></script>
|
||
<script src="/hugo-theme-relearn/js/auto-complete.js?1653309750"></script>
|
||
<script src="/hugo-theme-relearn/js/search.js?1653309750"></script>
|
||
</div>
|
||
<div id="content-wrapper" class="highlightable">
|
||
<ul class="topics collapsible-menu">
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><input type="checkbox" id="section-182650db393a58ea8a0385f10a515d92" class="toggle"/><label for="section-182650db393a58ea8a0385f10a515d92" ></label><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/installation/" title="Installat'n" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/installation/">Installat'n<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/migration/" title="Migrrrat'n" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/migration/">Migrrrat'n<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/configuration/" title="Configurrrat'n" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/configuration/">Configurrrat'n<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/customization/" title="Customizat'n" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/customization/">Customizat'n<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/generator/" title="Stylesheet generrrat'r" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/generator/">Stylesheet generrrat'r<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/basics/history/" title="Historrry" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/history/">Historrry<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/" title="Rambl'n" class="dd-item"><input type="checkbox" id="section-4074c32ab128bf79d499f2f6ddf50674" class="toggle"/><label for="section-4074c32ab128bf79d499f2f6ddf50674" ></label><a href="/hugo-theme-relearn/pir/cont/"><b>2.</b> Rambl'n<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/pages/" title="Planks orrrganizat'n" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/pages/">Planks orrrganizat'n<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/archetypes/" title="Arrrchetypes" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/archetypes/">Arrrchetypes<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/markdown/" title="Marrrkdown rules" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/markdown/">Marrrkdown rules<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/syntaxhighlight/" title="Code highlight'n" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/syntaxhighlight/">Code highlight'n<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/menushortcuts/" title="Menu extrrra shorrrtcuts" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/menushortcuts/">Menu extrrra shorrrtcuts<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/icons/" title="Ay'cons an' logos" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/icons/">Ay'cons an' logos<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/i18n/" title="Multilingual an' i18n" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/i18n/">Multilingual an' i18n<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/cont/tags/" title="Tags" class="dd-item"><a href="/hugo-theme-relearn/pir/cont/tags/">Tags<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/" title="Shorrrtcodes" class="dd-item active parent"><input type="checkbox" id="section-215953719902243a01571a1ede64aeeb" class="toggle" checked/><label for="section-215953719902243a01571a1ede64aeeb" ></label><a href="/hugo-theme-relearn/pir/shortcodes/"><b>3.</b> Shorrrtcodes<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/attachments/" title="Attachments" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/attachments/">Attachments<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/button/" title="Button" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/button/">Button<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/" title="Children" class="dd-item"><input type="checkbox" id="section-05de666a6804433386d9009e44fa7aa3" class="toggle"/><label for="section-05de666a6804433386d9009e44fa7aa3" ></label><a href="/hugo-theme-relearn/pir/shortcodes/children/">Children<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/test/" title="Plank X" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/test/">Plank X<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/" title="Plank 1" class="dd-item"><input type="checkbox" id="section-5c6c78bc0635ef1f61fdb91197081411" class="toggle"/><label for="section-5c6c78bc0635ef1f61fdb91197081411" ></label><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/">Plank 1<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/" title="Plank 1-1" class="dd-item alwaysopen"><input type="checkbox" id="section-be87ceb25a7988952eb9556a69f3cbdf" class="toggle" checked/><label for="section-be87ceb25a7988952eb9556a69f3cbdf" ></label><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/">Plank 1-1<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/" title="Plank 1-1-2" class="dd-item alwaysopen"><input type="checkbox" id="section-989ea17e090bb9681da73b58575dcced" class="toggle" checked/><label for="section-989ea17e090bb9681da73b58575dcced" ></label><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/">Plank 1-1-2<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/" title="Plank 1-1-2-1" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">Plank 1-1-2-1<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/" title="Plank 1-1-2-2" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">Plank 1-1-2-2<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/" title="Plank 1-1-3" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/">Plank 1-1-3<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-2/" title="Plank 2" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-2/">Plank 2<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/" title="Plank 3" class="dd-item"><input type="checkbox" id="section-085f961452d7baa981ace00de789c321" class="toggle"/><label for="section-085f961452d7baa981ace00de789c321" ></label><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/">Plank 3<i class="fas fa-check read-icon"></i></a><ul>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/" title="Plank 3-1" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/">Plank 3-1<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/expand/" title="Expand" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/expand/">Expand<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/include/" title="Include" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/include/">Include<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/mermaid/" title="Merrrmaid" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/mermaid/">Merrrmaid<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/notice/" title="Notice" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/notice/">Notice<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/siteparam/" title="Ship param" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/siteparam/">Ship param<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/swagger/" title="Swaggerrr" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/swagger/">Swaggerrr<i class="fas fa-check read-icon"></i></a></li>
|
||
<li data-nav-id="/hugo-theme-relearn/pir/shortcodes/tabs/" title="Tabbed views" class="dd-item"><a href="/hugo-theme-relearn/pir/shortcodes/tabs/">Tabbed views<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
||
</ul>
|
||
<div id="shortcuts">
|
||
<div class="nav-title">Morrre</div>
|
||
<ul>
|
||
<li><a class="padding" href="https://github.com/McShelby/hugo-theme-relearn"><i class='fab fa-fw fa-github'></i> GitHub repo</a></li>
|
||
<li><a class="padding" href="/hugo-theme-relearn/pir/more/showcase/"><i class='fas fa-fw fa-camera'></i> Showcases</a></li>
|
||
<li><a class="padding" href="https://gohugo.io/"><i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentat'n</a></li>
|
||
<li><a class="padding" href="/hugo-theme-relearn/pir/more/credits/"><i class='fas fa-fw fa-bullhorn'></i> Crrredits</a></li>
|
||
<li><a class="padding" href="/hugo-theme-relearn/pir/tags/"><i class='fas fa-fw fa-tags'></i> Arrr! Tags</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter"></div>
|
||
<hr class="default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter"/>
|
||
<div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks showLangSwitch showVariantSwitch showVisitedLinks">
|
||
<ul>
|
||
<li id="select-language-container" class="footerLangSwitch showLangSwitch">
|
||
<a class="padding select-container">
|
||
<i class="fas fa-language fa-fw"></i>
|
||
<span> </span>
|
||
<div class="select-style">
|
||
<select id="select-language" onchange="location = baseUri + this.value;">
|
||
<option id="pir" value="/hugo-theme-relearn/pir/shortcodes/" selected>Arrr! ☠ Pirrrates ☠</option>
|
||
<option id="en" value="/hugo-theme-relearn/shortcodes/">English</option>
|
||
</select>
|
||
</div>
|
||
<div class="select-clear"></div>
|
||
</a>
|
||
</li>
|
||
<li id="select-variant-container" class="footerVariantSwitch showVariantSwitch">
|
||
<a class="padding select-container">
|
||
<i class="fas fa-paint-brush fa-fw"></i>
|
||
<span> </span>
|
||
<div class="select-style">
|
||
<select id="select-variant" onchange="variants.changeVariant( this.value );">
|
||
<option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
|
||
<option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
|
||
<option id="learn" value="learn">Learn</option>
|
||
<option id="neon" value="neon">Neon</option>
|
||
<option id="blue" value="blue">Blue</option>
|
||
<option id="green" value="green">Green</option>
|
||
<option id="red" value="red">Red</option>
|
||
</select>
|
||
</div>
|
||
<div class="select-clear"></div>
|
||
</a>
|
||
<script>variants.markSelectedVariant();</script>
|
||
</li>
|
||
<li class="footerVisitedLinks showVisitedLinks"><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
|
||
</ul>
|
||
</div>
|
||
<div id="footer" class="footerFooter showFooter">
|
||
<style>
|
||
#footer {
|
||
font-size: 13px;
|
||
height: 100px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding: 2rem 1rem;
|
||
text-align: center;
|
||
min-width: 230px;
|
||
max-width: 300px;
|
||
}
|
||
#footer p {
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
|
||
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
|
||
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
|
||
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
|
||
<script async defer src="/hugo-theme-relearn/js/buttons.js?1653309750"></script>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<script src="/hugo-theme-relearn/js/clipboard.min.js?1653309750"></script>
|
||
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1653309750"></script>
|
||
<script src="/hugo-theme-relearn/js/featherlight.min.js?1653309750"></script>
|
||
<script src="/hugo-theme-relearn/js/theme.js?1653309750"></script>
|
||
</body>
|
||
</html>
|