mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-12-18 03:43:31 +00:00
297 lines
32 KiB
HTML
297 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="art-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.123.3">
|
|
<meta name="generator" content="Relearn 5.24.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="art-pir">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="canonical" type="text/html" title="Customizat'n :: Cap'n Hugo Relearrrn Theme">
|
|
<link href="/hugo-theme-relearn/pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat'n :: Cap'n Hugo Relearrrn Theme">
|
|
<link href="/hugo-theme-relearn/images/logo.svg?1708789996" rel="icon" type="image/svg+xml">
|
|
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
|
|
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1708789998" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1708789998" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/nucleus.css?1708789998" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/auto-complete.css?1708789998" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1708789998" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1708789998" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/fonts.css?1708789998" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1708789998" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/theme.css?1708789998" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1708789998" rel="stylesheet" id="R-variant-style">
|
|
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1708789998" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="/hugo-theme-relearn/css/variant.css?1708789998" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/print.css?1708789998" rel="stylesheet" media="print">
|
|
<link href="/hugo-theme-relearn/css/format-print.css?1708789998" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/ie.css?1708789998" rel="stylesheet">
|
|
<script src="/hugo-theme-relearn/js/url.js?1708789998"></script>
|
|
<script src="/hugo-theme-relearn/js/variant.js?1708789998"></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="/hugo-theme-relearn/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.relearn.themeVariantModifier='';
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', '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 print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/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>
|
|
<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="/hugo-theme-relearn/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>
|
|
</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>
|
|
|
|
|
|
<h2 id="usage-scenarios">Usage scenarios</h2>
|
|
<p>Th' theme be us'ble 'n different scenarios, requir'n th' follow'n mandatory sett'ns 'n yer <code>hugo.toml</code>. All sett'ns not mentioned can be set t' yer lik'n.</p>
|
|
<h3 id="public-webserver-from-root">Public Webserver from Root</h3>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">baseURL</span> <span class="p">=</span> <span class="s2">"https://example.com/"</span></span></span></code></pre></div><h3 id="public-webserver-from-subdirectory">Public Webserver from Subdirectory</h3>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">baseURL</span> <span class="p">=</span> <span class="s2">"https://example.com/mysite/"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div><h3 id="private-webserver-lan">Private Webserver (LAN)</h3>
|
|
<p>Th' same sett'ns as wit' any o' th' public webserver usage scenarios or</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">baseURL</span> <span class="p">=</span> <span class="s2">"/"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><h3 id="file-system">File System</h3>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">baseURL</span> <span class="p">=</span> <span class="s2">"/"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</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>Us'n a <code>baseURL</code> wit' a subdirectory an' <code>relativeURLs=true</code> be mutally exclusive due t' th' fact, that <a href="https://github.com/gohugoio/hugo/issues/12130" target="_blank">Cap'n Hugo does not apply th' <code>baseURL</code> correctly</a>.</p>
|
|
<p>If ye need both, ye have t' generate yer ship twice but wit' different sett'ns into separate directories.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box notices cstyle note">
|
|
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
|
<div class="box-content">
|
|
|
|
<p>Sublemental planks (like <code>sitemap.xml</code>, <code>rss.xml</code>) an' generated social media links inside o' yer planks will always be generated wit' absolute URLs an' will not work if ye set <code>relativeURLs=true</code>.</p>
|
|
</div>
|
|
</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>If ye be us'n <code>uglyURLs=false</code> (Hugo’s default), th' theme will append an additional <code>index.html</code> t' all plank links t' make yer ship be serv'ble from th' file system. If ye don’t care about th' file system an' only serve yer plank via a webserver ye can generate th' links without this:</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">disableExplicitIndexURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<h2 id="activate-search">Activate search</h2>
|
|
<p>If not already present, add th' follow'n lines 'n yer <code>hugo.toml</code> file.</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">outputs</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"html"</span><span class="p">,</span> <span class="s2">"rss"</span><span class="p">,</span> <span class="s2">"search"</span><span class="p">]</span></span></span></code></pre></div><p>This will generate a search index file at th' root o' yer public folder ready t' be consumed by th' Lunr search library. Avast that th' <code>search</code> outputformat was named <code>json</code> 'n previous releases but was implemented differently. Although <code>json</code> still works, it be now deprecated.</p>
|
|
|
|
<div class="box notices cstyle note">
|
|
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
|
|
<div class="box-content">
|
|
|
|
<p>If ye want t' use th' search feature from th' file system, migrat'n from an older installat'n o' th' theme, make sure t' change yer outputformat fer th' homepage from th' now deprecated <code>json</code> t' <code>search</code> <a href="/hugo-theme-relearn/pir/basics/customization/index.html#activate-search">as seen below</a>.</p>
|
|
</div>
|
|
</div>
|
|
<h3 id="activate-dedicated-search-page">Activate dedicated search plank</h3>
|
|
<p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>searchpage</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>hugo.toml</code> file. This will cause Cap'n Hugo t' generate a new file <code>http://example.com/mysite/search.html</code>.</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"html"</span><span class="p">,</span> <span class="s2">"rss"</span><span class="p">,</span> <span class="s2">"search"</span><span class="p">,</span> <span class="s2">"searchpage"</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu’s search box .</p>
|
|
<p><a href="#R-image-954b0b5b78c13929ef4decd97b3562ca" class="lightbox-link"><img src="/hugo-theme-relearn/basics/customization/search_page.png?&width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
|
|
<a href="javascript:history.back();" class="lightbox-back" id="R-image-954b0b5b78c13929ef4decd97b3562ca"><img src="/hugo-theme-relearn/basics/customization/search_page.png?&width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></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' have Cap'n Hugo create th' dedicated search plank successfully, ye must not generate th' URL <code>http://example.com/mysite/search.html</code> from yer own rrrambl'n. This can happen if ye set <code>uglyURLs=true</code> 'n yer <code>hugo.toml</code> an' defin'n a Marrrkdown file <code>content/search.md</code>.</p>
|
|
<p>T' make sure, there be no duplicate rrrambl'n fer any given URL o' yer project, run <code>hugo --printPathWarn'ns</code>.</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="activate-print-support">Activate print support</h2>
|
|
<p>Ye can activate print support t' add th' capability t' print whole chapters or even th' complete ship. Just add th' <code>print</code> output format t' yer home, section an' plank 'n yer <code>hugo.toml</code> as seen below:</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">outputs</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"html"</span><span class="p">,</span> <span class="s2">"rss"</span><span class="p">,</span> <span class="s2">"print"</span><span class="p">,</span> <span class="s2">"search"</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"html"</span><span class="p">,</span> <span class="s2">"rss"</span><span class="p">,</span> <span class="s2">"print"</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">plank</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"html"</span><span class="p">,</span> <span class="s2">"rss"</span><span class="p">,</span> <span class="s2">"print"</span><span class="p">]</span></span></span></code></pre></div><p>This will add a little printer ay'con 'n th' top bar. It will switch th' plank t' print preview when clicked. Ye can then send this plank t' th' printer by us'n yer browser’s usual print functionality.</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' result'n URL will not be <a href="https://gohugo.io/templates/output-formats/#configure-output-formats" target="_blank">configured ugly</a> 'n terms o' <a href="https://gohugo.io/content-management/urls/#ugly-urls" target="_blank">Hugo’s URL handl'n</a> even if you’ve set <code>uglyURLs=true</code> 'n yer <code>hugo.toml</code>. This be due t' th' fact that fer one mime type only one suffix can be configured.</p>
|
|
<p>Nevertheless, if you’re unhappy wit' th' result'n URLs ye can manually redefine <code>outputFormats.print</code> 'n yer own <code>hugo.toml</code> t' yer lik'n.</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="home-button-configuration">Home Button Configurat'n</h2>
|
|
<p>If th' <code>disableLandingPageButton</code> opt'n be set t' <code>false</code>, a Home button will appear
|
|
on th' left menu. It be an alternative fer click'n on th' logo. T' edit th'
|
|
appearance, ye will have t' configure th' <code>landingPageName</code> fer th' defined languages:</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">...</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">"<i class='fas fa-home'></i> Home"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">...</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">pir</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">languages</span><span class="p">.</span><span class="nx">pir</span><span class="p">.</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">"<i class='fas fa-home'></i> Arrr! Homme"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this opt'n be not configured fer a specific language, they will get their default values:</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">"<i class='fas fa-home'></i> Home"</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
|
|
<p><a href="#R-image-32fde7d092c87e263a93af4fa606ed85" class="lightbox-link"><img src="/hugo-theme-relearn/basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
|
|
<a href="javascript:history.back();" class="lightbox-back" id="R-image-32fde7d092c87e263a93af4fa606ed85"><img src="/hugo-theme-relearn/basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
|
<h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
|
|
<p>Ye can add social media meta tags fer th' <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol an' <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> t' yer ship. These be configured as mentioned 'n th' Cap'n Hugo docs.</p>
|
|
<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>14.375rem</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> applies t' th' menu flyout width 'n mobile mode 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-S</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-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="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.</p>
|
|
<p>Ye can ye use this mechanism 'n yer own shorrrtcodes. 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">Plank</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>hugo.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>hugo.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>hugo.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>hugo.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>hugo.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>
|
|
<h2 id="react-to-variant-switches-in-javascript">React t' Variant Switches 'n JavaScript</h2>
|
|
<p>Once a color variant be fully boarded, either initially or by switch'n th' color 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><h2 id="partials">Partials</h2>
|
|
<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="/hugo-theme-relearn/pir/basics/customization/index.html#output-formats">output-formats</a></li>
|
|
<li><code>footer.html</code>: th' footer o' th' plank. See <a href="/hugo-theme-relearn/pir/basics/customization/index.html#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="/hugo-theme-relearn/pir/basics/customization/index.html#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="/hugo-theme-relearn/pir/basics/customization/index.html#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>head'n.html</code>: side-wide configurat'n t' change th' planks title head'ns.</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>
|
|
|
|
|
|
<footer class="footline">
|
|
</footer>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="/hugo-theme-relearn/js/clipboard.min.js?1708789998" defer></script>
|
|
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1708789998" defer></script>
|
|
<script src="/hugo-theme-relearn/js/theme.js?1708789998" defer></script>
|
|
</body>
|
|
</html>
|