mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 18:53:18 +00:00
2853 lines
215 KiB
HTML
2853 lines
215 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pir" dir="ltr">
|
||
<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.107.0">
|
||
<meta name="generator" content="Relearn 5.7.0+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 href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="canonical" type="text/html" title="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<link href="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap'n Hugo Relearrrn Theme">
|
||
<link href="../../images/logo.svg?1669750901" rel="icon" type="image/svg+xml">
|
||
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
|
||
<link href="../../css/fontawesome-all.min.css?1669750902" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1669750902" rel="stylesheet"></noscript>
|
||
<link href="../../css/featherlight.min.css?1669750902" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/featherlight.min.css?1669750902" rel="stylesheet"></noscript>
|
||
<link href="../../css/auto-complete.css?1669750902" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1669750902" rel="stylesheet"></noscript>
|
||
<link href="../../css/perfect-scrollbar.min.css?1669750902" rel="stylesheet">
|
||
<link href="../../css/nucleus.css?1669750902" rel="stylesheet">
|
||
<link href="../../css/fonts.css?1669750902" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1669750902" rel="stylesheet"></noscript>
|
||
<link href="../../css/theme.css?1669750902" rel="stylesheet">
|
||
<link href="../../css/theme-relearn-light.css?1669750902" rel="stylesheet" id="variant-style">
|
||
<link href="../../css/ie.css?1669750902" rel="stylesheet">
|
||
<link href="../../css/variant.css?1669750902" rel="stylesheet">
|
||
<link href="../../css/print.css?1669750902" rel="stylesheet" media="print">
|
||
<link href="../../css/format-print.css?1669750902" rel="stylesheet">
|
||
<script src="../../js/url.js?1669750902"></script>
|
||
<script src="../../js/variant.js?1669750902"></script>
|
||
<script>
|
||
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
|
||
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
|
||
window.index_js_url="../../pir/index.search.js";
|
||
var root_url="../../";
|
||
var baseUri=root_url.replace(/\/$/, '');
|
||
// translations
|
||
window.T_Copy_to_clipboard = 'Copy t\u0027 clipboard';
|
||
window.T_Copied_to_clipboard = 'Copied t\u0027 clipboard!';
|
||
window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
|
||
window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
|
||
window.T_No_results_found = 'No rrresults found fer \u0022{0}\u0022';
|
||
window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
|
||
// some further base stuff
|
||
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
|
||
window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
|
||
</script>
|
||
<script src="../../js/jquery.min.js?1669750902" defer></script>
|
||
</head>
|
||
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../pir/shortcodes/index.html">
|
||
<div id="body" class="default-animation">
|
||
<div id="sidebar-overlay"></div>
|
||
<div id="toc-overlay"></div>
|
||
<nav id="topbar" class="highlightable" dir="ltr">
|
||
<div>
|
||
<div id="breadcrumbs">
|
||
<span id="sidebar-toggle-span">
|
||
<a href="#" id="sidebar-toggle" title='Menu (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
|
||
</span>
|
||
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
|
||
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../pir/index.html"><span itemprop="name">Cap'n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1"> > </li>
|
||
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Shorrrtcodes</span><meta itemprop="position" content="2"></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<main id="body-inner" class="highlightable chapter narrow" tabindex="-1">
|
||
<div class="flex-block-wrapper">
|
||
<div id="head-tags">
|
||
</div>
|
||
<article class="chapter">
|
||
<div class="article-subheading">T' chapterrr 3</div>
|
||
<h1 id="shorrrtcodes">Shorrrtcodes</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<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="../../shortcodes/attachments/index.html">Attachments</a></h2><p>List o' files attached t' a plank</p>
|
||
<h2><a href="../../shortcodes/button/index.html">Button</a></h2><p>Click'ble buttons</p>
|
||
<h2><a href="../../shortcodes/children/index.html">Children</a></h2><p>List th' child planks o' a plank</p>
|
||
<h2><a href="../../shortcodes/expand/index.html">Expand</a></h2><p>Expandable/collaps'ble sections o' text</p>
|
||
<h2><a href="../../shortcodes/include/index.html">Include</a></h2><p>Displays rrrambl'n from other files</p>
|
||
<h2><a href="../../shortcodes/math/index.html">Math</a></h2><p>Beautiful math an' chemical formulae</p>
|
||
<h2><a href="../../shortcodes/mermaid/index.html">Merrrmaid</a></h2><p>Generate diagrams an' flowcharts from text</p>
|
||
<h2><a href="../../shortcodes/notice/index.html">Notice</a></h2><p>Disclaimers t' help ye structure yer plank</p>
|
||
<h2><a href="../../shortcodes/siteparam/index.html">Ship param</a></h2><p>Get value o' ship params</p>
|
||
<h2><a href="../../shortcodes/swagger/index.html">Swagger</a></h2><p>UI fer yer Swagger / OpenAPI Specificat'ns</p>
|
||
<h2><a href="../../shortcodes/tabs/index.html">Tabbed views</a></h2><p>Show rrrambl'n 'n tabbed views</p>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Shorrrtcodes</h1>
|
||
<article class="default">
|
||
<h1 id="attachments">Attachments</h1>
|
||
|
||
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments.pir.files/NoTreasure.txt">NoTreasure.txt</a> (26 B)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>attachments</code> shorrrtcode displays a list o' files attached t' a plank wit' adjust'ble color, title an' ay'con.</p>
|
||
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Attachments</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="../../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>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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">sort</span><span class="p">=</span><span class="s">"asc"</span> <span class="o">/%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/attachments.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"sort"</span> <span class="s">"asc"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Th' shorrrtcode lists files found 'n a specific folder.</p>
|
||
<p>Currently, it supports two implementat'ns fer planks</p>
|
||
<ol>
|
||
<li>
|
||
<p>If yer plank be a Marrrkdown file, attachments must be placed 'n a folder named like yer plank an' end'n wit' <code>.files</code>.</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li><strong>plank.files</strong>
|
||
<ul>
|
||
<li>attachment.pdf</li>
|
||
</ul>
|
||
</li>
|
||
<li>plank.md</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</blockquote>
|
||
</li>
|
||
<li>
|
||
<p>If yer plank be a folder, attachments must be placed 'n a nested <code>files</code> folder.</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>rrrambl'n
|
||
<ul>
|
||
<li>_index.md</li>
|
||
<li>plank
|
||
<ul>
|
||
<li>index.md</li>
|
||
<li><strong>files</strong>
|
||
<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>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>style</strong></td>
|
||
<td style="text-align:left"><code>transparent</code></td>
|
||
<td style="text-align:left">Th' color scheme used t' highlight th' box rrrambl'n.<br><br>- by severity: <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><nd color: <code>primary</code>, <code>secondary</code><br>- by color: <code>blue</code>, <code>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>,t`</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>title</strong></td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left">Arbitrary text fer th' box title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwault.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other colors: <code>Attachments</code><br><br>If ye wa 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"><strong>ay'con</strong></td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left"><a href="../../cont/icons/#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n le** there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n iseverity<br>- fer all other colors: <code>paperclip</code><br><br>If ye want no ay'con, ye have t' set this parameter t' <code>" "</code> (a non empty d wit' spaces)</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>sort</strong></td>
|
||
<td style="text-align:left"><code>asc</code></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"><strong>pattern</strong></td>
|
||
<td style="text-align:left"><code>.*</code></td>
|
||
<td style="text-align:left">A <a href="https://en.wikipedia.org/wiki/Regular_expression">regular expressions</a>, used t' filter th' attachments by file name. For example:<br><br>- t' match a file suffix o' ‘jpg’, use <code>.*jpg</code> (not <code>*.jpg</code>)<br>- t' match file names end'n 'n <code>jpg</code> or <code>png</code>, use <code>.*(jpg|png)</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="custom-title-list-of-attachments-ending-in-pdf-or-mp4">Custom Title, List o' Attachments End'n 'n pdf or mp4</h3>
|
||
<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>
|
||
<div class="box attachments cstyle transparent">
|
||
<div class="box-label"><i class="fa-fw fas fa-paperclip"></i> Related files</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3 id="info-styled-box-descending-sort-order">Ahoi Styled Box, Descend'n Sort Order</h3>
|
||
<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">"info"</span> <span class="nx">sort</span><span class="p">=</span><span class="s">"desc"</span> <span class="o">/%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
<div class="box attachments cstyle info">
|
||
<div class="box-label"><i class="fa-fw fas fa-info-circle"></i> Ahoi</div>
|
||
<ul class="box-content attachments-files">
|
||
<li><a href="../../shortcodes/attachments.en.files/movieselectricsheep-flock-244-32500-2.mp4">movieselectricsheep-flock-244-32500-2.mp4</a> (340 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/hugo.txt">hugo.txt</a> (20 B)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/hugo.png">hugo.png</a> (17 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/Carroll_AliceAuPaysDesMerveilles.pdf">Carroll_AliceAuPaysDesMerveilles.pdf</a> (175 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/BachGavotteShort.mp3">BachGavotteShort.mp3</a> (357 KB)</li>
|
||
<li><a href="../../shortcodes/attachments.en.files/adivorciarsetoca00cape.pdf">adivorciarsetoca00cape.pdf</a> (361 KB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3 id="style-and-icons">Style an' Ay'cons</h3>
|
||
<p>For further examples fer <strong>style</strong>, <strong>title</strong> an' <strong>ay'con</strong>, see th' <a href="../../shortcodes/notice/"><code>notice</code> shorrrtcode</a> documentat'n. Th' parameter be work'n th' same way fer both shorrrtcodes, besides hav'n different defaults.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="button">Button</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>button</code> shorrrtcode displays a click'ble button wit' adjust'ble color, title an' ay'con.</p>
|
||
<p>
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle warning">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-dragon"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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">style</span><span class="p">=</span><span class="s">"warning"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"dragon"</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></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/button.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"href"</span> <span class="s">"https://gohugo.io/"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Get Hugo"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"shortcodes/button.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"href"</span> <span class="s">"https://gohugo.io/"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"style"</span> <span class="s">"warning"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"dragon"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Get Hugo"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Once th' button be clicked, it opens another browser tab fer th' given URL.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>href</strong></td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Either th' destinat'n URL fer th' button or JavaScript code t' be executed on click. If this parameter be not set, th' button will do noth'n but be still displayed as click'ble.<br><br>- if start'n wit' <code>javascript:</code> all follow'n text will be executed 'n yer browser<br>- every other str'n will be interpreted as URL</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>style</strong></td>
|
||
<td style="text-align:left"><code>transparent</code></td>
|
||
<td style="text-align:left">Th' color scheme used t' paint th' button.<br><br>- by severity: <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code><br>- by color: <code>blue</code>, <code>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>ay'con</strong></td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left"><a href="../../cont/icons/#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other colors: <em><empty></em><br><br>If ye want no ay'con fer a severity style, 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"><strong>iconposit'n</strong></td>
|
||
<td style="text-align:left"><code>left</code></td>
|
||
<td style="text-align:left">Places th' ay'con t' th' <code>left</code> or <code>right</code> o' th' title.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>target</strong></td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left">Th' destinat'n frame/window if <strong>href</strong> be an URL. Otherwise th' parameter be not used. This behaves similar t' normal links. If th' parameter be not given it defaults t':<br><br>- <code>_blank</code> fer any address start'n wit' <code>http://</code> or <code>https://</code><br>- no specific value fer all other links</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>type</strong></td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left">Th' <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type">button type</a> if <strong>href</strong> be JavaScript. Otherwise th' parameter be not used. If th' parameter be not given it defaults t' <code>button</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><em><strong><content></strong></em></td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left">Arbitrary text fer th' button title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other colors: <em><empty></em><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>" "</code> (a non empty str'n filled wit' spaces)</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="style">Style</h3>
|
||
<h4 id="by-severity">By Severity</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">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"info"</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">style</span><span class="p">=</span><span class="s">"note"</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">style</span><span class="p">=</span><span class="s">"tip"</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">style</span><span class="p">=</span><span class="s">"warning"</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></code></pre></div><p>
|
||
<span class="btn cstyle info">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-info-circle"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle note">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-exclamation-circle"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle tip">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-lightbulb"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle warning">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-exclamation-triangle"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h4 id="by-brand-colors">By Brand Colors</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">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</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">style</span><span class="p">=</span><span class="s">"secondary"</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></code></pre></div><p>
|
||
<span class="btn cstyle primary">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle secondary">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h4 id="by-color">By Color</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">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"blue"</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">style</span><span class="p">=</span><span class="s">"green"</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">style</span><span class="p">=</span><span class="s">"grey"</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">style</span><span class="p">=</span><span class="s">"orange"</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">style</span><span class="p">=</span><span class="s">"red"</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></code></pre></div><p>
|
||
<span class="btn cstyle blue">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle green">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle grey">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle orange">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle red">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h4 id="by-special-color">By Special Color</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">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"default"</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">style</span><span class="p">=</span><span class="s">"transparent"</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></code></pre></div><p>
|
||
<span class="btn cstyle default">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span></p>
|
||
<h3 id="icon">Ay'con</h3>
|
||
<h4 id="to-the-left">T' th' Left</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">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">"download"</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></code></pre></div>
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-download"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
<h4 id="to-the-right">T' th' Right</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">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">"download"</span> <span class="nx">iconposit'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="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>
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo
|
||
<i class="fa-fw fas fa-download"></i>
|
||
</a>
|
||
</span>
|
||
<h4 id="override-for-severity">Override fer Severity</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">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">"dragon"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"warning"</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></code></pre></div>
|
||
<span class="btn cstyle warning">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-dragon"></i>
|
||
Get Cap'n Hugo
|
||
</a>
|
||
</span>
|
||
<h3 id="target">Target</h3>
|
||
<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="nx">target</span><span class="p">=</span><span class="s">"_self"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span> <span class="nx">'n</span> <span class="nx">same</span> <span class="nx">window</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="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Cap'n Hugo</span> <span class="nx">'n</span> <span class="nx">new</span> <span class="nx">Window</span><span class="o">/</span><span class="nf">Frame</span> <span class="p">(</span><span class="k">default</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>
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_self" rel="noopener">
|
||
Get Cap'n Hugo 'n same Window/Frame
|
||
</a>
|
||
</span>
|
||
|
||
<span class="btn cstyle transparent">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
Get Cap'n Hugo 'n new Window/Frame (default)
|
||
</a>
|
||
</span></p>
|
||
<h3 id="other">Other</h3>
|
||
<h4 id="severity-style-with-all-defaults">Severity Style wit' All Defaults</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">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"https://gohugo.io/"</span> <span class="nx">style</span><span class="p">=</span><span class="s">"tip"</span> <span class="o">%</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>
|
||
<span class="btn cstyle tip">
|
||
<a href="https://gohugo.io/" target="_blank" rel="noopener">
|
||
<i class="fa-fw fas fa-lightbulb"></i>
|
||
Smarrrt Arrrse
|
||
</a>
|
||
</span>
|
||
<h4 id="button-to-internal-page">Button t' Internal Plank</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">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">"/"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Home</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>
|
||
<span class="btn cstyle transparent">
|
||
<a href="../../">
|
||
Home
|
||
</a>
|
||
</span>
|
||
<h4 id="button-with-javascript-action">Button wit' JavaScript Act'n</h4>
|
||
<p>If yer JavaScript act'n does not change th' focus afterwards, make sure t' call <code>this.blur()</code> 'n th' end t' unselect th' button.</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">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bullhorn"</span> <span class="nx">href</span><span class="p">=</span><span class="s">"javascript:alert('Hello world!');this.blur();"</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Shout</span> <span class="nx">it</span> <span class="nx">out</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>
|
||
<span class="btn cstyle primary">
|
||
<button onclick="alert('Hello world!');this.blur();" type="button">
|
||
<i class="fa-fw fas fa-bullhorn"></i>
|
||
Shout it out
|
||
</button>
|
||
</span>
|
||
<h4 id="button-within-a-form-element">Button within a <code>form</code> Element</h4>
|
||
<p>T' use native HTML elements 'n yer Marrrkdown, add this 'n yer <code>config.toml</code></p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span>
|
||
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">form</span> <span class="na">act'n</span><span class="o">=</span><span class="s">"../../search.html"</span> <span class="na">method</span><span class="o">=</span><span class="s">"get"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"search-by-detail"</span> <span class="na">class</span><span class="o">=</span><span class="s">"search-by"</span> <span class="na">type</span><span class="o">=</span><span class="s">"search"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> {{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}}
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">form</span><span class="p">></span>
|
||
</span></span></code></pre></div><form action="../../search.html" method="get">
|
||
<div class="searchform" style="width: 20vw;">
|
||
<input name="search-by-detail" class="search-by" type="search" placeholder="Search...">
|
||
|
||
<span class="btn cstyle secondary">
|
||
<button type="submit">
|
||
<i class="fa-fw fas fa-search"></i>
|
||
Search
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</form>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="children">Children</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>children</code> shorrrtcode lists th' child planks o' th' current plank an' its descendants .</p>
|
||
|
||
<ul class="children children-li children-sort-weight">
|
||
|
||
<li><a href="../../shortcodes/children/test/index.html">plank X</a></li>
|
||
<li><a href="../../shortcodes/children/children-1/index.html">plank 1</a></li>
|
||
<li><a href="../../shortcodes/children/children-2/index.html">plank 2</a></li>
|
||
<li><a href="../../shortcodes/children/children-3/index.html">plank 3</a></li>
|
||
</ul>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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">sort</span><span class="p">=</span><span class="s">"weight"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/children.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"sort"</span> <span class="s">"weight"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>containerstyle</strong></td>
|
||
<td style="text-align:left"><code>ul</code></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"><strong>style</strong></td>
|
||
<td style="text-align:left"><code>li</code></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"><strong>showhidden</strong></td>
|
||
<td style="text-align:left"><code>false</code></td>
|
||
<td style="text-align:left">When <code>true</code>, child planks hidden from th' menu will be displayed as well.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>descript'n</strong></td>
|
||
<td style="text-align:left"><code>false</code></td>
|
||
<td style="text-align:left">When <code>true</code> shows a short text under each plank 'n th' list. When no descript'n or summary exists fer th' plank, th' first 70 words o' th' rrrambl'n be taken - <a href="https://gohugo.io/content/summaries/">read more info about summaries on gohugo.io</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>depth</strong></td>
|
||
<td style="text-align:left"><code>1</code></td>
|
||
<td style="text-align:left">Th' depth o' descendants t' display. For example, if th' value be <code>2</code>, th' shorrrtcode will display two levels o' child planks. T' get all descendants, set this value t' a high number eg. <code>999</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>sort</strong></td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left">Th' sort order o' th' displayed list.<br><br>If not set it be sorted by th' <a href="../../basics/configuration/#global-site-parameters"><code>ordersectionsby</code></a> sett'n o' th' ship an' th' planks frontmatter<br><br>- <code>weight</code>: t' sort on menu order<br>- <code>title</code>: t' sort alphabetically on menu label.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="all-default">All Default</h3>
|
||
<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="../../shortcodes/children/test/index.html">plank X</a></li>
|
||
<li><a href="../../shortcodes/children/children-1/index.html">plank 1</a></li>
|
||
<li><a href="../../shortcodes/children/children-2/index.html">plank 2</a></li>
|
||
<li><a href="../../shortcodes/children/children-3/index.html">plank 3</a></li>
|
||
</ul>
|
||
<h3 id="with-description">Wit' Descript'n</h3>
|
||
<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="../../shortcodes/children/test/index.html">plank X</a><p>This be a plain plank test, an' th' beginn'n o' a YAML multiline descript'n...
|
||
</p></li>
|
||
<li><a href="../../shortcodes/children/children-1/index.html">plank 1</a><p>This be a demo child plank</p></li>
|
||
<li><a href="../../shortcodes/children/children-2/index.html">plank 2</a><p>This be a demo child plank wit' no descript'n.
|
||
So its rrrambl'n be used as descript'n.</p></li>
|
||
<li><a href="../../shortcodes/children/children-3/index.html">plank 3</a><p>This be a demo child plank</p></li>
|
||
</ul>
|
||
<h3 id="infinite-depth-and-hidden-pages">Infinite Depth an' Hidden Planks</h3>
|
||
<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="../../shortcodes/children/test/index.html">plank X</a><ul>
|
||
</ul></li>
|
||
<li><a href="../../shortcodes/children/children-1/index.html">plank 1</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">plank 1-1-1 (hidden)</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html">plank 1-1-1-1</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html">plank 1-1-1-1-1 (hidden)</a><ul>
|
||
|
||
<li><a href="../../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/index.html">plank 1-1-1-1-1-1</a><ul>
|
||
</ul></li></ul></li></ul></li></ul></li>
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">plank 1-1-2</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">plank 1-1-2-1</a><ul>
|
||
</ul></li>
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">plank 1-1-2-2</a><ul>
|
||
</ul></li></ul></li>
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a><ul>
|
||
</ul></li></ul></li></ul></li>
|
||
<li><a href="../../shortcodes/children/children-2/index.html">plank 2</a><ul>
|
||
</ul></li>
|
||
<li><a href="../../shortcodes/children/children-3/index.html">plank 3</a><ul>
|
||
|
||
<li><a href="../../shortcodes/children/children-3/test3/index.html">plank 3-1</a><ul>
|
||
</ul></li></ul></li>
|
||
<li><a href="../../shortcodes/children/children-4/index.html">plank 4 (hidden)</a><ul>
|
||
</ul></li>
|
||
</ul>
|
||
<h3 id="heading-styles-for-container-and-elements">Head'n Styles fer Container an' Elements</h3>
|
||
<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="../../shortcodes/children/test/index.html">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="../../shortcodes/children/children-1/index.html">plank 1</a></h2><p>This be a demo child plank</p>
|
||
|
||
<h3><a href="../../shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a></h3><p>This be a demo child plank</p>
|
||
|
||
<h4><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">plank 1-1-2</a></h4><p>This be a demo child plank</p>
|
||
<h4><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a></h4><p>This be a demo child plank</p>
|
||
<h2><a href="../../shortcodes/children/children-2/index.html">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="../../shortcodes/children/children-3/index.html">plank 3</a></h2><p>This be a demo child plank</p>
|
||
|
||
<h3><a href="../../shortcodes/children/children-3/test3/index.html">plank 3-1</a></h3><p>This be a plain plank test nested 'n a parent</p>
|
||
|
||
</div>
|
||
<h3 id="divs-for-group-and-element-styles">Divs fer Group an' Element Styles</h3>
|
||
<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">"3"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
<div class="children children-div children-sort-">
|
||
|
||
<div><a href="../../shortcodes/children/test/index.html">plank X</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-1/index.html">plank 1</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">plank 1-1-2</a></div>
|
||
<div><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a></div>
|
||
<div><a href="../../shortcodes/children/children-2/index.html">plank 2</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-3/index.html">plank 3</a></div>
|
||
|
||
<div><a href="../../shortcodes/children/children-3/test3/index.html">plank 3-1</a></div>
|
||
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Children</h1>
|
||
<article class="default">
|
||
<h1 id="plank-x">Plank X</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="plank-1">Plank 1</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> 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="../../shortcodes/children/children-1/children-1-1/index.html">plank 1-1</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Plank 1</h1>
|
||
<article class="default">
|
||
<h1 id="plank-1-1">Plank 1-1</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> 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="../../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="../../shortcodes/children/children-1/children-1-1/children-1-1-1/index.html">plank 1-1-1 (hidden)</a></li>
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">plank 1-1-2</a></li>
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Plank 1-1</h1>
|
||
<article class="default">
|
||
<h1 id="plank-1-1-2">Plank 1-1-2</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> 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="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">plank 1-1-2-1</a></li>
|
||
<li><a href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">plank 1-1-2-2</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Plank 1-1-2</h1>
|
||
<article class="default">
|
||
<h1 id="plank-1-1-2-1">Plank 1-1-2-1</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="plank-1-1-2-2">Plank 1-1-2-2</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
</section>
|
||
<article class="default">
|
||
<h1 id="plank-1-1-3">Plank 1-1-3</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
</section>
|
||
</section>
|
||
<article class="default">
|
||
<h1 id="plank-2">Plank 2</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> 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 class="default">
|
||
<h1 id="plank-3">Plank 3</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> 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="../../shortcodes/children/children-3/test3/index.html">plank 3-1</a></li>
|
||
</ul>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h1 class="a11y-only">Subsct'ns o' Plank 3</h1>
|
||
<article class="default">
|
||
<h1 id="plank-3-1">Plank 3-1</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>This be a plain demo child plank.</p>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
</section>
|
||
</section>
|
||
<article class="default">
|
||
<h1 id="expand">Expand</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>expand</code> shorrrtcode displays an expandable/collaps'ble section o' text.</p>
|
||
|
||
<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-left expand-rtl direction-ltr"></i>
|
||
<i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
|
||
Expand me...
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
Thank ye!
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional as well or also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="shortcode (positional)"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','shortcode (positional)')"
|
||
><span>shorrrtcode (positional)</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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="nx">title</span><span class="p">=</span><span class="s">"Expand me..."</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Thank</span> <span class="nx">ye</span><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 data-tab-item="shortcode (positional)" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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="o">%</span><span class="p">}}</span><span class="nx">Thank</span> <span class="nx">ye</span><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 data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/expand.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"Expand me..."</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"Thank ye!"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Posit'n</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>title</strong></td>
|
||
<td style="text-align:left">1</td>
|
||
<td style="text-align:left"><code>"Expand me..."</code></td>
|
||
<td style="text-align:left">Arbitrary text t' appear next t' th' expand/collapse ay'con.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>open</strong></td>
|
||
<td style="text-align:left">2</td>
|
||
<td style="text-align:left"><code>false</code></td>
|
||
<td style="text-align:left">When <code>true</code> th' rrrambl'n text will be initially shown as expanded.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><em><strong><content></strong></em></td>
|
||
<td style="text-align:left"></td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Arbitrary text t' be displayed on expand.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="all-defaults">All Defaults</h3>
|
||
<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 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 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 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-left expand-rtl direction-ltr"></i>
|
||
<i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
|
||
Expand me...
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
Yes, ye did it!
|
||
</div>
|
||
</div>
|
||
<h3 id="initially-expanded">Initially Expanded</h3>
|
||
<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="nx">title</span><span class="p">=</span><span class="s">"Expand me..."</span> <span class="nx">open</span><span class="p">=</span><span class="s">"true"</span> <span class="o">%</span><span class="p">}}</span><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 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 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-left expand-rtl direction-ltr"></i>
|
||
<i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
|
||
Expand me...
|
||
</a>
|
||
<div class="expand-content" style="display: block;">
|
||
No need t' press ye!
|
||
</div>
|
||
</div>
|
||
<h3 id="arbitrary-text">Arbitrary Text</h3>
|
||
<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="nx">title</span><span class="p">=</span><span class="s">"Show me almost endless possibilities"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</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="nx">standard</span> <span class="nx">markdown</span> <span class="nx">rules</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">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">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</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 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-left expand-rtl direction-ltr"></i>
|
||
<i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
|
||
Show me almost endless possibilities
|
||
</a>
|
||
<div class="expand-content" style="display: none;">
|
||
<p>Ye can add standard markdown rules:</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>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' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="include">Include</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>include</code> shorrrtcode includes other files from yer project inside o' th' current plank.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional aswell or also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="shortcode (positional)"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','shortcode (positional)')"
|
||
><span>shorrrtcode (positional)</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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="nx">file</span><span class="p">=</span><span class="s">"shortcodes/INCLUDE_ME.md"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="shortcode (positional)" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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 data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/include .html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"file"</span> <span class="s">"shortcodes/INCLUDE_ME.md"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>Th' included files can even contain Marrrkdown an' will be taken into account when generat'n th' t'ble o' contents.</p>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Posit'n</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>file</strong></td>
|
||
<td style="text-align:left">1</td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Th' path t' th' file t' be included. Path resolut'n adheres t' <a href="https://gohugo.io/functions/readfile/">Hugo’s build-in <code>readFile</code> funct'n</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>hidefirsthead'n</strong></td>
|
||
<td style="text-align:left">2</td>
|
||
<td style="text-align:left"><code>false</code></td>
|
||
<td style="text-align:left">When <code>true</code> an' th' included file contains head'ns, th' first head'n will be hidden. This comes 'n handy, eg. if ye include otherwise standalone Marrrkdown files.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="arbitrary-content">Arbitrary Rrrambl'n</h3>
|
||
<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><p>Ye can add standard markdown rules:</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>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' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="math">Math</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>math</code> shorrrtcode generates beautiful formatted math an' chemical formulae us'n th' <a href="https://mathjax.org/">MathJax</a> library.</p>
|
||
|
||
<span class="math align-center">
|
||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>This only works 'n modern browsers.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Math codefences (eg. GitHub) an' so yer markdown becomes more port'ble.</p>
|
||
<p>Ye be free t' also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n (<a href="#configuration">see th' configurat'n section</a>).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="codefence"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','codefence')"
|
||
><span>codefence</span></button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="codefence" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```math { align="center" }
|
||
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span></span><span class="line"><span class="cl">```
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">math</span> <span class="nx">align</span><span class="p">=</span><span class="s">"center"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">$$\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">a_k</span> <span class="nx">b_k</span> <span class="err">\</span><span class="nx">right</span><span class="p">)^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">leq</span> <span class="err">\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">a_k</span><span class="p">^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">right</span><span class="p">)</span> <span class="err">\</span><span class="nf">left</span><span class="p">(</span> <span class="err">\</span><span class="nx">sum_</span><span class="p">{</span><span class="nx">k</span><span class="p">=</span><span class="mi">1</span><span class="p">}^</span><span class="nx">n</span> <span class="nx">b_k</span><span class="p">^</span><span class="mi">2</span> <span class="err">\</span><span class="nx">right</span><span class="p">)</span><span class="err">$$</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">math</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/math.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"$$left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"align"</span> <span class="s">"center"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>align</strong></td>
|
||
<td style="text-align:left"><code>center</code></td>
|
||
<td style="text-align:left">Allowed values be <code>left</code>, <code>center</code> or <code>right</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><em><strong><content></strong></em></td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Yer formuale.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="configuration">Configurat'n</h2>
|
||
<p>MathJax be configured wit' default sett'ns. Ye can cust'mize MathJax’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 MathJax’s configurat'n object.</p>
|
||
<p>See <a href="https://docs.mathjax.org/en/latest/options/index.html">MathJax documentat'n</a> fer all allowed sett'ns.</p>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n.</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="global-configuration-file">Global Configurat'n File</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">mathJaxInitialize</span> <span class="p">=</span> <span class="s2">"{ \"chtml\": { \"displayAlign\": \"left\" } }"</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 `guessSyntax = true`, there will be no unstyled code even if no language</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># mandatory sett'n fer yer ship if ye want t' use Math codefences</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span></code></pre></div><h3 id="pages-frontmatter">Page’s Frontmatter</h3>
|
||
<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">mathJaxInitialize</span> <span class="p">=</span> <span class="s2">"{ \"chtml\": { \"displayAlign\": \"left\" } }"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="err">+++</span>
|
||
</span></span></code></pre></div><h2 id="examples">Examples</h2>
|
||
<h3 id="inline-math">Inline Math</h3>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">Inline math be generated if ye use a single <span class="sb">`$`</span> as a delimiter around yer formulae: {{<span class="p"><</span> <span class="nt">math</span> <span class="p">></span>}}$\sqrt{3}${{<span class="p"><</span> <span class="p">/</span><span class="nt">math</span> <span class="p">></span>}}
|
||
</span></span></code></pre></div><p>Inline math be generated if ye use a single <code>$</code> as a delimiter around yer formulae:
|
||
<span class="math align-center">$\sqrt{3}$</span></p>
|
||
<h3 id="blocklevel-math-with-right-alignment">Blocklevel Math wit' Right Alignment</h3>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">If ye delimit yer formulae by two consecutive <span class="sb">`$$`</span> it generates a new block.
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">math</span> <span class="na">align</span><span class="o">=</span><span class="s">"right"</span> <span class="p">></span>}}
|
||
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span></span><span class="line"><span class="cl">{{<span class="p"><</span> <span class="p">/</span><span class="nt">math</span> <span class="p">></span>}}
|
||
</span></span></code></pre></div><p>If ye delimit yer formulae by two consecutive <code>$$</code> it generates a new block.</p>
|
||
|
||
<span class="math align-right">
|
||
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span>
|
||
<h3 id="codefence">Codefence</h3>
|
||
<p>Ye can also use codefences but without further parameter.</p>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="s">```math
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"></span>$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
|
||
</span></span><span class="line"><span class="cl"><span class="s">```</span>
|
||
</span></span></code></pre></div>
|
||
<span class="math align-center">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$</span><h3 id="chemical-formulae">Chemical Formulae</h3>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">math</span> <span class="p">></span>}}
|
||
</span></span><span class="line"><span class="cl">$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||
</span></span><span class="line"><span class="cl">{{<span class="p"><</span> <span class="p">/</span><span class="nt">math</span> <span class="p">></span>}}
|
||
</span></span></code></pre></div>
|
||
<span class="math align-center">
|
||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||
</span>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="merrrmaid">Merrrmaid</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>mermaid</code> shorrrtcode generates diagrams an' flowcharts from text, 'n a similar manner as Marrrkdown us'n th' <a href="https://mermaidjs.github.io/">Merrrmaid</a> library.</p>
|
||
|
||
<div class="mermaid align-center">
|
||
graph LR;
|
||
If --> Then
|
||
Then --> Else
|
||
</div>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>This only works 'n modern browsers.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Arrr</div>
|
||
<div class="box-content">
|
||
<p>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>While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Merrrmaid codefences (eg. GitHub) an' so yer markdown becomes more port'ble.</p>
|
||
<p>Ye be free t' also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n (<a href="#configuration">see th' configurat'n section</a>).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="codefence"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','codefence')"
|
||
><span>codefence</span></button>
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="codefence" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">```mermaid { align="center" }
|
||
</span></span><span class="line"><span class="cl">graph LR;
|
||
</span></span><span class="line"><span class="cl"> If --> Then
|
||
</span></span><span class="line"><span class="cl"> Then --> Else
|
||
</span></span><span class="line"><span class="cl">```
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">"center"</span> <span class="p">>}}</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">If</span> <span class="o">--</span><span class="p">></span> <span class="nx">Then</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Then</span> <span class="o">--</span><span class="p">></span> <span class="nx">Else</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 data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/mermaid.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"graph LR;\nIf --> Then\nThen --> Else"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"align"</span> <span class="s">"center"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>align</strong></td>
|
||
<td style="text-align:left"><code>center</code></td>
|
||
<td style="text-align:left">Allowed values be <code>left</code>, <code>center</code> or <code>right</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><em><strong><content></strong></em></td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Yer Merrrmaid graph.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<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 cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>T' use codefence rules ye have t' turn off <code>guessSyntax</code> fer th' <code>marrrkup.highlight</code> sett'n.</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="global-configuration-file">Global Configurat'n File</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 `guessSyntax = true`, there will be no unstyled code even if no language</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="c"># mandatory sett'n fer yer ship if ye want t' use Merrrmaid codefences</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">guessSyntax</span> <span class="p">=</span> <span class="kc">false</span>
|
||
</span></span></code></pre></div><h3 id="pages-frontmatter">Page’s Frontmatter</h3>
|
||
<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><h2 id="examples">Examples</h2>
|
||
<h3 id="flowchart-with-non-default-mermaid-theme">Flowchart wit' Non-Default Merrrmaid Theme</h3>
|
||
<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="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 class="mermaid align-center">
|
||
%%{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>
|
||
<h3 id="sequence-diagram-with-configuration-directive">Sequence Diagram wit' Configurat'n Directive</h3>
|
||
<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="o">%%</span><span class="p">{</span><span class="nx">init</span><span class="p">:{</span><span class="s">"fontFamily"</span><span class="p">:</span><span class="s">"monospace"</span><span class="p">,</span> <span class="s">"sequence"</span><span class="p">:{</span><span class="s">"showSequenceNumbers"</span><span class="p">:</span><span class="kc">true</span><span class="p">}}}</span><span class="o">%%</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">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="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></span><span class="line"><span class="cl"> <span class="nx">John</span><span class="o">-->></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="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="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 class="mermaid align-center">
|
||
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
|
||
sequenceDiagram
|
||
Alice->>John: Hello John, how be ye?
|
||
loop Healthcheck
|
||
John->>John: Fight against hypochondria
|
||
end
|
||
Note right of John: Rational thoughts!
|
||
John-->>Alice: Great!
|
||
John->>Bob: How about ye?
|
||
Bob-->>John: Jolly bloody!
|
||
</div>
|
||
<h3 id="class-diagram-with-codefence-syntax">Class Diagram wit' Codefence Rules</h3>
|
||
<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">classDiagram
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Duck
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Fish
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal <|-- Zebra
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal : +int age
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal : +Str'n gender
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal: +isMammal()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> Animal: +mate()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> class Duck{
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +Str'n beakColor
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +swim()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +quack()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> }
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> class Fish{
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> -int sizeInFeet
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> -canEat()
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> }
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> class Zebra{
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +bool is_wild
|
||
</span></span></span><span class="line"><span class="cl"><span class="s"> +run()
|
||
</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></code></pre></div>
|
||
<div class="mermaid align-center">classDiagram
|
||
Animal <|-- Duck
|
||
Animal <|-- Fish
|
||
Animal <|-- Zebra
|
||
Animal : +int age
|
||
Animal : +Str'n gender
|
||
Animal: +isMammal()
|
||
Animal: +mate()
|
||
class Duck{
|
||
+Str'n beakColor
|
||
+swim()
|
||
+quack()
|
||
}
|
||
class Fish{
|
||
-int sizeInFeet
|
||
-canEat()
|
||
}
|
||
class Zebra{
|
||
+bool is_wild
|
||
+run()
|
||
}</div><h3 id="state-diagram-aligned-to-the-right">State Diagram Aligned t' th' Right</h3>
|
||
<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">"right"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">stateDiagram</span><span class="o">-</span><span class="nx">v2</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">open</span><span class="p">:</span> <span class="nx">Open</span> <span class="nx">Door</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Closed</span> <span class="nx">Door</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">locked</span><span class="p">:</span> <span class="nx">Locked</span> <span class="nx">Door</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">open</span> <span class="o">--</span><span class="p">></span> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Close</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">closed</span> <span class="o">--</span><span class="p">></span> <span class="nx">locked</span><span class="p">:</span> <span class="nx">Lock</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">locked</span> <span class="o">--</span><span class="p">></span> <span class="nx">closed</span><span class="p">:</span> <span class="nx">Unlock</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">closed</span> <span class="o">--</span><span class="p">></span> <span class="nx">open</span><span class="p">:</span> <span class="nx">Open</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 class="mermaid align-right">
|
||
stateDiagram-v2
|
||
open: Open Door
|
||
closed: Closed Door
|
||
locked: Locked Door
|
||
open --> closed: Close
|
||
closed --> locked: Lock
|
||
locked --> closed: Unlock
|
||
closed --> open: Open
|
||
</div>
|
||
<h3 id="entity-relationship-model">Entity Relationship Model</h3>
|
||
<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">erDiagram</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="p">}|..|{</span> <span class="nx">DELIVERY</span><span class="o">-</span><span class="nx">ADDRESS</span> <span class="p">:</span> <span class="nx">has</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">places</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">CUSTOMER</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">INVOICE</span> <span class="p">:</span> <span class="s">"li'ble for"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">DELIVERY</span><span class="o">-</span><span class="nx">ADDRESS</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">receives</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">INVOICE</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">ORDER</span> <span class="p">:</span> <span class="nx">covers</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">ORDER</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">ORDER</span><span class="o">-</span><span class="nx">ITEM</span> <span class="p">:</span> <span class="nx">includes</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">PRODUCT</span><span class="o">-</span><span class="nx">CATEGORY</span> <span class="o">||--</span><span class="p">|{</span> <span class="nx">PRODUCT</span> <span class="p">:</span> <span class="nx">contains</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">PRODUCT</span> <span class="o">||--</span><span class="nx">o</span><span class="p">{</span> <span class="nx">ORDER</span><span class="o">-</span><span class="nx">ITEM</span> <span class="p">:</span> <span class="s">"ordered in"</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 class="mermaid align-center">
|
||
erDiagram
|
||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||
CUSTOMER ||--o{ ORDER : places
|
||
CUSTOMER ||--o{ INVOICE : "li'ble for"
|
||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||
INVOICE ||--|{ ORDER : covers
|
||
ORDER ||--|{ ORDER-ITEM : includes
|
||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||
</div>
|
||
<h3 id="user-journey">User Journey</h3>
|
||
<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">journey</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">My</span> <span class="nx">work'n</span> <span class="nx">day</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Go</span> <span class="nx">t'</span> <span class="nx">work</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Make</span> <span class="nx">tea</span><span class="p">:</span> <span class="mi">5</span><span class="p">:</span> <span class="nx">Me</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Go</span> <span class="nx">upstairs</span><span class="p">:</span> <span class="mi">3</span><span class="p">:</span> <span class="nx">Me</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Do</span> <span class="nx">work</span><span class="p">:</span> <span class="mi">1</span><span class="p">:</span> <span class="nx">Me</span><span class="p">,</span> <span class="nx">Cat</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="nx">Go</span> <span class="nx">home</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Go</span> <span class="nx">downstairs</span><span class="p">:</span> <span class="mi">5</span><span class="p">:</span> <span class="nx">Me</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Sit</span> <span class="nx">down</span><span class="p">:</span> <span class="mi">3</span><span class="p">:</span> <span class="nx">Me</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 class="mermaid align-center">
|
||
journey
|
||
title My work'n day
|
||
section Go t' work
|
||
Make tea: 5: Me
|
||
Go upstairs: 3: Me
|
||
Do work: 1: Me, Cat
|
||
section Go home
|
||
Go downstairs: 5: Me
|
||
Sit down: 3: Me
|
||
</div>
|
||
<h3 id="gantt-chart">GANTT Chart</h3>
|
||
<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 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>
|
||
<h3 id="pie-chart">Pie Chart</h3>
|
||
<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">pie</span> <span class="nx">title</span> <span class="nx">Pets</span> <span class="nx">adopted</span> <span class="nx">by</span> <span class="nx">volunteers</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"Dogs"</span> <span class="p">:</span> <span class="mi">386</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"Cats"</span> <span class="p">:</span> <span class="mi">85</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"Rats"</span> <span class="p">:</span> <span class="mi">15</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 class="mermaid align-center">
|
||
pie title Pets adopted by volunteers
|
||
"Dogs" : 386
|
||
"Cats" : 85
|
||
"Rats" : 15
|
||
</div>
|
||
<h3 id="requirement-diagram">Requirement Diagram</h3>
|
||
<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">requirementDiagram</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">requirement</span> <span class="nx">test_req</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="p">:</span> <span class="mi">1</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">text</span><span class="p">:</span> <span class="nx">th'</span> <span class="nx">test</span> <span class="nx">text</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">risk</span><span class="p">:</span> <span class="nx">high</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">verifymethod</span><span class="p">:</span> <span class="nx">test</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">element</span> <span class="nx">test_entity</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kd">type</span><span class="p">:</span> <span class="nx">simulat'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">test_entity</span> <span class="o">-</span> <span class="nx">satisfies</span> <span class="o">-</span><span class="p">></span> <span class="nx">test_req</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 class="mermaid align-center">
|
||
requirementDiagram
|
||
|
||
requirement test_req {
|
||
id: 1
|
||
text: th' test text.
|
||
risk: high
|
||
verifymethod: test
|
||
}
|
||
|
||
element test_entity {
|
||
type: simulat'n
|
||
}
|
||
|
||
test_entity - satisfies -> test_req
|
||
</div>
|
||
<h3 id="git-graph">Git Graph</h3>
|
||
<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">gitGraph</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">branch</span> <span class="nx">develop</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">checkout</span> <span class="nx">develop</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">checkout</span> <span class="nx">main</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">merge</span> <span class="nx">develop</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">commit</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 class="mermaid align-center">
|
||
gitGraph
|
||
commit
|
||
commit
|
||
branch develop
|
||
checkout develop
|
||
commit
|
||
commit
|
||
checkout main
|
||
merge develop
|
||
commit
|
||
commit
|
||
</div>
|
||
<h3 id="c4-diagrams">C4 Diagrams</h3>
|
||
<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">C4Context</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="nx">System</span> <span class="nx">Context</span> <span class="nx">diagram</span> <span class="k">fer</span> <span class="nx">Internet</span> <span class="nx">Bank'n</span> <span class="nx">System</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Enterprise_Boundary</span><span class="p">(</span><span class="nx">b0</span><span class="p">,</span> <span class="s">"BankBoundary0"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="s">"Bank'n Customer A"</span><span class="p">,</span> <span class="s">"A customer o' th' bank, wit' personal bank accounts."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerB</span><span class="p">,</span> <span class="s">"Bank'n Customer B"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person_Ext</span><span class="p">(</span><span class="nx">customerC</span><span class="p">,</span> <span class="s">"Bank'n Customer C"</span><span class="p">,</span> <span class="s">"desc"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Person</span><span class="p">(</span><span class="nx">customerD</span><span class="p">,</span> <span class="s">"Bank'n Customer D"</span><span class="p">,</span> <span class="s">"A customer o' th' bank, <br/> wit' personal bank accounts."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="s">"Internet Bank'n System"</span><span class="p">,</span> <span class="s">"Allows customers t' view informat'n about their bank accounts, an' make payments."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Enterprise_Boundary</span><span class="p">(</span><span class="nx">b1</span><span class="p">,</span> <span class="s">"BankBoundary"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemDb_Ext</span><span class="p">(</span><span class="nx">SystemE</span><span class="p">,</span> <span class="s">"Mainframe Bank'n System"</span><span class="p">,</span> <span class="s">"Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System_Boundary</span><span class="p">(</span><span class="nx">b2</span><span class="p">,</span> <span class="s">"BankBoundary2"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemA</span><span class="p">,</span> <span class="s">"Bank'n System A"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System</span><span class="p">(</span><span class="nx">SystemB</span><span class="p">,</span> <span class="s">"Bank'n System B"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts. next line."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">System_Ext</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="s">"E-mail system"</span><span class="p">,</span> <span class="s">"The internal Microsoft Exchange e-mail system."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemDb</span><span class="p">(</span><span class="nx">SystemD</span><span class="p">,</span> <span class="s">"Bank'n System D Database"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Boundary</span><span class="p">(</span><span class="nx">b3</span><span class="p">,</span> <span class="s">"BankBoundary3"</span><span class="p">,</span> <span class="s">"boundary"</span><span class="p">)</span> <span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemQueue</span><span class="p">(</span><span class="nx">SystemF</span><span class="p">,</span> <span class="s">"Bank'n System F Queue"</span><span class="p">,</span> <span class="s">"A system o' th' bank."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">SystemQueue_Ext</span><span class="p">(</span><span class="nx">SystemG</span><span class="p">,</span> <span class="s">"Bank'n System G Queue"</span><span class="p">,</span> <span class="s">"A system o' th' bank, wit' personal bank accounts."</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">BiRel</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="nx">SystemAA</span><span class="p">,</span> <span class="s">"Uses"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">BiRel</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemE</span><span class="p">,</span> <span class="s">"Uses"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Rel</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemC</span><span class="p">,</span> <span class="s">"Sends e-mails"</span><span class="p">,</span> <span class="s">"SMTP"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">Rel</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="nx">customerA</span><span class="p">,</span> <span class="s">"Sends e-mails to"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateElementStyle</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="err">$</span><span class="nx">fontColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">bgColor</span><span class="p">=</span><span class="s">"grey"</span><span class="p">,</span> <span class="err">$</span><span class="nx">borderColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">customerA</span><span class="p">,</span> <span class="nx">SystemAA</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"5"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemE</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"-10"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemAA</span><span class="p">,</span> <span class="nx">SystemC</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"blue"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"-40"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"-50"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateRelStyle</span><span class="p">(</span><span class="nx">SystemC</span><span class="p">,</span> <span class="nx">customerA</span><span class="p">,</span> <span class="err">$</span><span class="nx">textColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">lineColor</span><span class="p">=</span><span class="s">"red"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetX</span><span class="p">=</span><span class="s">"-50"</span><span class="p">,</span> <span class="err">$</span><span class="nx">offsetY</span><span class="p">=</span><span class="s">"20"</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">UpdateLayoutConfig</span><span class="p">(</span><span class="err">$</span><span class="nx">c4ShapeInRow</span><span class="p">=</span><span class="s">"3"</span><span class="p">,</span> <span class="err">$</span><span class="nx">c4BoundaryInRow</span><span class="p">=</span><span class="s">"1"</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 class="mermaid align-center">
|
||
C4Context
|
||
title System Context diagram fer Internet Bank'n System
|
||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||
Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.")
|
||
Person(customerB, "Bank'n Customer B")
|
||
Person_Ext(customerC, "Bank'n Customer C", "desc")
|
||
|
||
Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.")
|
||
|
||
System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.")
|
||
|
||
Enterprise_Boundary(b1, "BankBoundary") {
|
||
|
||
SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.")
|
||
|
||
System_Boundary(b2, "BankBoundary2") {
|
||
System(SystemA, "Bank'n System A")
|
||
System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.")
|
||
}
|
||
|
||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||
SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.")
|
||
|
||
Boundary(b3, "BankBoundary3", "boundary") {
|
||
SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.")
|
||
SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' personal bank accounts.")
|
||
}
|
||
}
|
||
}
|
||
|
||
BiRel(customerA, SystemAA, "Uses")
|
||
BiRel(SystemAA, SystemE, "Uses")
|
||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||
Rel(SystemC, customerA, "Sends e-mails to")
|
||
|
||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||
|
||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||
</div>
|
||
<h3 id="mindmap">Mindmap</h3>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>As o' Merrrmaid version 9.2.2 this diagram type be not included 'n th' official distribut'n an' will not be use'ble 'n this theme.</p>
|
||
</div>
|
||
</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="nx">mermaid</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nx">mindmap</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nf">root</span><span class="p">((</span><span class="nx">mindmap</span><span class="p">))</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Origins</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Long</span> <span class="nx">history</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">::</span><span class="nf">ay'con</span><span class="p">(</span><span class="nx">fa</span> <span class="nx">fa</span><span class="o">-</span><span class="nx">book</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Popularisat'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">British</span> <span class="nx">popular</span> <span class="nx">psychology</span> <span class="nx">author</span> <span class="nx">Tony</span> <span class="nx">Buzan</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Research</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">On</span> <span class="nx">effectivness</span><span class="p"><</span><span class="nx">br</span><span class="o">/</span><span class="p">></span><span class="nx">an'</span> <span class="nx">features</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">On</span> <span class="nx">Automatic</span> <span class="nx">creat'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Uses</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Creative</span> <span class="nx">techniques</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Strategic</span> <span class="nx">plann'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Argument</span> <span class="nx">mapp'n</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Tools</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Pen</span> <span class="nx">an'</span> <span class="nx">paper</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Merrrmaid</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 class="mermaid align-center">
|
||
mindmap
|
||
root((mindmap))
|
||
Origins
|
||
Long history
|
||
::icon(fa fa-book)
|
||
Popularisat'n
|
||
British popular psychology author Tony Buzan
|
||
Research
|
||
On effectivness<br/>and features
|
||
On Automatic creat'n
|
||
Uses
|
||
Creative techniques
|
||
Strategic plann'n
|
||
Argument mapp'n
|
||
Tools
|
||
Pen an' paper
|
||
Merrrmaid
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="notice">Notice</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>notice</code> shorrrtcode shows various types o' disclaimers wit' adjust'ble color, title an' ay'con t' help ye structure yer plank.</p>
|
||
|
||
<div class="box notices cstyle primary">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> There may be pirates</div>
|
||
<div class="box-content">
|
||
<p>It be all about th' boxes.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional as well or also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="shortcode (positional)"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','shortcode (positional)')"
|
||
><span>shorrrtcode (positional)</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"There may be pirates"</span> <span class="nx">ay'con</span><span class="p">=</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">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</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 data-tab-item="shortcode (positional)" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">primary</span> <span class="s">"There may be pirates"</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">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</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 data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/notice.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"style"</span> <span class="s">"primary"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"title"</span> <span class="s">"There may be pirates"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"skull-crossbones"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="s">"It be all about th' boxes."</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Posit'n</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>style</strong></td>
|
||
<td style="text-align:left">1</td>
|
||
<td style="text-align:left"><code>default</code></td>
|
||
<td style="text-align:left">Th' color scheme used t' highlight th' box rrrambl'n.<br><br>- by severity: <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code><br>- by color: <code>blue</code>, <code>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><strong>title</strong></td>
|
||
<td style="text-align:left">2</td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left">Arbitrary text fer th' box title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other colors: <em><empty></em><br><br>If ye want no title fer a severity style, 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"><strong>ay'con</strong></td>
|
||
<td style="text-align:left">3</td>
|
||
<td style="text-align:left">see notes</td>
|
||
<td style="text-align:left"><a href="../../cont/icons/#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other colors: <em><empty></em><br><br>If ye want no ay'con fer a severity style, 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"><em><strong><content></strong></em></td>
|
||
<td style="text-align:left"></td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Arbitrary text t' be displayed 'n box.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="by-severity">By Severity</h3>
|
||
<h4 id="info-with-markup">Ahoi wit' marrrkup</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"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="nx">standard</span> <span class="nx">markdown</span> <span class="nx">rules</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">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">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</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 class="box notices cstyle info">
|
||
<div class="box-label"><i class="fa-fw fas fa-info-circle"></i> Ahoi</div>
|
||
<div class="box-content">
|
||
<p>An <strong>informat'n</strong> disclaimer</p>
|
||
<p>Ye can add standard markdown rules:</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>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' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
<h4 id="note">Avast</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"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 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 class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>A <strong>notice</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="tip">Smarrrt Arrrse</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"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></code></pre></div>
|
||
<div class="box notices cstyle tip">
|
||
<div class="box-label"><i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse</div>
|
||
<div class="box-content">
|
||
<p>A <strong>tip</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="warning">Arrr</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"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 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 class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Arrr</div>
|
||
<div class="box-content">
|
||
<p>A <strong>warning</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="warning-with-non-default-title-and-icon">Arrr wit' Non-Default Title an' Ay'con</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"warning"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Here be dragons"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"dragon"</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 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 class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-dragon"></i> Here be dragons</div>
|
||
<div class="box-content">
|
||
<p>A <strong>warning</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="warning-without-a-title-and-icon">Arrr without a Title an' Ay'con</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"warning"</span> <span class="nx">title</span><span class="p">=</span><span class="s">" "</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">" "</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 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 class="box notices cstyle warning">
|
||
<div class="box-label"> </div>
|
||
<div class="box-content">
|
||
<p>A <strong>warning</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-brand-colors">By Brand Colors</h3>
|
||
<h4 id="primary-with-title-only">Primary wit' Title only</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"primary"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Primary"</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">primary</span><span class="o">**</span> <span class="nx">disclaimer</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 class="box notices cstyle primary">
|
||
<div class="box-label">Primary</div>
|
||
<div class="box-content">
|
||
<p>A <strong>primary</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="secondary-with-icon-only">Secondary wit' Ay'con only</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"secondary"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"stopwatch"</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">secondary</span><span class="o">**</span> <span class="nx">disclaimer</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 class="box notices cstyle secondary">
|
||
<div class="box-label"><i class="fa-fw fas fa-stopwatch"></i> </div>
|
||
<div class="box-content">
|
||
<p>A <strong>secondary</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-color">By Color</h3>
|
||
<h4 id="blue-without-a-title-and-icon">Blue without a Title an' Ay'con</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">notice</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><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">blue</span><span class="o">**</span> <span class="nx">disclaimer</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 class="box notices cstyle blue">
|
||
<div class="box-label"></div>
|
||
<div class="box-content">
|
||
<p>A <strong>blue</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="green-with-title-only">Green wit' Title only</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"green"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Green"</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">green</span><span class="o">**</span> <span class="nx">disclaimer</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 class="box notices cstyle green">
|
||
<div class="box-label">Green</div>
|
||
<div class="box-content">
|
||
<p>A <strong>green</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="grey-with-icon-only">Grey wit' Ay'con only</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"grey"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bug"</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">grey</span><span class="o">**</span> <span class="nx">disclaimer</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 class="box notices cstyle grey">
|
||
<div class="box-label"><i class="fa-fw fas fa-bug"></i> </div>
|
||
<div class="box-content">
|
||
<p>A <strong>grey</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="orange-with-title-and-icon">Orange wit' Title an' Ay'con</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"orange"</span> <span class="nx">title</span><span class="p">=</span><span class="s">"Orange"</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">"bug"</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">orange</span><span class="o">**</span> <span class="nx">disclaimer</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 class="box notices cstyle orange">
|
||
<div class="box-label"><i class="fa-fw fas fa-bug"></i> Orange</div>
|
||
<div class="box-content">
|
||
<p>A <strong>orange</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="red">Red</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"red"</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">red</span><span class="o">**</span> <span class="nx">disclaimer</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 class="box notices cstyle red">
|
||
<div class="box-label"></div>
|
||
<div class="box-content">
|
||
<p>A <strong>red</strong> disclaimer</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="by-special-color">By Special Color</h3>
|
||
<h4 id="default-with-title-and-icon">Default wit' Title an' Ay'con</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"default"</span> <span class="nx">title</span><span class="s">"Pay Attent'n t' this Avast!"</span> <span class="nx">ay'con</span><span class="p">=</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">Some</span> <span class="nx">serious</span> <span class="nx">informat'n</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 class="box notices cstyle default">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Pay Attent'n t' this Avast!</div>
|
||
<div class="box-content">
|
||
<p>Some serious informat'n.</p>
|
||
</div>
|
||
</div>
|
||
<h4 id="transparent-with-title-and-icon">Transparent wit' Title an' Ay'con</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">"transparent"</span> <span class="nx">title</span><span class="s">"Pay Attent'n t' this Avast!"</span> <span class="nx">ay'con</span><span class="p">=</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">Some</span> <span class="nx">serious</span> <span class="nx">informat'n</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 class="box notices cstyle transparent">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Pay Attent'n t' this Avast!</div>
|
||
<div class="box-content">
|
||
<p>Some serious informat'n.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="ship-param">Ship param</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>siteparam</code> shorrrtcode prints values o' ship params.</p>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional aswell or call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="shortcode (positional)"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','shortcode (positional)')"
|
||
><span>shorrrtcode (positional)</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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="nx">name</span><span class="p">=</span><span class="s">"editURL"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="shortcode (positional)" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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="s">"editURL"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
<div data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/siteparam.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"name"</span> <span class="s">"editURL"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Posit'n</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>name</strong></td>
|
||
<td style="text-align:left">1</td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Th' name o' th' ship param t' be displayed.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="editurl-from-configtoml"><code>editURL</code> from <code>config.toml</code></h3>
|
||
<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="nx">name</span><span class="p">=</span><span class="s">"editURL"</span> <span class="o">%</span><span class="p">}}</span>
|
||
</span></span></code></pre></div><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 class="default">
|
||
<h1 id="swaggerrr">Swaggerrr</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>This shorrrtcode uses th' <a href="https://mrin9.github.io/RapiDoc">RapiDoc</a> library t' display yer Swagger / OpenAPI Specificat'ns.</p>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>This only works 'n modern browsers.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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>
|
||
</div>
|
||
<div data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/swagger.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"src"</span> <span class="s">"https://petstore3.swagger.io/api/v3/openapi.json"</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>src</strong></td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Th' URL t' th' OpenAPI Specificat'n file. This can be relative t' th' URL o' yer plank if it be a leaf or branch bundle.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>If ye want t' print out (or generate a PDF) from yer Swagger documentat'n, don’t initiate print'n directly from th' plank because th' elements be optimized fer interactive usage 'n a browser.</p>
|
||
<p>Instead, open th' <a href="../../basics/configuration/#activate-print-support">print preview</a> 'n yer browser an' initiate print'n from that plank. This plank be optimized fer read'n an' expands most o' th' avail'ble sections.</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="global-configuration-file">Global Configurat'n File</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="example">Example</h2>
|
||
<h3 id="using-local-file">Us'n Local File</h3>
|
||
<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>
|
||
<rapi-doc
|
||
allow-spec-file-download="true"
|
||
allow-server-selection="true"
|
||
allow-try="true"
|
||
font-size="largest"
|
||
render-style="view"
|
||
default-schema-tab="example"
|
||
layout="column"
|
||
load-fonts="false"
|
||
schema-description-expanded="true"
|
||
schema-style="table"
|
||
show-header="false"
|
||
spec-url="../../shortcodes/swagger/petstore.json"
|
||
sort-tags="true"
|
||
></rapi-doc>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="default">
|
||
<h1 id="tabbed-views">Tabbed views</h1>
|
||
|
||
|
||
<div class="box notices cstyle warning">
|
||
<div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> Arrr! Pirrrates</div>
|
||
<div class="box-content">
|
||
<p>Fello' pirrates, be awarrre <b>some stuff may not work</b> fer us in this trrranslat'n. Like <b>table of rrramblings</b>, see'ng <b>Merrrmaids</b>, do'ng <b>math or chemistrrry</b> and stuff.</p> </div>
|
||
</div>
|
||
|
||
<p>Th' <code>tabs</code> shorrrtcode displays arbitrary rrrambl'n 'n unlimited number o' tabs. This comes 'n handy eg. fer provid'n code snippets fer multiple languages or provid'n configurat'n 'n different formats.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="python"
|
||
data-tab-group="tabs-example-language"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('tabs-example-language','python')"
|
||
><span>python</span></button>
|
||
<button
|
||
data-tab-item="bash"
|
||
data-tab-group="tabs-example-language"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('tabs-example-language','bash')"
|
||
><span>bash</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="python" data-tab-group="tabs-example-language" 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="bash" data-tab-group="tabs-example-language" 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="usage">Usage</h2>
|
||
<p>While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shorrrtcode from yer own partials.</p>
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="shortcode"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('shortcode-parameter','shortcode')"
|
||
><span>shorrrtcode</span></button>
|
||
<button
|
||
data-tab-item="partial"
|
||
data-tab-group="shortcode-parameter"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('shortcode-parameter','partial')"
|
||
><span>partial</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="shortcode" data-tab-group="shortcode-parameter" class="tab-item active">
|
||
<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">"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>
|
||
</div>
|
||
<div data-tab-item="partial" data-tab-group="shortcode-parameter" class="tab-item ">
|
||
<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">partial</span> <span class="s">"shortcodes/tabs.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"context"</span> <span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"tabs"</span> <span class="p">(</span><span class="nf">slice</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"name"</span> <span class="s">"python"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="p">(</span><span class="s">"```python\nprint(\"Hello World!\")\n```"</span> <span class="p">|</span> <span class="nx">markdownify</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="nx">dict</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"name"</span> <span class="s">"bash"</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="s">"content"</span> <span class="p">(</span><span class="s">"```bash\necho \"Hello World!\"\n```"</span> <span class="p">|</span> <span class="nx">markdownify</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">)}}</span>
|
||
</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h3 id="parameter">Parameter</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">Name</th>
|
||
<th style="text-align:left">Default</th>
|
||
<th style="text-align:left">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left"><strong>groupid</strong></td>
|
||
<td style="text-align:left"><code>default</code></td>
|
||
<td style="text-align:left">Arbitrary name o' th' group th' tab view belongs t'.<br><br>Tab views wit' th' same <strong>groupid</strong> sychr'nize their selected tab. This sychronizat'n applies t' th' whole ship!</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left"><em><strong><content></strong></em></td>
|
||
<td style="text-align:left"><em><empty></em></td>
|
||
<td style="text-align:left">Arbitrary number o' tabs defined wit' th' <code>tab</code> sub-shortcode.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="box notices cstyle note">
|
||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
||
<div class="box-content">
|
||
<p>When us'n tab views wit' different rrrambl'n sets, make sure t' use a common <code>groupid</code> fer equal sets o' tabs but distinct <code>groupid</code> fer different sets.</p>
|
||
<p>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 th' first tab be selected instead.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="examples">Examples</h2>
|
||
<h3 id="distinct-groupid">Distinct <code>groupid</code></h3>
|
||
<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>
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="json"
|
||
data-tab-group="tabs-example-config"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('tabs-example-config','json')"
|
||
><span>json</span></button>
|
||
<button
|
||
data-tab-item="XML"
|
||
data-tab-group="tabs-example-config"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('tabs-example-config','XML')"
|
||
><span>XML</span></button>
|
||
<button
|
||
data-tab-item="properties"
|
||
data-tab-group="tabs-example-config"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('tabs-example-config','properties')"
|
||
><span>properties</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="json" data-tab-group="tabs-example-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="tabs-example-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="tabs-example-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>
|
||
<h3 id="non-distinct-groupid">Non-Distinct <code>groupid</code></h3>
|
||
<p>See what happens t' this tab view if ye select <strong>properties</strong> tab from th' previous example.</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">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">tabs</span> <span class="p">>}}</span>
|
||
</span></span></code></pre></div>
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="json"
|
||
data-tab-group="tabs-example-config"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('tabs-example-config','json')"
|
||
><span>json</span></button>
|
||
<button
|
||
data-tab-item="XML"
|
||
data-tab-group="tabs-example-config"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('tabs-example-config','XML')"
|
||
><span>XML</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="json" data-tab-group="tabs-example-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="tabs-example-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>
|
||
</div>
|
||
<h3 id="nested-tabs">Nested Tabs</h3>
|
||
<p>In case ye want t' nest tabs, th' parent tab that contains th' subtabs needs t' be declared wit' <code>{{< tab >}}</code> instead o' <code>{{% tab %}}</code>. Avast, that 'n this case it be not poss'ble t' put markdown 'n th' parent tab.</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">tabs</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">"main"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"Text"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="nx">Simple</span> <span class="nx">text</span> <span class="nx">be</span> <span class="nx">poss'ble</span> <span class="nx">here</span><span class="o">...</span>
|
||
</span></span><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">"tabs-example-language"</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="nx">Python</span> <span class="nx">be</span> <span class="o">**</span><span class="nx">super</span><span class="o">**</span> <span class="nx">easy</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">most</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">time</span><span class="p">.</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="o">-</span> <span class="k">if</span> <span class="nx">ye</span> <span class="nx">don</span><span class="err">'</span><span class="nx">t</span> <span class="nx">want</span> <span class="nx">t'</span> <span class="nx">output</span> <span class="nx">unicode</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="nx">Bash</span> <span class="nx">be</span> <span class="k">fer</span> <span class="o">**</span><span class="nx">hackers</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="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><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tab</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p">{{<</span> <span class="nx">tab</span> <span class="nx">name</span><span class="p">=</span><span class="s">"Code"</span> <span class="p">>}}</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="o">...</span><span class="nx">but</span> <span class="nx">no</span> <span class="nx">markdown</span>
|
||
</span></span><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">"tabs-example-language"</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">"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><span class="line"><span class="cl"><span class="p">{{<</span> <span class="o">/</span><span class="nx">tab</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>
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="Text"
|
||
data-tab-group="main"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('main','Text')"
|
||
><span>Text</span></button>
|
||
<button
|
||
data-tab-item="Code"
|
||
data-tab-group="main"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('main','Code')"
|
||
><span>Code</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="Text" data-tab-group="main" class="tab-item active">
|
||
|
||
Simple text be poss'ble here...
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="python"
|
||
data-tab-group="tabs-example-language"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('tabs-example-language','python')"
|
||
><span>python</span></button>
|
||
<button
|
||
data-tab-item="bash"
|
||
data-tab-group="tabs-example-language"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('tabs-example-language','bash')"
|
||
><span>bash</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="python" data-tab-group="tabs-example-language" class="tab-item active">
|
||
<p>Python be <strong>super</strong> easy.</p>
|
||
<ul>
|
||
<li>most o' th' time.</li>
|
||
<li>if ye don’t want t' output unicode</li>
|
||
</ul>
|
||
|
||
</div>
|
||
<div data-tab-item="bash" data-tab-group="tabs-example-language" class="tab-item ">
|
||
<p>Bash be fer <strong>hackers</strong>.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div data-tab-item="Code" data-tab-group="main" class="tab-item ">
|
||
|
||
...but no markdown
|
||
|
||
<div class="tab-panel">
|
||
<div class="tab-nav">
|
||
<button
|
||
data-tab-item="python"
|
||
data-tab-group="tabs-example-language"
|
||
class="tab-nav-button direction-ltr active"
|
||
onclick="switchTab('tabs-example-language','python')"
|
||
><span>python</span></button>
|
||
<button
|
||
data-tab-item="bash"
|
||
data-tab-group="tabs-example-language"
|
||
class="tab-nav-button direction-ltr "
|
||
onclick="switchTab('tabs-example-language','bash')"
|
||
><span>bash</span></button>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div data-tab-item="python" data-tab-group="tabs-example-language" 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="bash" data-tab-group="tabs-example-language" 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>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="footline">
|
||
</footer>
|
||
</article>
|
||
|
||
</section> </div>
|
||
</main>
|
||
</div>
|
||
<script src="../../js/clipboard.min.js?1669750902" defer></script>
|
||
<script src="../../js/perfect-scrollbar.min.js?1669750902" defer></script>
|
||
<script src="../../js/featherlight.min.js?1669750902" defer></script>
|
||
<script src="../../js/theme.js?1669750902" defer></script>
|
||
</body>
|
||
</html>
|