hugo-theme-relearn/pir/basics/customization/index.print.html
2023-10-09 19:53:31 +00:00

254 lines
24 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.119.0">
<meta name="generator" content="Relearn 5.22.1+tip">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<title>Customizat&#39;n :: Cap&#39;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="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="canonical" type="text/html" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../../images/logo.svg?1696881205" 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?1696881207" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1696881207" rel="stylesheet"></noscript>
<link href="../../../css/nucleus.css?1696881207" rel="stylesheet">
<link href="../../../css/auto-complete.css?1696881207" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1696881207" rel="stylesheet"></noscript>
<link href="../../../css/perfect-scrollbar.min.css?1696881207" rel="stylesheet">
<link href="../../../css/fonts.css?1696881207" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1696881207" rel="stylesheet"></noscript>
<link href="../../../css/theme.css?1696881207" rel="stylesheet">
<link href="../../../css/theme-auto.css?1696881207" rel="stylesheet" id="R-variant-style">
<link href="../../../css/variant.css?1696881207" rel="stylesheet">
<link href="../../../css/print.css?1696881207" rel="stylesheet" media="print">
<link href="../../../css/format-print.css?1696881207" rel="stylesheet">
<link href="../../../css/ie.css?1696881207" rel="stylesheet">
<script src="../../../js/url.js?1696881207"></script>
<script src="../../../js/variant.js?1696881207"></script>
<script>
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
window.index_js_url="../../../pir/index.search.js";
var root_url="../../../";
var baseUri=root_url.replace(/\/$/, '');
// translations
window.T_Copy_to_clipboard = 'Copy t\u0027 clipboard';
window.T_Copied_to_clipboard = 'Copied t\u0027 clipboard!';
window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
window.T_Reset_view = 'Rrreset view';
window.T_View_reset = 'View rrreset!';
window.T_No_results_found = 'No rrresults found fer \u0022{0}\u0022';
window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
// some further base stuff
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../../pir/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&#43;ALT&#43;n)">
<i class="fa-fw fas fa-bars"></i>
</button>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Customizat&#39;n</span><meta itemprop="position" content="2"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable default" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="customizatn">Customizat&#39;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&rsquo;t change th' code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this plank</a>. You&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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 &amp; dark theme favicons that follow th' OS&rsquo; (and 'n some cases, th' browser&rsquo;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 &amp; 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">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;icon&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/images/favicon.bmp&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;image/bmp&#34;</span><span class="p">&gt;</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>&lt; 48rem</td>
<td>0</td>
</tr>
<tr>
<td>M</td>
<td>48rem - 60rem</td>
<td>14.375rem</td>
</tr>
<tr>
<td>L</td>
<td>&gt;= 60rem</td>
<td>18.75rem</td>
</tr>
</tbody>
</table>
<p>Th' values fer th' screen width breakpoints aren&rsquo;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&rsquo;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&rsquo;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">&#34;relearn-light&#34;</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">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</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&rsquo;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&rsquo;s it.</p>
<p>If you&rsquo;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">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If ye don&rsquo;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&rsquo;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">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</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">&#39;themeVariantLoaded&#39;</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/">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/partials/shortcode/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">&#34;hasMyShortcode&#34;</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">&#34;MyShortcode&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">locat'n</span> <span class="p">=</span> <span class="s">&#34;footer&#34;</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">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://www.unpkg.com/jquery/dist/jquery.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</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 (with a <code>has</code> prefixed) ye used fer th' store 'n yer <code>layouts/partials/shortcode/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>
<script src="../../../js/clipboard.min.js?1696881207" defer></script>
<script src="../../../js/perfect-scrollbar.min.js?1696881207" defer></script>
<script src="../../../js/theme.js?1696881207" defer></script>
</body>
</html>