mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-28 11:13:18 +00:00
570 lines
61 KiB
HTML
570 lines
61 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pir" dir="rtl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<meta name="generator" content="Hugo 0.120.4">
|
|
<meta name="generator" content="Relearn 5.23.2+tip">
|
|
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
|
<meta name="author" content="Sören Weber">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta name="twitter:title" content="Customizat'n :: Cap'n Hugo Relearrrn Theme">
|
|
<meta name="twitter:description" content="Documentation for Hugo Relearn Theme">
|
|
<meta property="og:title" content="Customizat'n :: Cap'n Hugo Relearrrn Theme">
|
|
<meta property="og:description" content="Documentation for Hugo Relearn Theme">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html">
|
|
<meta property="og:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta property="og:site_name" content="Cap'n Hugo Relearrrn Theme">
|
|
<title>Customizat'n :: Cap'n Hugo Relearrrn Theme</title>
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel="alternate" hreflang="x-default">
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel="alternate" hreflang="en">
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
|
|
<link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat'n :: Cap'n Hugo Relearrrn Theme">
|
|
<link href="../../../pir/basics/customization/index.print.html" rel="alternate" type="text/html" title="Customizat'n :: Cap'n Hugo Relearrrn Theme">
|
|
<link href="../../../images/logo.svg?1700355409" 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?1700355409" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700355409" rel="stylesheet"></noscript>
|
|
<link href="../../../css/nucleus.css?1700355409" rel="stylesheet">
|
|
<link href="../../../css/auto-complete.css?1700355409" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700355409" rel="stylesheet"></noscript>
|
|
<link href="../../../css/perfect-scrollbar.min.css?1700355409" rel="stylesheet">
|
|
<link href="../../../css/fonts.css?1700355409" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700355409" rel="stylesheet"></noscript>
|
|
<link href="../../../css/theme.css?1700355409" rel="stylesheet">
|
|
<link href="../../../css/theme-auto.css?1700355409" rel="stylesheet" id="R-variant-style">
|
|
<link href="../../../css/variant.css?1700355409" rel="stylesheet">
|
|
<link href="../../../css/print.css?1700355409" rel="stylesheet" media="print">
|
|
<link href="../../../css/ie.css?1700355409" rel="stylesheet">
|
|
<script src="../../../js/url.js?1700355409"></script>
|
|
<script src="../../../js/variant.js?1700355409"></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(/\/$/, '');
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
|
|
// variant stuff
|
|
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
|
// translations
|
|
window.T_Copy_to_clipboard = `Copy t' clipboard`;
|
|
window.T_Copied_to_clipboard = `Copied t' clipboard!`;
|
|
window.T_Copy_link_to_clipboard = `Copy link t' clipboard`;
|
|
window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`;
|
|
window.T_Reset_view = `Rrreset view`;
|
|
window.T_View_reset = `View rrreset!`;
|
|
window.T_No_results_found = `No rrresults found fer "{0}"`;
|
|
window.T_N_results_found = `{1} rrresults found fer "{0}"`;
|
|
</script>
|
|
<style>
|
|
#R-body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/customization/index.html">
|
|
<div id="R-body" class="default-animation">
|
|
<div id="R-body-overlay"></div>
|
|
<nav id="R-topbar">
|
|
<div class="topbar-wrapper">
|
|
<div class="topbar-sidebar-divider"></div>
|
|
<div class="topbar-area topbar-area-start" data-area="start">
|
|
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide">
|
|
<button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)">
|
|
<i class="fa-fw fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show">
|
|
<button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o' Contents (CTRL+ALT+t)">
|
|
<i class="fa-fw fas fa-list-alt"></i>
|
|
</button>
|
|
<div class="topbar-content">
|
|
<div class="topbar-content-wrapper">
|
|
<nav class="TableOfContents">
|
|
<ul>
|
|
<li><a href="#change-the-logo">Change th' Logo</a></li>
|
|
<li><a href="#change-the-favicon">Change th' Favicon</a></li>
|
|
<li><a href="#change-the-menu-width">Change th' Menu Width</a></li>
|
|
<li><a href="#theme-variant">Change th' Colors</a>
|
|
<ul>
|
|
<li><a href="#single-variant">Single Variant</a></li>
|
|
<li><a href="#multiple-variants">Multiple Variants</a></li>
|
|
<li><a href="#adjust-to-os-settings">Adjust t' OS Sett'ns</a></li>
|
|
<li><a href="#javascript">JavaScript</a></li>
|
|
<li><a href="#roll-your-own">Roll yer Own</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#own-shortcodes-with-javascript-dependencies">Own Shorrrtcodes wit' JavaScript Dependencies</a></li>
|
|
<li><a href="#output-formats">Output Formats</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Customizat'n</span><meta itemprop="position" content="2"></li>
|
|
</ol>
|
|
<div class="topbar-area topbar-area-end" data-area="end">
|
|
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show">
|
|
<a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.pir.md" target="_blank" title="Edit (CTRL+ALT+w)">
|
|
<i class="fa-fw fas fa-pen"></i>
|
|
</a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show">
|
|
<a class="topbar-control" href="../../../pir/basics/customization/index.print.html" title="Prrrint whole chapterrr (CTRL+ALT+p)">
|
|
<i class="fa-fw fas fa-print"></i>
|
|
</a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show">
|
|
<a class="topbar-control" href="../../../pir/basics/configuration/index.html" title="Configurrrat'n (🡒)">
|
|
<i class="fa-fw fas fa-chevron-left"></i>
|
|
</a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show">
|
|
<a class="topbar-control" href="../../../pir/basics/generator/index.html" title="Stylesheet generrrat'r (🡐)">
|
|
<i class="fa-fw fas fa-chevron-right"></i>
|
|
</a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show">
|
|
<button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Morrre">
|
|
<i class="fa-fw fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<div class="topbar-content">
|
|
<div class="topbar-content-wrapper">
|
|
<div class="topbar-area topbar-area-more" data-area="more">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div id="R-main-overlay"></div>
|
|
<main id="R-body-inner" class="highlightable default" tabindex="-1">
|
|
<div class="flex-block-wrapper">
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
<h1 id="customizatn">Customizat'n</h1>
|
|
|
|
|
|
<p>Th' Relearrrn theme has been built t' be as configur'ble as poss'ble by defin'n multiple <a href="https://gohugo.io/templates/partials/" target="_blank">partials</a></p>
|
|
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, ye will find all th' partials defined fer this theme. If ye need t' overwrite someth'n, don’t change th' code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this plank</a>. You’d create a new partial 'n th' <code>layouts/partials</code> folder o' yer local project. This partial will have th' priority.</p>
|
|
<p>This theme defines th' follow'n partials :</p>
|
|
<ul>
|
|
<li><code>header.html</code>: th' header o' th' plank. See <a href="#output-formats">output-formats</a></li>
|
|
<li><code>footer.html</code>: th' footer o' th' plank. See <a href="#output-formats">output-formats</a></li>
|
|
<li><code>body.html</code>: th' body o' th' plank. Th' body may contain o' one or many articles. See <a href="#output-formats">output-formats</a></li>
|
|
<li><code>article.html</code>: th' output fer a single article, can contain elements around yer rrrambl'n. See <a href="#output-formats">output-formats</a></li>
|
|
<li><code>menu.html</code>: left menu. <em>Not meant t' be overwritten</em></li>
|
|
<li><code>search.html</code>: search box. <em>Not meant t' be overwritten</em></li>
|
|
<li><code>custom-header.html</code>: custom headers 'n plank. Meant t' be overwritten when add'n CSS imports. Don’t forget t' include <code>style</code> HTML tag directive 'n yer file.</li>
|
|
<li><code>custom-footer.html</code>: custom footer 'n plank. Meant t' be overwritten when add'n JavaScript. Don’t forget t' include <code>javascript</code> HTML tag directive 'n yer file.</li>
|
|
<li><code>favicon.html</code>: th' favicon</li>
|
|
<li><code>heading-pre.html</code>: side-wide configurat'n t' prepend t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s <code>headingPre</code> sett'n into account.</li>
|
|
<li><code>heading-post.html</code>: side-wide configurat'n t' append t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s <code>headingPost</code> sett'n into account.</li>
|
|
<li><code>logo.html</code>: th' logo, on top left hand corner</li>
|
|
<li><code>meta.html</code>: HTML meta tags, if ye want t' change default behavior</li>
|
|
<li><code>menu-pre.html</code>: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsibility t' take th' page’s <code>menuPre</code> sett'n into account.</li>
|
|
<li><code>menu-post.html</code>: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsibility t' take th' page’s <code>menuPost</code> sett'n into account.</li>
|
|
<li><code>menu-footer.html</code>: footer o' th' the left menu</li>
|
|
<li><code>toc.html</code>: t'ble o' contents</li>
|
|
<li><code>rrrambl'n.html</code>: th' rrrambl'n plank itself. This can be overridden if ye want t' display page’s meta data above or below th' rrrambl'n.</li>
|
|
<li><code>content-header.html</code>: header above th' title, has a default implementat'n but ye can overwrite it if ye don’t like it.</li>
|
|
<li><code>content-footer.html</code>: footer below th' rrrambl'n, has a default implementat'n but ye can overwrite it if ye don’t like it.</li>
|
|
</ul>
|
|
<h2 id="change-the-logo">Change th' Logo</h2>
|
|
<p>Create a new file 'n <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML ye want.
|
|
Ye could use an <code>img</code> HTML tag an' reference an image created under th' <em>static</em> folder, or ye could paste a SVG definit'n!</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>Th' size o' th' logo will adapt automatically</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="change-the-favicon">Change th' Favicon</h2>
|
|
<p>If yer favicon be a SVG, PNG or ICO, just drop off yer image 'n yer local <code>static/images/</code> folder an' name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
|
|
<p>Additionally, if ye want yer ship t' use light & dark theme favicons that follow th' OS’ (and 'n some cases, th' browser’s) color scheme, add th' image files t' yer local <code>static/images/</code> folder an' name them eg. <code>favicon-light.svg</code> and/or <code>favicon-dark.svg</code> respectively correspond'n t' yer file format. In case one o' th' files be miss'n, th' theme falls back t' eg. <code>favicon.svg</code> fer th' miss'n file. All supplied favicons must be o' th' same file format.</p>
|
|
|
|
<div class="box notices cstyle warning">
|
|
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Arrr</div>
|
|
<div class="box-content">
|
|
|
|
<p>IE an' old browser versions do not support <a href="https://caniuse.com/css-media-interaction" target="_blank">media queries</a>, which be necessary fer th' light & dark theme favicon opt'n.
|
|
If ye have requirements t' support IE and/or older browser versions, use one o' th' other opt'ns.</p>
|
|
</div>
|
|
</div>
|
|
<p>If no favicon file be found, th' theme will lookup th' alternative filename <code>logo</code> 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.</p>
|
|
<p>If ye need t' change this default behavior, create a new file 'n <code>layouts/partials/</code> named <code>favicon.html</code>. Then write someth'n like this:</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/images/favicon.bmp"</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/bmp"</span><span class="p">></span></span></span></code></pre></div><h2 id="change-the-menu-width">Change th' Menu Width</h2>
|
|
<p>Th' menu width adjusts automatically fer different screen sizes.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Screen Width</th>
|
|
<th>Menu Width</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>S</td>
|
|
<td>< 48rem</td>
|
|
<td>0</td>
|
|
</tr>
|
|
<tr>
|
|
<td>M</td>
|
|
<td>48rem - 60rem</td>
|
|
<td>14.375rem</td>
|
|
</tr>
|
|
<tr>
|
|
<td>L</td>
|
|
<td>>= 60rem</td>
|
|
<td>18.75rem</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Th' values fer th' screen width breakpoints aren’t configur'ble.</p>
|
|
<p>If ye want t' adjust th' menu width ye can define th' follow'n CSS variables 'n yer <code>custom-header.html</code>. Avast that <code>--MENU-WIDTH-S</code> doesn’t exist as th' menu be always hidden fer small screen sizes.</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nv">--MENU-WIDTH-M</span><span class="p">:</span> <span class="mf">14.375</span><span class="kt">rem</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nv">--MENU-WIDTH-L</span><span class="p">:</span> <span class="mf">18.75</span><span class="kt">rem</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div><h2 id="theme-variant">Change th' Colors</h2>
|
|
<p>Th' Relearrrn theme lets ye choose between some predefined color variants 'n light or dark mode, but feel free t' add one yourself!</p>
|
|
<p>Ye can preview th' shipped variants by chang'n them 'n th' variant selector at th' bottom o' th' menu.</p>
|
|
<h3 id="single-variant">Single Variant</h3>
|
|
<p>Set th' <code>themeVariant</code> value wit' th' name o' yer theme file. That’s it!</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">"relearn-light"</span></span></span></code></pre></div><p>In th' above example yer theme file has t' be named <code>theme-relearn-light.css</code></p>
|
|
<h3 id="multiple-variants">Multiple Variants</h3>
|
|
<p>Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant switch will be shown 'n th' menu footer.</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="c"># Change default color scheme wit' a variant one.</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">"relearn-light"</span><span class="p">,</span> <span class="s2">"relearn-dark"</span> <span class="p">]</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>If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">accord'n t' Hugo’s documentat'n</a>, an' <code>@import</code> this stylesheet 'n yer color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> an' <code>config.toml</code> o' th' exampleSite.</p>
|
|
</div>
|
|
</div>
|
|
<h3 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h3>
|
|
<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That’s it.</p>
|
|
<p>If you’ve set multiple variants, ye can drop <code>auto</code> at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">"auto"</span><span class="p">,</span> <span class="s2">"red"</span> <span class="p">]</span></span></span></code></pre></div><p>If ye don’t configure anyth'n else, th' theme will use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode.</p>
|
|
<p>If ye don’t like that, ye can set <code>themeVariantAuto</code>. Th' first element be th' variant fer light mode, th' second fer dark mode</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">"learn"</span><span class="p">,</span> <span class="s2">"neon"</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>This be not supported fer Internet Explorer 11, which still displays 'n th' <code>relearn-light</code> variant.</p>
|
|
</div>
|
|
</div>
|
|
<h3 id="javascript">JavaScript</h3>
|
|
<p>Once a variant be fully boarded, either initially or by switch'n th' variant manually wit' th' variant selector, th' custom event <code>themeVariantLoaded</code> on th' <code>document</code> will be dispatched. Ye can add an event listener an' react t' changes.</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span> <span class="s1">'themeVariantLoaded'</span><span class="p">,</span> <span class="kd">funct'n</span><span class="p">(</span> <span class="nx">e</span> <span class="p">){</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">detail</span><span class="p">.</span><span class="nx">variant</span> <span class="p">);</span> <span class="c1">// `relearn-light`
|
|
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span></span></span></code></pre></div><h3 id="roll-your-own">Roll yer Own</h3>
|
|
<p>If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from <code>themes/hugo-theme-relearn/static/css</code> t' <code>static/css</code>, edit them afterwards t' yer lik'n 'n a text editor an' configure th' <code>themeVariant</code> parameter 'n yer <code>config.toml</code> or just use th' <a href="../../../basics/generator/index.html">interactive variant generator</a>.</p>
|
|
<h2 id="own-shortcodes-with-javascript-dependencies">Own Shorrrtcodes wit' JavaScript Dependencies</h2>
|
|
<p>Certain shorrrtcodes make use o' additional JavaScript files. Th' theme only loads these dependencies if th' shortcode be used. T' do so correctly th' theme adds management code 'n various files. T' provide this behavior t' th' user an' extend'n it fer his own shorrrtcodes this can be configured.</p>
|
|
<p>Say ye want t' add a shortcode <code>myshortcode</code> that also requires th' <code>jquery</code> JavaScript library.</p>
|
|
<ol>
|
|
<li>
|
|
<p>Write th' shortcode file <code>layouts/shortcodes/myshortcode.html</code> an' add th' follow'n line</p>
|
|
<div class="wrap-code 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="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">Set</span> <span class="s">"hasMyShortcode"</span> <span class="kc">true</span> <span class="p">}}</span></span></span></code></pre></div></li>
|
|
<li>
|
|
<p>Add th' follow'n snippet t' yer <code>config.toml</code></p>
|
|
<div class="wrap-code 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">params</span><span class="p">.</span><span class="nx">relearn</span><span class="p">.</span><span class="nx">dependencies</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">relearn</span><span class="p">.</span><span class="nx">dependencies</span><span class="p">.</span><span class="nx">myshortcode</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s">"MyShortcode"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">locat'n</span> <span class="p">=</span> <span class="s">"footer"</span></span></span></code></pre></div></li>
|
|
<li>
|
|
<p>Add th' dependency loader file <code>layouts/partials/dependencies/myshortcode.html</code>. Th' loader file will be appended t' yer header or footer, dependend on th' <code>locat'n</code> sett'n 'n yer <code>config.toml</code>.</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.unpkg.com/jquery/dist/jquery.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span></span></span></code></pre></div></li>
|
|
</ol>
|
|
<p>Character cas'n be relevant!</p>
|
|
<ul>
|
|
<li>th' <code>name</code> sett'n 'n yer <code>config.toml</code> must match th' key (that needs t' be prefixed wit' a <code>has</code>) ye used fer th' store 'n yer <code>layouts/shortcodes/myshortcode.html</code>.</li>
|
|
<li>th' key on <code>params.relearn.dependencies</code> 'n yer <code>config.toml</code> must match th' base file name o' yer loader file.</li>
|
|
</ul>
|
|
<p>See th' <code>math</code>, <code>mermaid</code> an' <code>openapi</code> shorrrtcodes fer examples.</p>
|
|
<h2 id="output-formats">Output Formats</h2>
|
|
<p>Certain parts o' th' theme can be changed fer support o' yer own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if ye define a new output format <code>PLAINTEXT</code> 'n yer <code>config.toml</code>, ye can add a file <code>layouts/partials/header.plaintext.html</code> t' change th' way, th' plank header should look like fer that output format.</p>
|
|
|
|
|
|
<footer class="footline">
|
|
<div class=" taxonomy-categories term-list cstyle " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<i class="fa-fw fas fa-layer-group"></i>
|
|
<ul>
|
|
<li><a class="term-link" href="../../../pir/categories/custom/index.html">custom</a></li>
|
|
<li><a class="term-link" href="../../../pir/categories/theming/index.html">theming</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<aside id="R-sidebar" class="default-animation showVisitedLinks">
|
|
<div id="R-header-topbar" class="default-animation"></div>
|
|
<div id="R-header-wrapper" class="default-animation">
|
|
<div id="R-header" class="default-animation">
|
|
<style>
|
|
#R-logo svg,
|
|
#R-logo svg * {
|
|
color: #282828;
|
|
color: var(--MENU-SECTIONS-BG-color);
|
|
fill: #282828 !important;
|
|
fill: var(--MENU-SECTIONS-BG-color) !important;
|
|
opacity: .945;
|
|
}
|
|
a#R-logo {
|
|
color: #282828;
|
|
color: var(--MENU-SECTIONS-BG-color);
|
|
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
|
|
font-size: 1.875rem;
|
|
font-weight: 300;
|
|
margin-top: -.8125rem;
|
|
max-width: 60%;
|
|
text-transform: uppercase;
|
|
width: 14.125rem;
|
|
white-space: nowrap;
|
|
}
|
|
a#R-logo:hover {
|
|
color: #282828;
|
|
color: var(--MENU-SECTIONS-BG-color);
|
|
}
|
|
#R-logo svg {
|
|
margin-bottom: -1.25rem;
|
|
margin-inline-start: -1.47rem;
|
|
margin-inline-end: .5rem;
|
|
width: 40.5%;
|
|
}
|
|
@media only all and (max-width: 59.999rem) {
|
|
a#R-logo {
|
|
font-size: 1.5625rem;
|
|
margin-top: -.1875rem;
|
|
}
|
|
#R-logo svg {
|
|
margin-bottom: -.75rem;
|
|
margin-inline-start: -1.47rem;
|
|
margin-inline-end: .5rem;
|
|
}
|
|
}
|
|
@media all and (-ms-high-contrast:none) {
|
|
/* IE11s understanding of positioning is weird at best */
|
|
a#R-logo {
|
|
margin-top: -3.625rem;
|
|
}
|
|
#R-logo svg {
|
|
margin-bottom: -3.875rem;
|
|
margin-left: -1.47rem;
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
@media only all and (-ms-high-contrast:none) and (max-width: 59.999rem) {
|
|
#R-logo svg {
|
|
margin-left: -1.47rem;
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
</style>
|
|
<a id="R-logo" href="../../../pir/index.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044">
|
|
<path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
|
|
<path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
|
|
<path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#282828;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/>
|
|
<path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
|
|
</svg>Relearn
|
|
</a>
|
|
</div>
|
|
<form action="../../../pir/search.html" method="get"><div class="searchbox default-animation">
|
|
<button class="search-detail" type="submit" title="Searrrch (CTRL+ALT+f)"><i class="fas fa-search"></i></button>
|
|
<label class="a11y-only" for="R-search-by">Searrrch</label>
|
|
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="Searrrch...">
|
|
<button class="search-clear" type="button" data-search-clear="" title="Clearrr searrrch"><i class="fas fa-times" title="Clearrr searrrch"></i></button>
|
|
</div></form>
|
|
<script>
|
|
var contentLangs=['en'];
|
|
</script>
|
|
<script src="../../../js/auto-complete.js?1700355410" defer></script>
|
|
<script src="../../../js/lunr/lunr.min.js?1700355410" defer></script>
|
|
<script src="../../../js/lunr/lunr.stemmer.support.min.js?1700355410" defer></script>
|
|
<script src="../../../js/lunr/lunr.multi.min.js?1700355410" defer></script>
|
|
<script src="../../../js/lunr/lunr.en.min.js?1700355410" defer></script>
|
|
<script src="../../../js/search.js?1700355410" defer></script>
|
|
</div>
|
|
<div id="R-homelinks" class="default-animation">
|
|
<hr class="padding">
|
|
</div>
|
|
<div id="R-content-wrapper" class="highlightable">
|
|
<div id="R-topics">
|
|
<ul class="enlarge morespace collapsible-menu">
|
|
<li data-nav-id="/pir/basics/index.html" class="parent "><input type="checkbox" id="R-section-182650db393a58ea8a0385f10a515d92" aria-controls="R-subsections-182650db393a58ea8a0385f10a515d92" checked><label for="R-section-182650db393a58ea8a0385f10a515d92"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Basics</span></label><a class="padding" href="../../../pir/basics/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-182650db393a58ea8a0385f10a515d92" class="morespace collapsible-menu">
|
|
<li data-nav-id="/pir/basics/migration/index.html" class=""><a class="padding" href="../../../pir/basics/migration/index.html">What's New<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/basics/requirements/index.html" class=""><a class="padding" href="../../../pir/basics/requirements/index.html">Requirrrements<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/basics/installation/index.html" class=""><a class="padding" href="../../../pir/basics/installation/index.html">Installat'n<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/basics/configuration/index.html" class=""><a class="padding" href="../../../pir/basics/configuration/index.html">Configurrrat'n<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/basics/customization/index.html" class="active"><a class="padding" href="../../../pir/basics/customization/index.html">Customizat'n<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/basics/generator/index.html" class=""><a class="padding" href="../../../pir/basics/generator/index.html">Stylesheet generrrat'r<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/basics/topbar/index.html" class=""><a class="padding" href="../../../pir/basics/topbar/index.html">Topbarrr Modificat'n<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/basics/history/index.html" class=""><a class="padding" href="../../../pir/basics/history/index.html">Historrry<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
|
<li data-nav-id="/pir/cont/index.html" class=""><input type="checkbox" id="R-section-4074c32ab128bf79d499f2f6ddf50674" aria-controls="R-subsections-4074c32ab128bf79d499f2f6ddf50674"><label for="R-section-4074c32ab128bf79d499f2f6ddf50674"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Rambl'n</span></label><a class="padding" href="../../../pir/cont/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">2.</b> Rambl'n<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-4074c32ab128bf79d499f2f6ddf50674" class="morespace collapsible-menu">
|
|
<li data-nav-id="/pir/cont/pages/index.html" class=""><a class="padding" href="../../../pir/cont/pages/index.html">planks orrrganizat'n<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/cont/archetypes/index.html" class=""><a class="padding" href="../../../pir/cont/archetypes/index.html">Arrrchetypes<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/cont/markdown/index.html" class=""><a class="padding" href="../../../pir/cont/markdown/index.html">Marrrkdown rules<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/cont/imageeffects/index.html" class=""><a class="padding" href="../../../pir/cont/imageeffects/index.html">Image Effects<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/cont/menushortcuts/index.html" class=""><a class="padding" href="../../../pir/cont/menushortcuts/index.html">Menu extrrra shorrrtcuts<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/cont/i18n/index.html" class=""><a class="padding" href="../../../pir/cont/i18n/index.html">Multilingual an' i18n<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/cont/taxonomy/index.html" class=""><a class="padding" href="../../../pir/cont/taxonomy/index.html">Taxonomy<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
|
<li data-nav-id="/pir/shortcodes/index.html" class=""><input type="checkbox" id="R-section-215953719902243a01571a1ede64aeeb" aria-controls="R-subsections-215953719902243a01571a1ede64aeeb"><label for="R-section-215953719902243a01571a1ede64aeeb"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Shorrrtcodes</span></label><a class="padding" href="../../../pir/shortcodes/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">3.</b> Shorrrtcodes<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-215953719902243a01571a1ede64aeeb" class="morespace collapsible-menu">
|
|
<li data-nav-id="/pir/shortcodes/attachments/index.html" class=""><a class="padding" href="../../../pir/shortcodes/attachments/index.html">Attachments<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/badge/index.html" class=""><a class="padding" href="../../../pir/shortcodes/badge/index.html">Badge<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/button/index.html" class=""><a class="padding" href="../../../pir/shortcodes/button/index.html">Button<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/children/index.html" class=""><input type="checkbox" id="R-section-05de666a6804433386d9009e44fa7aa3" aria-controls="R-subsections-05de666a6804433386d9009e44fa7aa3"><label for="R-section-05de666a6804433386d9009e44fa7aa3"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Children</span></label><a class="padding" href="../../../pir/shortcodes/children/index.html">Children<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-05de666a6804433386d9009e44fa7aa3" class="morespace collapsible-menu">
|
|
<li data-nav-id="/pir/shortcodes/children/test/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/test/index.html">plank X<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/children/children-1/index.html" class=""><input type="checkbox" id="R-section-5c6c78bc0635ef1f61fdb91197081411" aria-controls="R-subsections-5c6c78bc0635ef1f61fdb91197081411"><label for="R-section-5c6c78bc0635ef1f61fdb91197081411"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1</span></label><a class="padding" href="../../../pir/shortcodes/children/children-1/index.html">plank 1<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-5c6c78bc0635ef1f61fdb91197081411" class="morespace collapsible-menu">
|
|
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/index.html" class="alwaysopen"><input type="checkbox" id="R-section-be87ceb25a7988952eb9556a69f3cbdf" aria-controls="R-subsections-be87ceb25a7988952eb9556a69f3cbdf" checked><label for="R-section-be87ceb25a7988952eb9556a69f3cbdf"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1</span></label><a class="padding" href="../../../pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-be87ceb25a7988952eb9556a69f3cbdf" class="morespace collapsible-menu">
|
|
<li data-nav-id="" class="alwaysopen"><input type="checkbox" id="R-section-989ea17e090bb9681da73b58575dcced" aria-controls="R-subsections-989ea17e090bb9681da73b58575dcced" checked><label for="R-section-989ea17e090bb9681da73b58575dcced"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1-2 (headless)</span></label><span class="padding">plank 1-1-2 (headless)</span><ul id="R-subsections-989ea17e090bb9681da73b58575dcced" class="morespace collapsible-menu">
|
|
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">plank 1-1-2-1<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">plank 1-1-2-2<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
|
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
|
|
<li data-nav-id="/pir/shortcodes/children/children-2/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-2/index.html">plank 2<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/children/children-3/index.html" class=""><input type="checkbox" id="R-section-085f961452d7baa981ace00de789c321" aria-controls="R-subsections-085f961452d7baa981ace00de789c321"><label for="R-section-085f961452d7baa981ace00de789c321"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 3</span></label><a class="padding" href="../../../pir/shortcodes/children/children-3/index.html">plank 3<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-085f961452d7baa981ace00de789c321" class="morespace collapsible-menu">
|
|
<li data-nav-id="/pir/shortcodes/children/children-3/test3/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-3/test3/index.html">plank 3-1<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
|
|
<li data-nav-id="/pir/shortcodes/expand/index.html" class=""><a class="padding" href="../../../pir/shortcodes/expand/index.html">Expand<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/highlight/index.html" class=""><a class="padding" href="../../../pir/shortcodes/highlight/index.html">Highlight<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/icon/index.html" class=""><a class="padding" href="../../../pir/shortcodes/icon/index.html">Icon<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/include/index.html" class=""><a class="padding" href="../../../pir/shortcodes/include/index.html">Include<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/math/index.html" class=""><a class="padding" href="../../../pir/shortcodes/math/index.html">Math<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/mermaid/index.html" class=""><a class="padding" href="../../../pir/shortcodes/mermaid/index.html">Merrrmaid<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/notice/index.html" class=""><a class="padding" href="../../../pir/shortcodes/notice/index.html">Notice<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/openapi/index.html" class=""><a class="padding" href="../../../pir/shortcodes/openapi/index.html">OpenAPI<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/siteparam/index.html" class=""><a class="padding" href="../../../pir/shortcodes/siteparam/index.html">SiteParam<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/tab/index.html" class=""><a class="padding" href="../../../pir/shortcodes/tab/index.html">Tab<i class="fas fa-check read-icon"></i></a></li>
|
|
<li data-nav-id="/pir/shortcodes/tabs/index.html" class=""><a class="padding" href="../../../pir/shortcodes/tabs/index.html">Tabs<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
|
</ul>
|
|
</div>
|
|
<div id="R-shortcuts">
|
|
<div class="nav-title padding">Morrre</div>
|
|
<ul class="space">
|
|
<li><a class="padding" href="https://github.com/McShelby/hugo-theme-relearn"><i class='fab fa-fw fa-github'></i> GitHub repo</a></li>
|
|
<li><a class="padding" href="../../../pir/showcase/"><i class='fas fa-fw fa-camera'></i> Showcases</a></li>
|
|
<li><a class="padding" href="../../../pir/more/credits/"><i class='fas fa-fw fa-bullhorn'></i> Crrredits</a></li>
|
|
<li><a class="padding" href="../../../pir/tags/"><i class='fas fa-fw fa-tags'></i> Arrr! Tags</a></li>
|
|
<li><a class="padding" href="../../../pir/categories/"><i class='fas fa-fw fa-layer-group'></i> Categorrries</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter"></div>
|
|
<div id="R-menu-footer">
|
|
<hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter">
|
|
<div id="R-prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks showLangSwitch showVariantSwitch showVisitedLinks">
|
|
<ul>
|
|
<li id="R-select-language-container" class="footerLangSwitch showLangSwitch">
|
|
<div class="padding menu-control">
|
|
<i class="fas fa-language fa-fw"></i>
|
|
<span> </span>
|
|
<div class="control-style">
|
|
<label class="a11y-only" for="R-select-language">Language</label>
|
|
<select id="R-select-language" onchange="location = baseUri + this.value;">
|
|
<option id="R-en" value="/basics/customization/index.html" lang="en">English</option>
|
|
<option id="R-pir" value="/pir/basics/customization/index.html" lang="pir" selected>Arrr! ☠ Pirrrates ☠</option>
|
|
</select>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</li>
|
|
<li id="R-select-variant-container" class="footerVariantSwitch showVariantSwitch">
|
|
<div class="padding menu-control">
|
|
<i class="fas fa-paint-brush fa-fw"></i>
|
|
<span> </span>
|
|
<div class="control-style">
|
|
<label class="a11y-only" for="R-select-variant">Theme</label>
|
|
<select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
|
|
<option id="R-auto" value="auto" selected>Auto</option>
|
|
<option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
|
|
<option id="R-relearn-light" value="relearn-light">Relearn Light</option>
|
|
<option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
|
|
<option id="R-zen-light" value="zen-light">Zen Light</option>
|
|
<option id="R-zen-dark" value="zen-dark">Zen Dark</option>
|
|
<option id="R-neon" value="neon">Neon</option>
|
|
<option id="R-learn" value="learn">Learn</option>
|
|
<option id="R-blue" value="blue">Blue</option>
|
|
<option id="R-green" value="green">Green</option>
|
|
<option id="R-red" value="red">Red</option>
|
|
</select>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<script>window.variants && variants.markSelectedVariant();</script>
|
|
</li>
|
|
<li class="footerVisitedLinks showVisitedLinks">
|
|
<div class="padding menu-control">
|
|
<i class="fas fa-history fa-fw"></i>
|
|
<span> </span>
|
|
<div class="control-style">
|
|
<button onclick="clearHistory();">Clearrr Historrry</button>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="R-footer" class="footerFooter showFooter">
|
|
<span class="github-buttons"></span>
|
|
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
|
|
<script>
|
|
function githubButtonsScheme(){
|
|
var scheme = 'light';
|
|
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#R-sidebar' ) ).getPropertyValue( 'background-color' );
|
|
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
|
|
if( colorValues.length === 3 && ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165) ){
|
|
|
|
scheme = 'dark';
|
|
}
|
|
return scheme;
|
|
}
|
|
function githubButtonsInit(){
|
|
if( !window.githubButtons ){
|
|
|
|
setTimeout( githubButtonsInit, 50 );
|
|
return;
|
|
}
|
|
var scheme = githubButtonsScheme();
|
|
var githubButtonsHTML = `
|
|
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
|
|
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
|
|
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
|
|
`;
|
|
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
|
|
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
|
|
anchor.dataset.colorScheme = scheme;
|
|
window.githubButtons.render( anchor, function( el ){
|
|
anchor.parentNode.replaceChild( el, anchor );
|
|
});
|
|
});
|
|
}
|
|
document.addEventListener( 'themeVariantLoaded', function( e ){
|
|
|
|
setTimeout( githubButtonsInit, 400 );
|
|
});
|
|
</script>
|
|
<script async src="../../../js/github-buttons.js?1700355410"></script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<script src="../../../js/clipboard.min.js?1700355410" defer></script>
|
|
<script src="../../../js/perfect-scrollbar.min.js?1700355410" defer></script>
|
|
<script src="../../../js/theme.js?1700355410" defer></script>
|
|
</body>
|
|
</html>
|