mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-06-01 14:34:04 +00:00
deploy: 98cbf97fcb
This commit is contained in:
McShelby
parent
9b5fdc69fd
commit
a47f8c47aa
277 changed files with 9187 additions and 7822 deletions
basics
branding
changelog
configuration
customization
generator
history
index.htmlindex.print.htmlindex.xmlinstallation
migration
requirements
topbar
510
basics/branding/index.html
Normal file
510
basics/branding/index.html
Normal file
|
|
@ -0,0 +1,510 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="generator" content="Hugo 0.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="Branding :: Hugo Relearn Theme">
|
||||
<meta name="twitter:description" content="Documentation for Hugo Relearn Theme">
|
||||
<meta property="og:title" content="Branding :: Hugo Relearn 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/basics/branding/index.html">
|
||||
<meta property="og:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
|
||||
<meta property="og:site_name" content="Hugo Relearn Theme">
|
||||
<title>Branding :: Hugo Relearn Theme</title>
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel="alternate" hreflang="x-default">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel="alternate" hreflang="en">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/branding/index.xml" rel="alternate" type="application/rss+xml" title="Branding :: Hugo Relearn Theme">
|
||||
<link href="../../basics/branding/index.print.html" rel="alternate" type="text/html" title="Branding :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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="../../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-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
||||
// translations
|
||||
window.T_Copy_to_clipboard = `Copy to clipboard`;
|
||||
window.T_Copied_to_clipboard = `Copied to clipboard!`;
|
||||
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
|
||||
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
|
||||
window.T_Reset_view = `Reset view`;
|
||||
window.T_View_reset = `View reset!`;
|
||||
window.T_No_results_found = `No results found for "{0}"`;
|
||||
window.T_N_results_found = `{1} results found for "{0}"`;
|
||||
</script>
|
||||
<style>
|
||||
#R-body img.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="mobile-support html disableInlineCopyToClipboard" data-url="../../basics/branding/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 of 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="#theme-variant">Change the Variant (Simple)</a>
|
||||
<ul>
|
||||
<li><a href="#single-variant">Single Variant</a></li>
|
||||
<li><a href="#multiple-variants">Multiple Variants</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#adjust-to-os-settings">Adjust to OS Settings</a></li>
|
||||
<li><a href="#change-the-favicon">Change the Favicon</a></li>
|
||||
<li><a href="#change-the-logo">Change the Logo</a></li>
|
||||
<li><a href="#syntax-highlightning">Syntax highlightning</a></li>
|
||||
<li><a href="#theme-variant-advanced">Change the Variant (Advanced)</a>
|
||||
<ul>
|
||||
<li><a href="#parameter">Parameter</a></li>
|
||||
</ul>
|
||||
</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="../../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">Branding</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/branding/_index.en.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="../../basics/branding/index.print.html" title="Print whole chapter (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="../../basics/configuration/index.html" title="Configuration (🡐)">
|
||||
<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="../../basics/customization/index.html" title="Customization (🡒)">
|
||||
<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="More">
|
||||
<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="branding">Branding</h1>
|
||||
|
||||
<p>The Relearn theme provides configuration options to change your your site’s colors, favicon and logo. This allows you to easily align your site visuals to your desired style. Most of these options are exposed thru so called color variants.</p>
|
||||
<p>A color variant lets you customize various visual effects of your site like almost any color, used fonts, color schemes of print, syntax highligtning, Mermaid and the OpenAPI shortcode, etc. It contains of a CSS file and optional configuration options in your <code>config.toml</code>.</p>
|
||||
<p>The Relearn theme ships with a wide set of different color variants. You can use them as-is, copy them over and use them as a starting point for your customizations or just create completely new variants unique to your site. The <a href="../../basics/generator/index.html">interactive variant generator</a> may help you with this task.</p>
|
||||
<p>Once configured in your <code>config.toml</code>, you can select them with the variant selector at the bottom of the menu.</p>
|
||||
<h2 id="theme-variant">Change the Variant (Simple)</h2>
|
||||
<h3 id="single-variant">Single Variant</h3>
|
||||
<p>Set the <code>themeVariant</code> value to the name of your theme file. That’s it! Your site will be displayed in this variant only.</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>
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>Your theme variant file must reside in your site’s <code>static/css</code> directory or in the theme’s <code>static/css</code> directory and the file name must start with <code>theme-</code> and end wit <code>.css</code>. In the above example, the path of your theme file must be <code>static/css/theme-relearn-light.css</code>.</p>
|
||||
<p>If you want to make changes to a shipped color variant, create a copy in your site’s <code>static/css</code> directory. Don’t edit the file in the theme’s directory!</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="multiple-variants">Multiple Variants</h3>
|
||||
<p>You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.</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">"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> Tip</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The theme provides an advanced configuration mode, combining the functionality for multiple variants with the below possibilities of adjusting to your OS settings, logo and syntax highlightning and even more!</p>
|
||||
<p>Although all options documented here are still working, the advanced configuration options are the recommended way to configure your color variants. <a href="#theme-variant-advanced">See below</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="adjust-to-os-settings">Adjust to OS Settings</h2>
|
||||
<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That’s it.</p>
|
||||
<p>You can use the <code>auto</code> value with the single or multiple variants option. If you are using multiple variants, you can drop <code>auto</code> at any position in the option’s array, but usually it makes sense to set it in the first position and make it the 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 you don’t configure anything else, the theme will default to use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode. These defaults are overwritten by the first two non-auto options of your <code>themeVariant</code> option if present.</p>
|
||||
<p>In the above example, you would end with <code>red</code> for light mode and the default of <code>relearn-dark</code> for dark mode.</p>
|
||||
<p>If you don’t like that behavior, you can explicitly set <code>themeVariantAuto</code>. The first entry in the array is the color variant for light mode, the second for 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><h2 id="change-the-favicon">Change the Favicon</h2>
|
||||
<p>If your favicon is a SVG, PNG or ICO, just drop your image in your site’s <code>static/images/</code> directory and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
|
||||
<p>If you want to adjust your favicon according to your OS settings for light/dark mode, add the image files <code>static/images/favicon-light.svg</code> and <code>static/images/favicon-dark.svg</code> to your site’s directory, respectively, corresponding to your file format. In case some of the files are missing, the theme falls back to <code>favicon.svg</code> for each missing file. All supplied favicons must be of the same file format.</p>
|
||||
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
|
||||
<p>If you need to change this default behavior, create a new file <code>layouts/partials/favicon.html</code> in your site’s directory and write something 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-logo">Change the Logo</h2>
|
||||
<p>Create a new file in <code>layouts/partials/logo.html</code> of your site. Then write any HTML you want. You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
|
||||
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The size of the logo will adapt automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="syntax-highlightning">Syntax highlightning</h2>
|
||||
<p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">according to Hugo’s documentation</a>. Then, <code>@import</code> the syntax highlightning stylesheet in your color variant stylesheet.</p>
|
||||
<p>For an example, take a look into <code>theme-relearn-light.css</code> and <code>config.toml</code> of the exampleSite.</p>
|
||||
<p>If you want to reconfigure just the syntax highlighting of an existing color variant, you need to copy the file to your site’s directory and adjust it accordingly.</p>
|
||||
<h2 id="theme-variant-advanced">Change the Variant (Advanced)</h2>
|
||||
<p>The theme offers a new way to configure theme variants and all of the aspects above inside of a single configuration item. This comes with some features previously unsupported.</p>
|
||||
<p>Like with the <a href="#multiple-variants">multiple variants</a> option, you are defining your theme variants in an array but now <em>not by simple strings</em> <strong>but in a table with suboptions</strong>.</p>
|
||||
<p>Again, in this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.</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">"relearn-light"</span><span class="p">,</span> <span class="s2">"relearn-dark"</span> <span class="p">]</span></span></span></code></pre></div><p>you now write it that way:</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="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"relearn-light"</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">themeVariant</span><span class="p">]]</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"relearn-dark"</span></span></span></code></pre></div><p>The <code>identifier</code> option is mandatory and equivalent to the string in the first example. Further options can be configured, see the table below.</p>
|
||||
<h3 id="parameter">Parameter</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>identifier</td>
|
||||
<td><em><empty></em></td>
|
||||
<td>Must correspond to the name of a color variant either in your site’s or the theme’s directory in the form <code>static/css/theme-<IDENTIFIER>.css</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>name</td>
|
||||
<td>see notes</td>
|
||||
<td>The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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="../../categories/custom/index.html">custom</a></li>
|
||||
<li><a class="term-link" href="../../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="../../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="../../search.html" method="get"><div class="searchbox default-animation">
|
||||
<button class="search-detail" type="submit" title="Search (CTRL+ALT+f)"><i class="fas fa-search"></i></button>
|
||||
<label class="a11y-only" for="R-search-by">Search</label>
|
||||
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="Search...">
|
||||
<button class="search-clear" type="button" data-search-clear="" title="Clear search"><i class="fas fa-times" title="Clear search"></i></button>
|
||||
</div></form>
|
||||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" 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="/basics/index.html" class="parent "><input type="checkbox" id="R-section-df6aa773bd1fbc430ade79f1764e4ce7" aria-controls="R-subsections-df6aa773bd1fbc430ade79f1764e4ce7" checked><label for="R-section-df6aa773bd1fbc430ade79f1764e4ce7"><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="../../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-df6aa773bd1fbc430ade79f1764e4ce7" class="morespace collapsible-menu">
|
||||
<li data-nav-id="/basics/migration/index.html" class=""><a class="padding" href="../../basics/migration/index.html">What's New<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class="active"><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/history/index.html" class=""><a class="padding" href="../../basics/history/index.html">History<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
||||
<li data-nav-id="/cont/index.html" class=""><input type="checkbox" id="R-section-2291d2894a4301fd505172f85eca0c0a" aria-controls="R-subsections-2291d2894a4301fd505172f85eca0c0a"><label for="R-section-2291d2894a4301fd505172f85eca0c0a"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Content</span></label><a class="padding" href="../../cont/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">2.</b> Content<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-2291d2894a4301fd505172f85eca0c0a" class="morespace collapsible-menu">
|
||||
<li data-nav-id="/cont/pages/index.html" class=""><a class="padding" href="../../cont/pages/index.html">Pages organization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/cont/archetypes/index.html" class=""><a class="padding" href="../../cont/archetypes/index.html">Archetypes<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/cont/markdown/index.html" class=""><a class="padding" href="../../cont/markdown/index.html">Markdown syntax<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/cont/imageeffects/index.html" class=""><a class="padding" href="../../cont/imageeffects/index.html">Image Effects<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/cont/menushortcuts/index.html" class=""><a class="padding" href="../../cont/menushortcuts/index.html">Menu extra shortcuts<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/cont/i18n/index.html" class=""><a class="padding" href="../../cont/i18n/index.html">Multilingual and i18n<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/cont/taxonomy/index.html" class=""><a class="padding" href="../../cont/taxonomy/index.html">Taxonomy<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
||||
<li data-nav-id="/shortcodes/index.html" class=""><input type="checkbox" id="R-section-c0549379138a5c256f6c0600d532453f" aria-controls="R-subsections-c0549379138a5c256f6c0600d532453f"><label for="R-section-c0549379138a5c256f6c0600d532453f"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Shortcodes</span></label><a class="padding" href="../../shortcodes/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">3.</b> Shortcodes<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-c0549379138a5c256f6c0600d532453f" class="morespace collapsible-menu">
|
||||
<li data-nav-id="/shortcodes/attachments/index.html" class=""><a class="padding" href="../../shortcodes/attachments/index.html">Attachments<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/badge/index.html" class=""><a class="padding" href="../../shortcodes/badge/index.html">Badge<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/button/index.html" class=""><a class="padding" href="../../shortcodes/button/index.html">Button<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/children/index.html" class=""><input type="checkbox" id="R-section-efce957ff9dad000e250ff868aa3291d" aria-controls="R-subsections-efce957ff9dad000e250ff868aa3291d"><label for="R-section-efce957ff9dad000e250ff868aa3291d"><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="../../shortcodes/children/index.html">Children<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-efce957ff9dad000e250ff868aa3291d" class="morespace collapsible-menu">
|
||||
<li data-nav-id="/shortcodes/children/test/index.html" class=""><a class="padding" href="../../shortcodes/children/test/index.html">page X<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/children/children-1/index.html" class=""><input type="checkbox" id="R-section-c27b80e9c4c5ceb911093893f4f00a2b" aria-controls="R-subsections-c27b80e9c4c5ceb911093893f4f00a2b"><label for="R-section-c27b80e9c4c5ceb911093893f4f00a2b"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu page 1</span></label><a class="padding" href="../../shortcodes/children/children-1/index.html">page 1<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-c27b80e9c4c5ceb911093893f4f00a2b" class="morespace collapsible-menu">
|
||||
<li data-nav-id="/shortcodes/children/children-1/children-1-1/index.html" class="alwaysopen"><input type="checkbox" id="R-section-bc0c0185f32af18e77e51e4a5f0a3ba4" aria-controls="R-subsections-bc0c0185f32af18e77e51e4a5f0a3ba4" checked><label for="R-section-bc0c0185f32af18e77e51e4a5f0a3ba4"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu page 1-1</span></label><a class="padding" href="../../shortcodes/children/children-1/children-1-1/index.html">page 1-1<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-bc0c0185f32af18e77e51e4a5f0a3ba4" class="morespace collapsible-menu">
|
||||
<li data-nav-id="" class="alwaysopen"><input type="checkbox" id="R-section-9c0a5b93d94f133c09f9cec9eec310a6" aria-controls="R-subsections-9c0a5b93d94f133c09f9cec9eec310a6" checked><label for="R-section-9c0a5b93d94f133c09f9cec9eec310a6"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu page 1-1-2 (headless)</span></label><span class="padding">page 1-1-2 (headless)</span><ul id="R-subsections-9c0a5b93d94f133c09f9cec9eec310a6" class="morespace collapsible-menu">
|
||||
<li data-nav-id="/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" class=""><a class="padding" href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">page 1-1-2-1<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" class=""><a class="padding" href="../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">page 1-1-2-2<i class="fas fa-check read-icon"></i></a></li></ul></li>
|
||||
<li data-nav-id="/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" class=""><a class="padding" href="../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">page 1-1-3<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
|
||||
<li data-nav-id="/shortcodes/children/children-2/index.html" class=""><a class="padding" href="../../shortcodes/children/children-2/index.html">page 2<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/children/children-3/index.html" class=""><input type="checkbox" id="R-section-801eeaaa0748a0846cc1e95f3a734fb7" aria-controls="R-subsections-801eeaaa0748a0846cc1e95f3a734fb7"><label for="R-section-801eeaaa0748a0846cc1e95f3a734fb7"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu page 3</span></label><a class="padding" href="../../shortcodes/children/children-3/index.html">page 3<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-801eeaaa0748a0846cc1e95f3a734fb7" class="morespace collapsible-menu">
|
||||
<li data-nav-id="/shortcodes/children/children-3/test3/index.html" class=""><a class="padding" href="../../shortcodes/children/children-3/test3/index.html">page 3-1<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
|
||||
<li data-nav-id="/shortcodes/expand/index.html" class=""><a class="padding" href="../../shortcodes/expand/index.html">Expand<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/highlight/index.html" class=""><a class="padding" href="../../shortcodes/highlight/index.html">Highlight<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/icon/index.html" class=""><a class="padding" href="../../shortcodes/icon/index.html">Icon<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/include/index.html" class=""><a class="padding" href="../../shortcodes/include/index.html">Include<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/math/index.html" class=""><a class="padding" href="../../shortcodes/math/index.html">Math<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/mermaid/index.html" class=""><a class="padding" href="../../shortcodes/mermaid/index.html">Mermaid<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/notice/index.html" class=""><a class="padding" href="../../shortcodes/notice/index.html">Notice<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/openapi/index.html" class=""><a class="padding" href="../../shortcodes/openapi/index.html">OpenAPI<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/siteparam/index.html" class=""><a class="padding" href="../../shortcodes/siteparam/index.html">SiteParam<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/tab/index.html" class=""><a class="padding" href="../../shortcodes/tab/index.html">Tab<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/shortcodes/tabs/index.html" class=""><a class="padding" href="../../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">More</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="../../showcase/index.html"><i class='fas fa-fw fa-camera'></i> Showcases</a></li>
|
||||
<li><a class="padding" href="../../more/credits/index.html"><i class='fas fa-fw fa-bullhorn'></i> Credits</a></li>
|
||||
<li><a class="padding" href="../../tags/index.html"><i class='fas fa-fw fa-tags'></i> Tags</a></li>
|
||||
<li><a class="padding" href="../../categories/index.html"><i class='fas fa-fw fa-layer-group'></i> Categories</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/branding/index.html" lang="en" selected>English</option>
|
||||
<option id="R-pir" value="/pir/basics/branding/index.html" lang="pir">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-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();">Clear History</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?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
204
basics/branding/index.print.html
Normal file
204
basics/branding/index.print.html
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="generator" content="Hugo 0.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="Branding :: Hugo Relearn Theme">
|
||||
<meta name="twitter:description" content="Documentation for Hugo Relearn Theme">
|
||||
<meta property="og:title" content="Branding :: Hugo Relearn 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/basics/branding/index.html">
|
||||
<meta property="og:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
|
||||
<meta property="og:site_name" content="Hugo Relearn Theme">
|
||||
<title>Branding :: Hugo Relearn Theme</title>
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel="alternate" hreflang="x-default">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel="alternate" hreflang="en">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel="canonical" type="text/html" title="Branding :: Hugo Relearn Theme">
|
||||
<link href="../../basics/branding/index.xml" rel="alternate" type="application/rss+xml" title="Branding :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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="../../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-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
||||
// translations
|
||||
window.T_Copy_to_clipboard = `Copy to clipboard`;
|
||||
window.T_Copied_to_clipboard = `Copied to clipboard!`;
|
||||
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
|
||||
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
|
||||
window.T_Reset_view = `Reset view`;
|
||||
window.T_View_reset = `View reset!`;
|
||||
window.T_No_results_found = `No results found for "{0}"`;
|
||||
window.T_N_results_found = `{1} results found for "{0}"`;
|
||||
</script>
|
||||
<style>
|
||||
#R-body img.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../basics/branding/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="../../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">Branding</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="branding">Branding</h1>
|
||||
|
||||
<p>The Relearn theme provides configuration options to change your your site’s colors, favicon and logo. This allows you to easily align your site visuals to your desired style. Most of these options are exposed thru so called color variants.</p>
|
||||
<p>A color variant lets you customize various visual effects of your site like almost any color, used fonts, color schemes of print, syntax highligtning, Mermaid and the OpenAPI shortcode, etc. It contains of a CSS file and optional configuration options in your <code>config.toml</code>.</p>
|
||||
<p>The Relearn theme ships with a wide set of different color variants. You can use them as-is, copy them over and use them as a starting point for your customizations or just create completely new variants unique to your site. The <a href="../../basics/generator/index.html">interactive variant generator</a> may help you with this task.</p>
|
||||
<p>Once configured in your <code>config.toml</code>, you can select them with the variant selector at the bottom of the menu.</p>
|
||||
<h2 id="theme-variant">Change the Variant (Simple)</h2>
|
||||
<h3 id="single-variant">Single Variant</h3>
|
||||
<p>Set the <code>themeVariant</code> value to the name of your theme file. That’s it! Your site will be displayed in this variant only.</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>
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>Your theme variant file must reside in your site’s <code>static/css</code> directory or in the theme’s <code>static/css</code> directory and the file name must start with <code>theme-</code> and end wit <code>.css</code>. In the above example, the path of your theme file must be <code>static/css/theme-relearn-light.css</code>.</p>
|
||||
<p>If you want to make changes to a shipped color variant, create a copy in your site’s <code>static/css</code> directory. Don’t edit the file in the theme’s directory!</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="multiple-variants">Multiple Variants</h3>
|
||||
<p>You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.</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">"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> Tip</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The theme provides an advanced configuration mode, combining the functionality for multiple variants with the below possibilities of adjusting to your OS settings, logo and syntax highlightning and even more!</p>
|
||||
<p>Although all options documented here are still working, the advanced configuration options are the recommended way to configure your color variants. <a href="#theme-variant-advanced">See below</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="adjust-to-os-settings">Adjust to OS Settings</h2>
|
||||
<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That’s it.</p>
|
||||
<p>You can use the <code>auto</code> value with the single or multiple variants option. If you are using multiple variants, you can drop <code>auto</code> at any position in the option’s array, but usually it makes sense to set it in the first position and make it the 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 you don’t configure anything else, the theme will default to use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode. These defaults are overwritten by the first two non-auto options of your <code>themeVariant</code> option if present.</p>
|
||||
<p>In the above example, you would end with <code>red</code> for light mode and the default of <code>relearn-dark</code> for dark mode.</p>
|
||||
<p>If you don’t like that behavior, you can explicitly set <code>themeVariantAuto</code>. The first entry in the array is the color variant for light mode, the second for 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><h2 id="change-the-favicon">Change the Favicon</h2>
|
||||
<p>If your favicon is a SVG, PNG or ICO, just drop your image in your site’s <code>static/images/</code> directory and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
|
||||
<p>If you want to adjust your favicon according to your OS settings for light/dark mode, add the image files <code>static/images/favicon-light.svg</code> and <code>static/images/favicon-dark.svg</code> to your site’s directory, respectively, corresponding to your file format. In case some of the files are missing, the theme falls back to <code>favicon.svg</code> for each missing file. All supplied favicons must be of the same file format.</p>
|
||||
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
|
||||
<p>If you need to change this default behavior, create a new file <code>layouts/partials/favicon.html</code> in your site’s directory and write something 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-logo">Change the Logo</h2>
|
||||
<p>Create a new file in <code>layouts/partials/logo.html</code> of your site. Then write any HTML you want. You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
|
||||
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The size of the logo will adapt automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="syntax-highlightning">Syntax highlightning</h2>
|
||||
<p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">according to Hugo’s documentation</a>. Then, <code>@import</code> the syntax highlightning stylesheet in your color variant stylesheet.</p>
|
||||
<p>For an example, take a look into <code>theme-relearn-light.css</code> and <code>config.toml</code> of the exampleSite.</p>
|
||||
<p>If you want to reconfigure just the syntax highlighting of an existing color variant, you need to copy the file to your site’s directory and adjust it accordingly.</p>
|
||||
<h2 id="theme-variant-advanced">Change the Variant (Advanced)</h2>
|
||||
<p>The theme offers a new way to configure theme variants and all of the aspects above inside of a single configuration item. This comes with some features previously unsupported.</p>
|
||||
<p>Like with the <a href="#multiple-variants">multiple variants</a> option, you are defining your theme variants in an array but now <em>not by simple strings</em> <strong>but in a table with suboptions</strong>.</p>
|
||||
<p>Again, in this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.</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">"relearn-light"</span><span class="p">,</span> <span class="s2">"relearn-dark"</span> <span class="p">]</span></span></span></code></pre></div><p>you now write it that way:</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="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"relearn-light"</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">themeVariant</span><span class="p">]]</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"relearn-dark"</span></span></span></code></pre></div><p>The <code>identifier</code> option is mandatory and equivalent to the string in the first example. Further options can be configured, see the table below.</p>
|
||||
<h3 id="parameter">Parameter</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>identifier</td>
|
||||
<td><em><empty></em></td>
|
||||
<td>Must correspond to the name of a color variant either in your site’s or the theme’s directory in the form <code>static/css/theme-<IDENTIFIER>.css</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>name</td>
|
||||
<td>see notes</td>
|
||||
<td>The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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="../../categories/custom/index.html">custom</a></li>
|
||||
<li><a class="term-link" href="../../categories/theming/index.html">theming</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
11
basics/branding/index.xml
Normal file
11
basics/branding/index.xml
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Branding on Hugo Relearn Theme</title>
|
||||
<link>https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html</link>
|
||||
<description>Recent content in Branding on Hugo Relearn Theme</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en</language>
|
||||
<atom:link href="https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -20,20 +20,20 @@
|
|||
<meta property="article:section" content="Basics :: Hugo Relearn Theme">
|
||||
<meta property="og:site_name" content="Hugo Relearn Theme">
|
||||
<title></title>
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -2249,12 +2249,12 @@
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524445" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524445" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524445" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524445" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524445" defer></script>
|
||||
<script src="../../js/search.js?1700524445" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -2267,6 +2267,7 @@
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -2410,13 +2411,13 @@
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524445"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524445" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524445" defer></script>
|
||||
<script src="../../js/theme.js?1700524445" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,21 +20,21 @@
|
|||
<meta property="article:section" content="Basics :: Hugo Relearn Theme">
|
||||
<meta property="og:site_name" content="Hugo Relearn Theme">
|
||||
<title></title>
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -87,8 +87,8 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
|
||||
<link href="../../basics/configuration/index.print.html" rel="alternate" type="text/html" title="Configuration :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -80,32 +80,7 @@
|
|||
<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="#global-site-parameters">Global site parameters</a></li>
|
||||
<li><a href="#serving-your-page-from-a-subfolder">Serving your page from a subfolder</a></li>
|
||||
<li><a href="#serving-your-page-from-the-filesystem">Serving your page from the filesystem</a></li>
|
||||
<li><a href="#activate-search">Activate search</a>
|
||||
<ul>
|
||||
<li><a href="#activate-dedicated-search-page">Activate dedicated search page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#activate-print-support">Activate print support</a></li>
|
||||
<li><a href="#mathjax">MathJax</a>
|
||||
<ul>
|
||||
<li><a href="#math-example">Example</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#mermaid">Mermaid</a>
|
||||
<ul>
|
||||
<li><a href="#mermaid-example">Example</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#home-button-configuration">Home Button Configuration</a></li>
|
||||
<li><a href="#social-media-meta-tags">Social Media Meta Tags</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="topbar-content-wrapper">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,7 +106,7 @@
|
|||
</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="../../basics/customization/index.html" title="Customization (🡒)">
|
||||
<a class="topbar-control" href="../../basics/branding/index.html" title="Branding (🡒)">
|
||||
<i class="fa-fw fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -162,18 +137,17 @@
|
|||
</header>
|
||||
<h1 id="configuration">Configuration</h1>
|
||||
|
||||
<h2 id="global-site-parameters">Global site parameters</h2>
|
||||
<p>On top of <a href="https://gohugo.io/overview/configuration/" target="_blank">Hugo global configuration</a>, the Relearn theme lets you define the following parameters in your <code>config.toml</code> (here, values are default).</p>
|
||||
<p>Note that some of these parameters are explained in details in other sections of this documentation.</p>
|
||||
<p>On top of <a href="https://gohugo.io/overview/configuration/" target="_blank">Hugo’s global configuration options</a>, the Relearn theme lets you define further options unique to the theme in your <code>config.toml</code>. The defaults are written in the comments of each option.</p>
|
||||
<p>Note that some of these options are explained in detail in other sections of this documentation.</p>
|
||||
|
||||
|
||||
<div class="tab-panel" data-tab-group="c284f2eeee835d8927d1d6498bfca50a">
|
||||
<div class="tab-panel" data-tab-group="42cda267a13304d1728dc24dcf8f3ca9">
|
||||
<div class="tab-nav">
|
||||
<div class="tab-nav-title">​</div>
|
||||
<button
|
||||
data-tab-item="configtoml"
|
||||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||||
onclick="switchTab('c284f2eeee835d8927d1d6498bfca50a','configtoml')"
|
||||
onclick="switchTab('42cda267a13304d1728dc24dcf8f3ca9','configtoml')"
|
||||
>
|
||||
<span class="tab-nav-text">config.toml</span>
|
||||
</button>
|
||||
|
|
@ -262,7 +236,7 @@
|
|||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># The color variants used for auto mode.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># Default: [ "relearn-light", "relearn-dark" ], overwritten by the first</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options from themeVariant if existant.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options of your `themeVariant` option if present.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># The auto variant defines how your site adjusts to your selected OS settings</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># for light/dark mode. The first array element is the variant for light mode,</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># the second for dark mode.</span>
|
||||
|
|
@ -608,91 +582,7 @@
|
|||
</span></span><span class="line"><span class="cl"><span class="nx">customOpenapiURL</span> <span class="p">=</span> <span class="s2">""</span> <span class="c"># "https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"</span></span></span></code></pre></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 id="serving-your-page-from-a-subfolder">Serving your page from a subfolder</h2>
|
||||
<p>If your site is served from a subfolder, eg. <code>https://example.com/mysite/</code>, you have to set the following lines to your <code>config.toml</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="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">canonifyURLs</span> <span class="p">=</span> <span class="kc">true</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><p>Without <code>canonifyURLs=true</code> URLs in sublemental pages (like <code>sitemap.xml</code>, <code>rss.xml</code>) will be generated falsly while your HTML files will still work. See <a href="https://github.com/gohugoio/hugo/issues/5226" target="_blank">https://github.com/gohugoio/hugo/issues/5226</a>.</p>
|
||||
<h2 id="serving-your-page-from-the-filesystem">Serving your page from the filesystem</h2>
|
||||
<p>If you want your page served from the filesystem by using URLs starting with <code>file://</code> you’ll need the following configuration in your <code>config.toml</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="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><p>The theme will append an additional <code>index.html</code> to all branch bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your <code>config.toml</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">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 class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>If you want to use the search feature from the file system using an older installation of the theme make sure to change your outputformat for the homepage from the now deprecated <code>JSON</code> to <code>SEARCH</code> <a href="#activate-search">as seen below</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="activate-search">Activate search</h2>
|
||||
<p>If not already present, add the following lines in the same <code>config.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 the root of your public folder ready to be consumed by the Lunr search library. Note that the <code>SEARCH</code> outputformat was named <code>JSON</code> in previous releases but was implemented differently. Although <code>JSON</code> still works, it is now deprecated.</p>
|
||||
<h3 id="activate-dedicated-search-page">Activate dedicated search page</h3>
|
||||
<p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to 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>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu’s search box .</p>
|
||||
<p><a href="#R-image-e9789a572ad4bb2da5eed07b3037ba3b" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&width=60pc" alt="Screenshot of the 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-e9789a572ad4bb2da5eed07b3037ba3b"><img src="../../basics/configuration/search_page.png?&width=60pc" alt="Screenshot of the 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>To have Hugo create the dedicated search page successfully, you must not generate the URL <code>http://example.com/mysite/search.html</code> from your own content. This can happen if you set <code>uglyURLs=true</code> in your <code>config.toml</code> and defining a Markdown file <code>content/search.md</code>.</p>
|
||||
<p>To make sure, there is no duplicate content for any given URL of your project, run <code>hugo --printPathWarnings</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="activate-print-support">Activate print support</h2>
|
||||
<p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.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">page</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 icon in the top bar. It will switch the page to print preview when clicked. You can then send this page to the printer by using your 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The resulting URL will not be <a href="https://gohugo.io/templates/output-formats/#configure-output-formats" target="_blank">configured ugly</a> in terms of <a href="https://gohugo.io/content-management/urls/#ugly-urls" target="_blank">Hugo’s URL handling</a> even if you’ve set <code>uglyURLs=true</code> in your <code>config.toml</code>. This is due to the fact that for one mime type only one suffix can be configured.</p>
|
||||
<p>Nevertheless, if you’re unhappy with the resulting URLs you can manually redefine <code>outputFormats.PRINT</code> in your own <code>config.toml</code> to your liking.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="mathjax">MathJax</h2>
|
||||
<p>The MathJax configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See <a href="../../shortcodes/math/index.html">Math</a> for additional documentation.</p>
|
||||
<h3 id="math-example">Example</h3>
|
||||
<p>MathJax is globally disabled. By default it won’t be loaded by any page.</p>
|
||||
<p>On page “Physics” you coded some JavaScript for a dynamic formulae. You can set the MathJax parameters locally to load mathJax on this page.</p>
|
||||
<p>You also can disable MathJax for specific pages while globally enabled.</p>
|
||||
<h2 id="mermaid">Mermaid</h2>
|
||||
<p>The Mermaid configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See <a href="../../shortcodes/mermaid/index.html">Mermaid</a> for additional documentation.</p>
|
||||
<h3 id="mermaid-example">Example</h3>
|
||||
<p>Mermaid is globally disabled. By default it won’t be loaded by any page.</p>
|
||||
<p>On page “Architecture” you coded some JavaScript to dynamically generate a class diagram. You can set the Mermaid parameters locally to load mermaid on this page.</p>
|
||||
<p>You also can disable Mermaid for specific pages while globally enabled.</p>
|
||||
<h2 id="home-button-configuration">Home Button Configuration</h2>
|
||||
<p>If the <code>disableLandingPageButton</code> option is set to <code>false</code>, a Home button will appear
|
||||
on the left menu. It is an alternative for clicking on the logo. To edit the
|
||||
appearance, you will have to configure two parameters for the 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 those params are not configured for 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>The home button is going to look like this:</p>
|
||||
<p><a href="#R-image-4a493c35dabbfa197c1b133a84994330" class="lightbox-link"><img src="../../basics/configuration/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-4a493c35dabbfa197c1b133a84994330"><img src="../../basics/configuration/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>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
|
||||
|
||||
<footer class="footline">
|
||||
</footer>
|
||||
</article>
|
||||
|
|
@ -781,12 +671,12 @@ default values:</p>
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -799,6 +689,7 @@ default values:</p>
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class="active"><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -942,13 +833,13 @@ default values:</p>
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/configuration/index.html" rel="canonical" type="text/html" title="Configuration :: Hugo Relearn Theme">
|
||||
<link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -98,18 +98,17 @@
|
|||
</header>
|
||||
<h1 id="configuration">Configuration</h1>
|
||||
|
||||
<h2 id="global-site-parameters">Global site parameters</h2>
|
||||
<p>On top of <a href="https://gohugo.io/overview/configuration/" target="_blank">Hugo global configuration</a>, the Relearn theme lets you define the following parameters in your <code>config.toml</code> (here, values are default).</p>
|
||||
<p>Note that some of these parameters are explained in details in other sections of this documentation.</p>
|
||||
<p>On top of <a href="https://gohugo.io/overview/configuration/" target="_blank">Hugo’s global configuration options</a>, the Relearn theme lets you define further options unique to the theme in your <code>config.toml</code>. The defaults are written in the comments of each option.</p>
|
||||
<p>Note that some of these options are explained in detail in other sections of this documentation.</p>
|
||||
|
||||
|
||||
<div class="tab-panel" data-tab-group="c284f2eeee835d8927d1d6498bfca50a">
|
||||
<div class="tab-panel" data-tab-group="42cda267a13304d1728dc24dcf8f3ca9">
|
||||
<div class="tab-nav">
|
||||
<div class="tab-nav-title">​</div>
|
||||
<button
|
||||
data-tab-item="configtoml"
|
||||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||||
onclick="switchTab('c284f2eeee835d8927d1d6498bfca50a','configtoml')"
|
||||
onclick="switchTab('42cda267a13304d1728dc24dcf8f3ca9','configtoml')"
|
||||
>
|
||||
<span class="tab-nav-text">config.toml</span>
|
||||
</button>
|
||||
|
|
@ -198,7 +197,7 @@
|
|||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># The color variants used for auto mode.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># Default: [ "relearn-light", "relearn-dark" ], overwritten by the first</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options from themeVariant if existant.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options of your `themeVariant` option if present.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># The auto variant defines how your site adjusts to your selected OS settings</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># for light/dark mode. The first array element is the variant for light mode,</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># the second for dark mode.</span>
|
||||
|
|
@ -544,91 +543,7 @@
|
|||
</span></span><span class="line"><span class="cl"><span class="nx">customOpenapiURL</span> <span class="p">=</span> <span class="s2">""</span> <span class="c"># "https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"</span></span></span></code></pre></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 id="serving-your-page-from-a-subfolder">Serving your page from a subfolder</h2>
|
||||
<p>If your site is served from a subfolder, eg. <code>https://example.com/mysite/</code>, you have to set the following lines to your <code>config.toml</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="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">canonifyURLs</span> <span class="p">=</span> <span class="kc">true</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><p>Without <code>canonifyURLs=true</code> URLs in sublemental pages (like <code>sitemap.xml</code>, <code>rss.xml</code>) will be generated falsly while your HTML files will still work. See <a href="https://github.com/gohugoio/hugo/issues/5226" target="_blank">https://github.com/gohugoio/hugo/issues/5226</a>.</p>
|
||||
<h2 id="serving-your-page-from-the-filesystem">Serving your page from the filesystem</h2>
|
||||
<p>If you want your page served from the filesystem by using URLs starting with <code>file://</code> you’ll need the following configuration in your <code>config.toml</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="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><p>The theme will append an additional <code>index.html</code> to all branch bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your <code>config.toml</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">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 class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>If you want to use the search feature from the file system using an older installation of the theme make sure to change your outputformat for the homepage from the now deprecated <code>JSON</code> to <code>SEARCH</code> <a href="#activate-search">as seen below</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="activate-search">Activate search</h2>
|
||||
<p>If not already present, add the following lines in the same <code>config.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 the root of your public folder ready to be consumed by the Lunr search library. Note that the <code>SEARCH</code> outputformat was named <code>JSON</code> in previous releases but was implemented differently. Although <code>JSON</code> still works, it is now deprecated.</p>
|
||||
<h3 id="activate-dedicated-search-page">Activate dedicated search page</h3>
|
||||
<p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to 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>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu’s search box .</p>
|
||||
<p><a href="#R-image-e9789a572ad4bb2da5eed07b3037ba3b" class="lightbox-link"><img src="../../basics/configuration/search_page.png?&width=60pc" alt="Screenshot of the 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-e9789a572ad4bb2da5eed07b3037ba3b"><img src="../../basics/configuration/search_page.png?&width=60pc" alt="Screenshot of the 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>To have Hugo create the dedicated search page successfully, you must not generate the URL <code>http://example.com/mysite/search.html</code> from your own content. This can happen if you set <code>uglyURLs=true</code> in your <code>config.toml</code> and defining a Markdown file <code>content/search.md</code>.</p>
|
||||
<p>To make sure, there is no duplicate content for any given URL of your project, run <code>hugo --printPathWarnings</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="activate-print-support">Activate print support</h2>
|
||||
<p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.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">page</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 icon in the top bar. It will switch the page to print preview when clicked. You can then send this page to the printer by using your 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The resulting URL will not be <a href="https://gohugo.io/templates/output-formats/#configure-output-formats" target="_blank">configured ugly</a> in terms of <a href="https://gohugo.io/content-management/urls/#ugly-urls" target="_blank">Hugo’s URL handling</a> even if you’ve set <code>uglyURLs=true</code> in your <code>config.toml</code>. This is due to the fact that for one mime type only one suffix can be configured.</p>
|
||||
<p>Nevertheless, if you’re unhappy with the resulting URLs you can manually redefine <code>outputFormats.PRINT</code> in your own <code>config.toml</code> to your liking.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="mathjax">MathJax</h2>
|
||||
<p>The MathJax configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See <a href="../../shortcodes/math/index.html">Math</a> for additional documentation.</p>
|
||||
<h3 id="math-example">Example</h3>
|
||||
<p>MathJax is globally disabled. By default it won’t be loaded by any page.</p>
|
||||
<p>On page “Physics” you coded some JavaScript for a dynamic formulae. You can set the MathJax parameters locally to load mathJax on this page.</p>
|
||||
<p>You also can disable MathJax for specific pages while globally enabled.</p>
|
||||
<h2 id="mermaid">Mermaid</h2>
|
||||
<p>The Mermaid configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See <a href="../../shortcodes/mermaid/index.html">Mermaid</a> for additional documentation.</p>
|
||||
<h3 id="mermaid-example">Example</h3>
|
||||
<p>Mermaid is globally disabled. By default it won’t be loaded by any page.</p>
|
||||
<p>On page “Architecture” you coded some JavaScript to dynamically generate a class diagram. You can set the Mermaid parameters locally to load mermaid on this page.</p>
|
||||
<p>You also can disable Mermaid for specific pages while globally enabled.</p>
|
||||
<h2 id="home-button-configuration">Home Button Configuration</h2>
|
||||
<p>If the <code>disableLandingPageButton</code> option is set to <code>false</code>, a Home button will appear
|
||||
on the left menu. It is an alternative for clicking on the logo. To edit the
|
||||
appearance, you will have to configure two parameters for the 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 those params are not configured for 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>The home button is going to look like this:</p>
|
||||
<p><a href="#R-image-4a493c35dabbfa197c1b133a84994330" class="lightbox-link"><img src="../../basics/configuration/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-4a493c35dabbfa197c1b133a84994330"><img src="../../basics/configuration/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>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
|
||||
|
||||
<footer class="footline">
|
||||
</footer>
|
||||
</article>
|
||||
|
|
@ -636,8 +551,8 @@ default values:</p>
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
Before 
(image error) Size: 7.4 KiB After 
(image error) Size: 7.4 KiB
|
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
|
||||
<link href="../../basics/customization/index.print.html" rel="alternate" type="text/html" title="Customization :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -83,20 +83,21 @@
|
|||
<div class="topbar-content-wrapper">
|
||||
<nav class="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#change-the-logo">Change the Logo</a></li>
|
||||
<li><a href="#change-the-favicon">Change the Favicon</a></li>
|
||||
<li><a href="#change-the-menu-width">Change the Menu Width</a></li>
|
||||
<li><a href="#theme-variant">Change the Colors</a>
|
||||
<li><a href="#serving-your-page-from-a-subfolder">Serving your page from a subfolder</a></li>
|
||||
<li><a href="#serving-your-page-from-the-filesystem">Serving your page from the filesystem</a></li>
|
||||
<li><a href="#activate-search">Activate search</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 to OS Settings</a></li>
|
||||
<li><a href="#javascript">JavaScript</a></li>
|
||||
<li><a href="#roll-your-own">Roll your Own</a></li>
|
||||
<li><a href="#activate-dedicated-search-page">Activate dedicated search page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#activate-print-support">Activate print support</a></li>
|
||||
<li><a href="#home-button-configuration">Home Button Configuration</a></li>
|
||||
<li><a href="#social-media-meta-tags">Social Media Meta Tags</a></li>
|
||||
<li><a href="#change-the-menu-width">Change the Menu Width</a></li>
|
||||
<li><a href="#own-shortcodes-with-javascript-dependencies">Own Shortcodes with JavaScript Dependencies</a></li>
|
||||
<li><a href="#output-formats">Output Formats</a></li>
|
||||
<li><a href="#react-to-variant-switches-in-javascript">React to Variant Switches in JavaScript</a></li>
|
||||
<li><a href="#partials">Partials</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -119,7 +120,7 @@
|
|||
</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="../../basics/configuration/index.html" title="Configuration (🡐)">
|
||||
<a class="topbar-control" href="../../basics/branding/index.html" title="Branding (🡐)">
|
||||
<i class="fa-fw fas fa-chevron-left"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -150,57 +151,78 @@
|
|||
</header>
|
||||
<h1 id="customization">Customization</h1>
|
||||
|
||||
<p>The Relearn theme has been built to be as configurable as possible by defining multiple <a href="https://gohugo.io/templates/partials/" target="_blank">partials</a></p>
|
||||
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this page</a>. You’d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
|
||||
<p>This theme defines the following partials :</p>
|
||||
<ul>
|
||||
<li><code>header.html</code>: the header of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>footer.html</code>: the footer of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>body.html</code>: the body of the page. The body may contain of one or many articles. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>article.html</code>: the output for a single article, can contain elements around your content. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>menu.html</code>: left menu. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>search.html</code>: search box. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>custom-header.html</code>: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include <code>style</code> HTML tag directive in your file.</li>
|
||||
<li><code>custom-footer.html</code>: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include <code>javascript</code> HTML tag directive in your file.</li>
|
||||
<li><code>favicon.html</code>: the favicon</li>
|
||||
<li><code>heading-pre.html</code>: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPre</code> setting into account.</li>
|
||||
<li><code>heading-post.html</code>: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPost</code> setting into account.</li>
|
||||
<li><code>logo.html</code>: the logo, on top left hand corner</li>
|
||||
<li><code>meta.html</code>: HTML meta tags, if you want to change default behavior</li>
|
||||
<li><code>menu-pre.html</code>: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s <code>menuPre</code> setting into account.</li>
|
||||
<li><code>menu-post.html</code>: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s <code>menuPost</code> setting into account.</li>
|
||||
<li><code>menu-footer.html</code>: footer of the the left menu</li>
|
||||
<li><code>toc.html</code>: table of contents</li>
|
||||
<li><code>content.html</code>: the content page itself. This can be overridden if you want to display page’s meta data above or below the content.</li>
|
||||
<li><code>content-header.html</code>: header above the title, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
<li><code>content-footer.html</code>: footer below the content, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
</ul>
|
||||
<h2 id="change-the-logo">Change the Logo</h2>
|
||||
<p>Create a new file in <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML you want.
|
||||
You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
|
||||
<h2 id="serving-your-page-from-a-subfolder">Serving your page from a subfolder</h2>
|
||||
<p>If your site is served from a subfolder, eg. <code>https://example.com/mysite/</code>, you have to set the following lines to your <code>config.toml</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="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">canonifyURLs</span> <span class="p">=</span> <span class="kc">true</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><p>Without <code>canonifyURLs=true</code> URLs in sublemental pages (like <code>sitemap.xml</code>, <code>rss.xml</code>) will be generated falsly while your HTML files will still work. See <a href="https://github.com/gohugoio/hugo/issues/5226" target="_blank">https://github.com/gohugoio/hugo/issues/5226</a>.</p>
|
||||
<h2 id="serving-your-page-from-the-filesystem">Serving your page from the filesystem</h2>
|
||||
<p>If you want your page served from the filesystem by using URLs starting with <code>file://</code> you’ll need the following configuration in your <code>config.toml</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="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><p>The theme will append an additional <code>index.html</code> to all page bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your <code>config.toml</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">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 class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>If you want to use the search feature from the file system using an older installation of the theme make sure to change your outputformat for the homepage from the now deprecated <code>JSON</code> to <code>SEARCH</code> <a href="#activate-search">as seen below</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="activate-search">Activate search</h2>
|
||||
<p>If not already present, add the following lines in your <code>config.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 the root of your public folder ready to be consumed by the Lunr search library. Note that the <code>SEARCH</code> outputformat was named <code>JSON</code> in previous releases but was implemented differently. Although <code>JSON</code> still works, it is now deprecated.</p>
|
||||
<h3 id="activate-dedicated-search-page">Activate dedicated search page</h3>
|
||||
<p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to 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>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu’s search box .</p>
|
||||
<p><a href="#R-image-01123e605bd347ec49489b11338286f7" class="lightbox-link"><img src="../../basics/customization/search_page.png?&width=60pc" alt="Screenshot of the 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-01123e605bd347ec49489b11338286f7"><img src="../../basics/customization/search_page.png?&width=60pc" alt="Screenshot of the 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The size of the logo will adapt automatically</p>
|
||||
<p>To have Hugo create the dedicated search page successfully, you must not generate the URL <code>http://example.com/mysite/search.html</code> from your own content. This can happen if you set <code>uglyURLs=true</code> in your <code>config.toml</code> and defining a Markdown file <code>content/search.md</code>.</p>
|
||||
<p>To make sure, there is no duplicate content for any given URL of your project, run <code>hugo --printPathWarnings</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="change-the-favicon">Change the Favicon</h2>
|
||||
<p>If your favicon is a SVG, PNG or ICO, just drop off your image in your local <code>static/images/</code> folder and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
|
||||
<p>Additionally, if you want your site to use light & dark theme favicons that follow the OS’ (and in some cases, the browser’s) color scheme, add the image files to your local <code>static/images/</code> folder and name them eg. <code>favicon-light.svg</code> and/or <code>favicon-dark.svg</code> respectively corresponding to your file format. In case one of the files is missing, the theme falls back to eg. <code>favicon.svg</code> for the missing file. All supplied favicons must be of the same file format.</p>
|
||||
<h2 id="activate-print-support">Activate print support</h2>
|
||||
<p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.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">page</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 icon in the top bar. It will switch the page to print preview when clicked. You can then send this page to the printer by using your browser’s usual print functionality.</p>
|
||||
|
||||
<div class="box notices cstyle warning">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Warning</div>
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>IE and old browser versions do not support <a href="https://caniuse.com/css-media-interaction" target="_blank">media queries</a>, which are necessary for the light & dark theme favicon option.
|
||||
If you have requirements to support IE and/or older browser versions, use one of the other options.</p>
|
||||
<p>The resulting URL will not be <a href="https://gohugo.io/templates/output-formats/#configure-output-formats" target="_blank">configured ugly</a> in terms of <a href="https://gohugo.io/content-management/urls/#ugly-urls" target="_blank">Hugo’s URL handling</a> even if you’ve set <code>uglyURLs=true</code> in your <code>config.toml</code>. This is due to the fact that for one mime type only one suffix can be configured.</p>
|
||||
<p>Nevertheless, if you’re unhappy with the resulting URLs you can manually redefine <code>outputFormats.PRINT</code> in your own <code>config.toml</code> to your liking.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
|
||||
<p>If you need to change this default behavior, create a new file in <code>layouts/partials/</code> named <code>favicon.html</code>. Then write something 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 the Menu Width</h2>
|
||||
<h2 id="home-button-configuration">Home Button Configuration</h2>
|
||||
<p>If the <code>disableLandingPageButton</code> option is set to <code>false</code>, a Home button will appear
|
||||
on the left menu. It is an alternative for clicking on the logo. To edit the
|
||||
appearance, you will have to configure the <code>landingPageName</code> for the 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 option is not configured for 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>The home button is going to look like this:</p>
|
||||
<p><a href="#R-image-98b52e596fccac090eb708c0f085e167" class="lightbox-link"><img src="../../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-98b52e596fccac090eb708c0f085e167"><img src="../../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>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
|
||||
<h2 id="change-the-menu-width">Change the Menu Width</h2>
|
||||
<p>The menu width adjusts automatically for different screen sizes.</p>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -233,49 +255,9 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<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 the Colors</h2>
|
||||
<p>The Relearn theme lets you choose between some predefined color variants in light or dark mode, but feel free to add one yourself!</p>
|
||||
<p>You can preview the shipped variants by changing them in the variant selector at the bottom of the menu.</p>
|
||||
<h3 id="single-variant">Single Variant</h3>
|
||||
<p>Set the <code>themeVariant</code> value with the name of your 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 the above example your theme file has to be named <code>theme-relearn-light.css</code></p>
|
||||
<h3 id="multiple-variants">Multiple Variants</h3>
|
||||
<p>You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the 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 with 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> Tip</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">according to Hugo’s documentation</a>, and <code>@import</code> this stylesheet in your color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> and <code>config.toml</code> of the exampleSite.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="adjust-to-os-settings">Adjust to OS Settings</h3>
|
||||
<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That’s it.</p>
|
||||
<p>If you’ve set multiple variants, you can drop <code>auto</code> at any position, but usually it makes sense to set it in the first position and make it the 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 you don’t configure anything else, the theme will use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode.</p>
|
||||
<p>If you don’t like that, you can set <code>themeVariantAuto</code>. The first element is the variant for light mode, the second for 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>This is not supported for Internet Explorer 11, which still displays in the <code>relearn-light</code> variant.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="javascript">JavaScript</h3>
|
||||
<p>Once a variant is fully loaded, either initially or by switching the variant manually with the variant selector, the custom event <code>themeVariantLoaded</code> on the <code>document</code> will be dispatched. You can add an event listener and react to 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">function</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 your Own</h3>
|
||||
<p>If you are not happy with the shipped variants you can either copy and rename one of the shipped files from <code>themes/hugo-theme-relearn/static/css</code> to <code>static/css</code>, edit them afterwards to your liking in a text editor and configure the <code>themeVariant</code> parameter in your <code>config.toml</code> or just use the <a href="../../basics/generator/index.html">interactive variant generator</a>.</p>
|
||||
<h2 id="own-shortcodes-with-javascript-dependencies">Own Shortcodes with JavaScript Dependencies</h2>
|
||||
<p>Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files. To provide this behavior to the user and extending it for his own shortcodes this can be configured.</p>
|
||||
<p>Say you want to add a shortcode <code>myshortcode</code> that also requires the <code>jquery</code> JavaScript library.</p>
|
||||
</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 Shortcodes with JavaScript Dependencies</h2>
|
||||
<p>Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files.</p>
|
||||
<p>You can you use this mechanism in your own shortcodes. Say you want to add a shortcode <code>myshortcode</code> that also requires the <code>jquery</code> JavaScript library.</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Write the shortcode file <code>layouts/shortcodes/myshortcode.html</code> and add the following line</p>
|
||||
|
|
@ -298,15 +280,38 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<p>See the <code>math</code>, <code>mermaid</code> and <code>openapi</code> shortcodes for examples.</p>
|
||||
<h2 id="output-formats">Output Formats</h2>
|
||||
<p>Certain parts of the theme can be changed for support of your own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if you define a new output format <code>PLAINTEXT</code> in your <code>config.toml</code>, you can add a file <code>layouts/partials/header.plaintext.html</code> to change the way, the page header should look like for that output format.</p>
|
||||
<h2 id="react-to-variant-switches-in-javascript">React to Variant Switches in JavaScript</h2>
|
||||
<p>Once a color variant is fully loaded, either initially or by switching the color variant manually with the variant selector, the custom event <code>themeVariantLoaded</code> on the <code>document</code> will be dispatched. You can add an event listener and react to 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">function</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>The Relearn theme has been built to be as configurable as possible by defining multiple <a href="https://gohugo.io/templates/partials/" target="_blank">partials</a></p>
|
||||
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this page</a>. You’d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
|
||||
<p>This theme defines the following partials :</p>
|
||||
<ul>
|
||||
<li><code>header.html</code>: the header of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>footer.html</code>: the footer of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>body.html</code>: the body of the page. The body may contain of one or many articles. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>article.html</code>: the output for a single article, can contain elements around your content. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>menu.html</code>: left menu. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>search.html</code>: search box. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>custom-header.html</code>: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include <code>style</code> HTML tag directive in your file.</li>
|
||||
<li><code>custom-footer.html</code>: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include <code>javascript</code> HTML tag directive in your file.</li>
|
||||
<li><code>favicon.html</code>: the favicon</li>
|
||||
<li><code>heading-pre.html</code>: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPre</code> setting into account.</li>
|
||||
<li><code>heading-post.html</code>: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPost</code> setting into account.</li>
|
||||
<li><code>logo.html</code>: the logo, on top left hand corner</li>
|
||||
<li><code>meta.html</code>: HTML meta tags, if you want to change default behavior</li>
|
||||
<li><code>menu-pre.html</code>: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s <code>menuPre</code> setting into account.</li>
|
||||
<li><code>menu-post.html</code>: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s <code>menuPost</code> setting into account.</li>
|
||||
<li><code>menu-footer.html</code>: footer of the the left menu</li>
|
||||
<li><code>toc.html</code>: table of contents</li>
|
||||
<li><code>content.html</code>: the content page itself. This can be overridden if you want to display page’s meta data above or below the content.</li>
|
||||
<li><code>content-header.html</code>: header above the title, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
<li><code>content-footer.html</code>: footer below the content, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
</ul>
|
||||
|
||||
<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="../../categories/custom/index.html">custom</a></li>
|
||||
<li><a class="term-link" href="../../categories/theming/index.html">theming</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -394,12 +399,12 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -412,6 +417,7 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class="active"><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -555,13 +561,13 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<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/basics/customization/index.html" rel="canonical" type="text/html" title="Customization :: Hugo Relearn Theme">
|
||||
<link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -93,57 +93,78 @@
|
|||
</header>
|
||||
<h1 id="customization">Customization</h1>
|
||||
|
||||
<p>The Relearn theme has been built to be as configurable as possible by defining multiple <a href="https://gohugo.io/templates/partials/" target="_blank">partials</a></p>
|
||||
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this page</a>. You’d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
|
||||
<p>This theme defines the following partials :</p>
|
||||
<ul>
|
||||
<li><code>header.html</code>: the header of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>footer.html</code>: the footer of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>body.html</code>: the body of the page. The body may contain of one or many articles. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>article.html</code>: the output for a single article, can contain elements around your content. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>menu.html</code>: left menu. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>search.html</code>: search box. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>custom-header.html</code>: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include <code>style</code> HTML tag directive in your file.</li>
|
||||
<li><code>custom-footer.html</code>: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include <code>javascript</code> HTML tag directive in your file.</li>
|
||||
<li><code>favicon.html</code>: the favicon</li>
|
||||
<li><code>heading-pre.html</code>: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPre</code> setting into account.</li>
|
||||
<li><code>heading-post.html</code>: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPost</code> setting into account.</li>
|
||||
<li><code>logo.html</code>: the logo, on top left hand corner</li>
|
||||
<li><code>meta.html</code>: HTML meta tags, if you want to change default behavior</li>
|
||||
<li><code>menu-pre.html</code>: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s <code>menuPre</code> setting into account.</li>
|
||||
<li><code>menu-post.html</code>: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s <code>menuPost</code> setting into account.</li>
|
||||
<li><code>menu-footer.html</code>: footer of the the left menu</li>
|
||||
<li><code>toc.html</code>: table of contents</li>
|
||||
<li><code>content.html</code>: the content page itself. This can be overridden if you want to display page’s meta data above or below the content.</li>
|
||||
<li><code>content-header.html</code>: header above the title, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
<li><code>content-footer.html</code>: footer below the content, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
</ul>
|
||||
<h2 id="change-the-logo">Change the Logo</h2>
|
||||
<p>Create a new file in <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML you want.
|
||||
You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
|
||||
<h2 id="serving-your-page-from-a-subfolder">Serving your page from a subfolder</h2>
|
||||
<p>If your site is served from a subfolder, eg. <code>https://example.com/mysite/</code>, you have to set the following lines to your <code>config.toml</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="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">canonifyURLs</span> <span class="p">=</span> <span class="kc">true</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><p>Without <code>canonifyURLs=true</code> URLs in sublemental pages (like <code>sitemap.xml</code>, <code>rss.xml</code>) will be generated falsly while your HTML files will still work. See <a href="https://github.com/gohugoio/hugo/issues/5226" target="_blank">https://github.com/gohugoio/hugo/issues/5226</a>.</p>
|
||||
<h2 id="serving-your-page-from-the-filesystem">Serving your page from the filesystem</h2>
|
||||
<p>If you want your page served from the filesystem by using URLs starting with <code>file://</code> you’ll need the following configuration in your <code>config.toml</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="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><p>The theme will append an additional <code>index.html</code> to all page bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your <code>config.toml</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">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 class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>If you want to use the search feature from the file system using an older installation of the theme make sure to change your outputformat for the homepage from the now deprecated <code>JSON</code> to <code>SEARCH</code> <a href="#activate-search">as seen below</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="activate-search">Activate search</h2>
|
||||
<p>If not already present, add the following lines in your <code>config.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 the root of your public folder ready to be consumed by the Lunr search library. Note that the <code>SEARCH</code> outputformat was named <code>JSON</code> in previous releases but was implemented differently. Although <code>JSON</code> still works, it is now deprecated.</p>
|
||||
<h3 id="activate-dedicated-search-page">Activate dedicated search page</h3>
|
||||
<p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to 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>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu’s search box .</p>
|
||||
<p><a href="#R-image-01123e605bd347ec49489b11338286f7" class="lightbox-link"><img src="../../basics/customization/search_page.png?&width=60pc" alt="Screenshot of the 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-01123e605bd347ec49489b11338286f7"><img src="../../basics/customization/search_page.png?&width=60pc" alt="Screenshot of the 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The size of the logo will adapt automatically</p>
|
||||
<p>To have Hugo create the dedicated search page successfully, you must not generate the URL <code>http://example.com/mysite/search.html</code> from your own content. This can happen if you set <code>uglyURLs=true</code> in your <code>config.toml</code> and defining a Markdown file <code>content/search.md</code>.</p>
|
||||
<p>To make sure, there is no duplicate content for any given URL of your project, run <code>hugo --printPathWarnings</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="change-the-favicon">Change the Favicon</h2>
|
||||
<p>If your favicon is a SVG, PNG or ICO, just drop off your image in your local <code>static/images/</code> folder and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
|
||||
<p>Additionally, if you want your site to use light & dark theme favicons that follow the OS’ (and in some cases, the browser’s) color scheme, add the image files to your local <code>static/images/</code> folder and name them eg. <code>favicon-light.svg</code> and/or <code>favicon-dark.svg</code> respectively corresponding to your file format. In case one of the files is missing, the theme falls back to eg. <code>favicon.svg</code> for the missing file. All supplied favicons must be of the same file format.</p>
|
||||
<h2 id="activate-print-support">Activate print support</h2>
|
||||
<p>You can activate print support to add the capability to print whole chapters or even the complete site. Just add the <code>PRINT</code> output format to your home, section and page in your <code>config.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">page</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 icon in the top bar. It will switch the page to print preview when clicked. You can then send this page to the printer by using your browser’s usual print functionality.</p>
|
||||
|
||||
<div class="box notices cstyle warning">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Warning</div>
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>IE and old browser versions do not support <a href="https://caniuse.com/css-media-interaction" target="_blank">media queries</a>, which are necessary for the light & dark theme favicon option.
|
||||
If you have requirements to support IE and/or older browser versions, use one of the other options.</p>
|
||||
<p>The resulting URL will not be <a href="https://gohugo.io/templates/output-formats/#configure-output-formats" target="_blank">configured ugly</a> in terms of <a href="https://gohugo.io/content-management/urls/#ugly-urls" target="_blank">Hugo’s URL handling</a> even if you’ve set <code>uglyURLs=true</code> in your <code>config.toml</code>. This is due to the fact that for one mime type only one suffix can be configured.</p>
|
||||
<p>Nevertheless, if you’re unhappy with the resulting URLs you can manually redefine <code>outputFormats.PRINT</code> in your own <code>config.toml</code> to your liking.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
|
||||
<p>If you need to change this default behavior, create a new file in <code>layouts/partials/</code> named <code>favicon.html</code>. Then write something 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 the Menu Width</h2>
|
||||
<h2 id="home-button-configuration">Home Button Configuration</h2>
|
||||
<p>If the <code>disableLandingPageButton</code> option is set to <code>false</code>, a Home button will appear
|
||||
on the left menu. It is an alternative for clicking on the logo. To edit the
|
||||
appearance, you will have to configure the <code>landingPageName</code> for the 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 option is not configured for 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>The home button is going to look like this:</p>
|
||||
<p><a href="#R-image-98b52e596fccac090eb708c0f085e167" class="lightbox-link"><img src="../../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-98b52e596fccac090eb708c0f085e167"><img src="../../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>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
|
||||
<h2 id="change-the-menu-width">Change the Menu Width</h2>
|
||||
<p>The menu width adjusts automatically for different screen sizes.</p>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -176,49 +197,9 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<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 the Colors</h2>
|
||||
<p>The Relearn theme lets you choose between some predefined color variants in light or dark mode, but feel free to add one yourself!</p>
|
||||
<p>You can preview the shipped variants by changing them in the variant selector at the bottom of the menu.</p>
|
||||
<h3 id="single-variant">Single Variant</h3>
|
||||
<p>Set the <code>themeVariant</code> value with the name of your 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 the above example your theme file has to be named <code>theme-relearn-light.css</code></p>
|
||||
<h3 id="multiple-variants">Multiple Variants</h3>
|
||||
<p>You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the 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 with 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> Tip</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">according to Hugo’s documentation</a>, and <code>@import</code> this stylesheet in your color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> and <code>config.toml</code> of the exampleSite.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="adjust-to-os-settings">Adjust to OS Settings</h3>
|
||||
<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That’s it.</p>
|
||||
<p>If you’ve set multiple variants, you can drop <code>auto</code> at any position, but usually it makes sense to set it in the first position and make it the 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 you don’t configure anything else, the theme will use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode.</p>
|
||||
<p>If you don’t like that, you can set <code>themeVariantAuto</code>. The first element is the variant for light mode, the second for 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>This is not supported for Internet Explorer 11, which still displays in the <code>relearn-light</code> variant.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="javascript">JavaScript</h3>
|
||||
<p>Once a variant is fully loaded, either initially or by switching the variant manually with the variant selector, the custom event <code>themeVariantLoaded</code> on the <code>document</code> will be dispatched. You can add an event listener and react to 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">function</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 your Own</h3>
|
||||
<p>If you are not happy with the shipped variants you can either copy and rename one of the shipped files from <code>themes/hugo-theme-relearn/static/css</code> to <code>static/css</code>, edit them afterwards to your liking in a text editor and configure the <code>themeVariant</code> parameter in your <code>config.toml</code> or just use the <a href="../../basics/generator/index.html">interactive variant generator</a>.</p>
|
||||
<h2 id="own-shortcodes-with-javascript-dependencies">Own Shortcodes with JavaScript Dependencies</h2>
|
||||
<p>Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files. To provide this behavior to the user and extending it for his own shortcodes this can be configured.</p>
|
||||
<p>Say you want to add a shortcode <code>myshortcode</code> that also requires the <code>jquery</code> JavaScript library.</p>
|
||||
</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 Shortcodes with JavaScript Dependencies</h2>
|
||||
<p>Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files.</p>
|
||||
<p>You can you use this mechanism in your own shortcodes. Say you want to add a shortcode <code>myshortcode</code> that also requires the <code>jquery</code> JavaScript library.</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Write the shortcode file <code>layouts/shortcodes/myshortcode.html</code> and add the following line</p>
|
||||
|
|
@ -241,23 +222,46 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<p>See the <code>math</code>, <code>mermaid</code> and <code>openapi</code> shortcodes for examples.</p>
|
||||
<h2 id="output-formats">Output Formats</h2>
|
||||
<p>Certain parts of the theme can be changed for support of your own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if you define a new output format <code>PLAINTEXT</code> in your <code>config.toml</code>, you can add a file <code>layouts/partials/header.plaintext.html</code> to change the way, the page header should look like for that output format.</p>
|
||||
<h2 id="react-to-variant-switches-in-javascript">React to Variant Switches in JavaScript</h2>
|
||||
<p>Once a color variant is fully loaded, either initially or by switching the color variant manually with the variant selector, the custom event <code>themeVariantLoaded</code> on the <code>document</code> will be dispatched. You can add an event listener and react to 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">function</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>The Relearn theme has been built to be as configurable as possible by defining multiple <a href="https://gohugo.io/templates/partials/" target="_blank">partials</a></p>
|
||||
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this page</a>. You’d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
|
||||
<p>This theme defines the following partials :</p>
|
||||
<ul>
|
||||
<li><code>header.html</code>: the header of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>footer.html</code>: the footer of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>body.html</code>: the body of the page. The body may contain of one or many articles. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>article.html</code>: the output for a single article, can contain elements around your content. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>menu.html</code>: left menu. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>search.html</code>: search box. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>custom-header.html</code>: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include <code>style</code> HTML tag directive in your file.</li>
|
||||
<li><code>custom-footer.html</code>: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include <code>javascript</code> HTML tag directive in your file.</li>
|
||||
<li><code>favicon.html</code>: the favicon</li>
|
||||
<li><code>heading-pre.html</code>: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPre</code> setting into account.</li>
|
||||
<li><code>heading-post.html</code>: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPost</code> setting into account.</li>
|
||||
<li><code>logo.html</code>: the logo, on top left hand corner</li>
|
||||
<li><code>meta.html</code>: HTML meta tags, if you want to change default behavior</li>
|
||||
<li><code>menu-pre.html</code>: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s <code>menuPre</code> setting into account.</li>
|
||||
<li><code>menu-post.html</code>: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s <code>menuPost</code> setting into account.</li>
|
||||
<li><code>menu-footer.html</code>: footer of the the left menu</li>
|
||||
<li><code>toc.html</code>: table of contents</li>
|
||||
<li><code>content.html</code>: the content page itself. This can be overridden if you want to display page’s meta data above or below the content.</li>
|
||||
<li><code>content-header.html</code>: header above the title, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
<li><code>content-footer.html</code>: footer below the content, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
</ul>
|
||||
|
||||
<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="../../categories/custom/index.html">custom</a></li>
|
||||
<li><a class="term-link" href="../../categories/theming/index.html">theming</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
Before 
(image error) Size: 30 KiB After 
(image error) Size: 30 KiB
|
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
|
||||
<link href="../../basics/generator/index.print.html" rel="alternate" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -135,19 +135,19 @@
|
|||
<p>This interactive tool may help you to generate your own color variant stylesheet.</p>
|
||||
|
||||
<div class="expand">
|
||||
<input type="checkbox" id="R-expand-205a5af25626a26f81d749a9ae78858b" aria-controls="R-expandcontent-205a5af25626a26f81d749a9ae78858b" >
|
||||
<label class="expand-label" for="R-expand-205a5af25626a26f81d749a9ae78858b" >
|
||||
<input type="checkbox" id="R-expand-12d409fde30485806a52856680d769ff" aria-controls="R-expandcontent-12d409fde30485806a52856680d769ff" >
|
||||
<label class="expand-label" for="R-expand-12d409fde30485806a52856680d769ff" >
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
Show usage instructions
|
||||
</label>
|
||||
<div id="R-expandcontent-205a5af25626a26f81d749a9ae78858b" class="expand-content">
|
||||
<div id="R-expandcontent-12d409fde30485806a52856680d769ff" class="expand-content">
|
||||
|
||||
<p>To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.</p>
|
||||
<p>To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.</p>
|
||||
<p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
|
||||
<p>The arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn’t overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.</p>
|
||||
<p>To better understand this select the <code>neon</code> variant and modify the different heading colors. There, colors for the heading <code>h2</code>, <code>h3</code> and <code>h4</code> are explicitly set. <code>h5</code> is not set and inherits its value from <code>h4</code>. <code>h6</code> is also not set and inherits its value from <code>h5</code>.</p>
|
||||
<p>Once you’ve changed a color, the variant switch will show a “My custom variant” entry and your changes are stored in the browser. You can <strong>browse to other pages</strong> and even close the browser <strong>without losing your changes</strong>.</p>
|
||||
<p>Once you’ve changed a color, the variant selector will show a “My custom variant” entry and your changes are stored in the browser. You can <strong>browse to other pages</strong> and even close the browser <strong>without losing your changes</strong>.</p>
|
||||
<p>Once you are satisfied, you can download the new variants file and copy it into your site’s <code>static/css</code> directory. Afterwards you have to adjust the <code>themeVariant</code> parameter in your <code>config.toml</code> to your chosen file name.</p>
|
||||
<p>Eg. if your new variants file is named <code>theme-my-custom-variant.css</code>, you have to set <code>themeVariant='my-custom-variant'</code> to use it.</p>
|
||||
</div>
|
||||
|
|
@ -279,12 +279,12 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -297,6 +297,7 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class="active"><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -440,27 +441,27 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-color.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-dispatch.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-drag.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-ease.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-interpolate.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-selection.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-timer.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-transition.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-zoom.min.js?1700469870" defer></script>
|
||||
<script src="../../js/js-yaml.min.js?1700469870" defer></script>
|
||||
<script src="../../js/mermaid.min.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-color.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-dispatch.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-drag.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-ease.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-interpolate.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-selection.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-timer.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-transition.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-zoom.min.js?1700524446" defer></script>
|
||||
<script src="../../js/js-yaml.min.js?1700524446" defer></script>
|
||||
<script src="../../js/mermaid.min.js?1700524446" defer></script>
|
||||
<script>
|
||||
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
|
||||
</script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/generator/index.html" rel="canonical" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
|
||||
<link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -96,19 +96,19 @@
|
|||
<p>This interactive tool may help you to generate your own color variant stylesheet.</p>
|
||||
|
||||
<div class="expand">
|
||||
<input type="checkbox" id="R-expand-205a5af25626a26f81d749a9ae78858b" aria-controls="R-expandcontent-205a5af25626a26f81d749a9ae78858b" >
|
||||
<label class="expand-label" for="R-expand-205a5af25626a26f81d749a9ae78858b" >
|
||||
<input type="checkbox" id="R-expand-12d409fde30485806a52856680d769ff" aria-controls="R-expandcontent-12d409fde30485806a52856680d769ff" >
|
||||
<label class="expand-label" for="R-expand-12d409fde30485806a52856680d769ff" >
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
Show usage instructions
|
||||
</label>
|
||||
<div id="R-expandcontent-205a5af25626a26f81d749a9ae78858b" class="expand-content">
|
||||
<div id="R-expandcontent-12d409fde30485806a52856680d769ff" class="expand-content">
|
||||
|
||||
<p>To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.</p>
|
||||
<p>To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.</p>
|
||||
<p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
|
||||
<p>The arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn’t overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.</p>
|
||||
<p>To better understand this select the <code>neon</code> variant and modify the different heading colors. There, colors for the heading <code>h2</code>, <code>h3</code> and <code>h4</code> are explicitly set. <code>h5</code> is not set and inherits its value from <code>h4</code>. <code>h6</code> is also not set and inherits its value from <code>h5</code>.</p>
|
||||
<p>Once you’ve changed a color, the variant switch will show a “My custom variant” entry and your changes are stored in the browser. You can <strong>browse to other pages</strong> and even close the browser <strong>without losing your changes</strong>.</p>
|
||||
<p>Once you’ve changed a color, the variant selector will show a “My custom variant” entry and your changes are stored in the browser. You can <strong>browse to other pages</strong> and even close the browser <strong>without losing your changes</strong>.</p>
|
||||
<p>Once you are satisfied, you can download the new variants file and copy it into your site’s <code>static/css</code> directory. Afterwards you have to adjust the <code>themeVariant</code> parameter in your <code>config.toml</code> to your chosen file name.</p>
|
||||
<p>Eg. if your new variants file is named <code>theme-my-custom-variant.css</code>, you have to set <code>themeVariant='my-custom-variant'</code> to use it.</p>
|
||||
</div>
|
||||
|
|
@ -159,22 +159,22 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-color.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-dispatch.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-drag.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-ease.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-interpolate.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-selection.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-timer.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-transition.min.js?1700469870" defer></script>
|
||||
<script src="../../js/d3/d3-zoom.min.js?1700469870" defer></script>
|
||||
<script src="../../js/js-yaml.min.js?1700469870" defer></script>
|
||||
<script src="../../js/mermaid.min.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-color.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-dispatch.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-drag.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-ease.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-interpolate.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-selection.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-timer.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-transition.min.js?1700524446" defer></script>
|
||||
<script src="../../js/d3/d3-zoom.min.js?1700524446" defer></script>
|
||||
<script src="../../js/js-yaml.min.js?1700524446" defer></script>
|
||||
<script src="../../js/mermaid.min.js?1700524446" defer></script>
|
||||
<script>
|
||||
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
|
||||
</script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
|
||||
<link href="../../basics/history/index.print.html" rel="alternate" type="text/html" title="History :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -2255,12 +2255,12 @@
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -2273,6 +2273,7 @@
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -2416,13 +2417,13 @@
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/history/index.html" rel="canonical" type="text/html" title="History :: Hugo Relearn Theme">
|
||||
<link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -1426,8 +1426,8 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469871" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469871" defer></script>
|
||||
<script src="../../js/theme.js?1700469871" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
|
||||
<link href="../basics/index.print.html" rel="alternate" type="text/html" title="Basics :: Hugo Relearn Theme">
|
||||
<link href="../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../js/url.js?1700469870"></script>
|
||||
<script src="../js/variant.js?1700469870"></script>
|
||||
<link href="../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../js/url.js?1700524445"></script>
|
||||
<script src="../js/variant.js?1700524445"></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
|
||||
|
|
@ -222,12 +222,12 @@
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../js/search.js?1700469870" defer></script>
|
||||
<script src="../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -240,6 +240,7 @@
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -383,13 +384,13 @@
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../js/theme.js?1700469870" defer></script>
|
||||
<script src="../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/index.html" rel="canonical" type="text/html" title="Basics :: Hugo Relearn Theme">
|
||||
<link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
|
||||
<link href="../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../js/url.js?1700469870"></script>
|
||||
<script src="../js/variant.js?1700469870"></script>
|
||||
<link href="../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../js/url.js?1700524446"></script>
|
||||
<script src="../js/variant.js?1700524446"></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
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
<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">author</span><span class="p">.</span><span class="nx">name</span> <span class="p">=</span> <span class="s2">"Hugo"</span></span></span></code></pre></div></li>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Taxonomy <a href="https://gohugo.io/content-management/taxonomies/#add-custom-metadata-to-a-taxonomy-or-term" target="_blank">term pages</a> now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your <code>config.toml</code> by adding <code>disableTermBreadcrumbs=true</code>.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Taxonomy <a href="https://gohugo.io/content-management/taxonomies#add-custom-metadata-to-a-taxonomy-or-term" target="_blank">term pages</a> now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your <code>config.toml</code> by adding <code>disableTermBreadcrumbs=true</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Taxonomy and term pages are now allowed to contain content. This is added inbetween the title and the page list.</p>
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> It is now possible to adjust the menu width for your whole site. <a href="../basics/customization/index.html#change-the-menu-width">See the docs</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. <a href="../basics/configuration/index.html#social-media-meta-tags">See the docs</a>.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. <a href="../basics/customization/index.html#social-media-meta-tags">See the docs</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release comes with additional sort options for the menu and the <a href="../shortcodes/children/index.html"><code>children</code> shortcode</a>. Both will now accept the following values: <code>weight</code>, <code>title</code>, <code>linktitle</code>, <code>modifieddate</code>, <code>expirydate</code>, <code>publishdate</code>, <code>date</code>, <code>length</code> or <code>default</code> (adhering to Hugo’s default sort order).</p>
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
<h2 id="5210">5.21.0 (2023-09-18)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your <code>menu-footer.html</code> <a href="../basics/customization/index.html">partial overridden</a>, you may want to review the styling (eg. margins/paddings) of your partial.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your <code>menu-footer.html</code> <a href="../basics/customization/index.html#partials">partial overridden</a>, you may want to review the styling (eg. margins/paddings) of your partial.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release comes with an awesome new feature, that allows you to customize your topbar buttons, change behavior, reorder them or define entirely new ones, unique to your installation. See <a href="../basics/topbar/index.html">the documentation</a> for further details.</p>
|
||||
|
|
@ -292,7 +292,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme has added two new color variants <code>zen-light</code> and <code>zen-dark</code>. Check it out!</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now <a href="../basics/customization/index.html#javascript">dispatches the custom event</a> <code>themeVariantLoaded</code> on the <code>document</code> when the variant is fully loaded either initially or by switching the variant manually with the variant selector.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now <a href="../basics/customization/index.html#react-to-variant-switches-in-javascript">dispatches the custom event</a> <code>themeVariantLoaded</code> on the <code>document</code> when the variant is fully loaded either initially or by switching the variant manually with the variant selector.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme has updated its Mermaid dependency to 10.3.1. This adds support for the <a href="../shortcodes/mermaid/index.html#sankey">sankey diagram type</a> and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).</p>
|
||||
|
|
@ -437,7 +437,7 @@
|
|||
<p>The default setting of <code>on</code>, in effect since 1.1.0, changed back to <code>off</code> as there was interference with scrolling on mobile and big pages.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../basics/customization/index.html#adjust-to-os-settings">adapt to your OS’s light/dark mode setting</a>.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../basics/branding/index.html#adjust-to-os-settings">adapt to your OS’s light/dark mode setting</a>.</p>
|
||||
<p>This is also the new default setting if you haven’t configured <code>themeVariant</code> in your <code>config.toml</code>.</p>
|
||||
<p>Additionally you can configure the variants to be taken for light/dark mode with the new <code>themeVariantAuto</code> parameter.</p>
|
||||
<p>This is not supported for Internet Explorer 11, which still displays in the <code>relearn-light</code> variant.</p>
|
||||
|
|
@ -536,7 +536,7 @@
|
|||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release introduces an additional dedicated search page. On this page, displayed search results have more space making it easier scanning thru large number of results.</p>
|
||||
<p>To activate this feature, you need to <a href="../basics/configuration/index.html#activate-dedicated-search-page">configure it</a> in your <code>config.toml</code> as a new outputformat <code>SEARCHPAGE</code> for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.</p>
|
||||
<p>To activate this feature, you need to <a href="../basics/customization/index.html#activate-dedicated-search-page">configure it</a> in your <code>config.toml</code> as a new outputformat <code>SEARCHPAGE</code> for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.</p>
|
||||
<p>You can access the search page by either clicking on the magnifier glass or pressing enter inside of the search box.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -546,7 +546,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You are now able to turn off the generation of generator meta tags in your HTML head to hide the used versions of Hugo and this theme.</p>
|
||||
<p>To <a href="../basics/configuration/index.html#global-site-parameters">configure this</a> in your <code>config.toml</code> make sure to set Hugo’s <code>disableHugoGeneratorInject=true</code> <strong>and</strong> also <code>[params] disableGeneratorVersion=true</code>, otherwise Hugo will generate a meta tag into your home page automagically.</p>
|
||||
<p>To <a href="../basics/configuration/index.html">configure this</a> in your <code>config.toml</code> make sure to set Hugo’s <code>disableHugoGeneratorInject=true</code> <strong>and</strong> also <code>[params] disableGeneratorVersion=true</code>, otherwise Hugo will generate a meta tag into your home page automagically.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Creation of your project gets a little bit faster with this release.</p>
|
||||
|
|
@ -580,7 +580,7 @@
|
|||
<h2 id="540">5.4.0 (2022-11-01)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> <a href="../basics/configuration/index.html#serving-your-page-from-the-filesystem">With the proper settings</a> in your <code>config.toml</code> your page is now servable from the local file system using <code>file://</code> URLs.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> <a href="../basics/customization/index.html#serving-your-page-from-the-filesystem">With the proper settings</a> in your <code>config.toml</code> your page is now servable from the local file system using <code>file://</code> URLs.</p>
|
||||
<p>Please note that the searchbox will only work for this if you reconfigure your outputformat for the homepage in your <code>config.toml</code> from <code>JSON</code> to <code>SEARCH</code>. The now deprecated <code>JSON</code> outputformat still works as before, so there is no need to reconfigure your installation if it is only served from <code>http://</code> or <code>https://</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -606,7 +606,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> <a href="../cont/markdown/index.html#add-css-classes">Image formatting</a> has two new classes to align images to the <code>left</code> or <code>right</code>. Additionally, the already existing <code>inline</code> option is now documented.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Printing for the <a href="../shortcodes/openapi/index.html"><code>swagger</code> shortcode</a> was optimized to expand sections that are usually closed in interactive mode. This requires <a href="../basics/configuration/index.html#activate-print-support">print support</a> to be configured.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Printing for the <a href="../shortcodes/openapi/index.html"><code>swagger</code> shortcode</a> was optimized to expand sections that are usually closed in interactive mode. This requires <a href="../basics/customization/index.html#activate-print-support">print support</a> to be configured.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -719,7 +719,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> If you prefer expandable/collapsible menu items, you can now set <code>collapsibleMenu=true</code> in your <code>config.toml</code>. This will add arrows to all menu items that contain sub menus. The menu will expand/collapse without navigation if you click on an arrow.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can activate <a href="../basics/configuration/index.html#activate-print-support">print support</a> in your <code>config.toml</code> to add the capability to print whole chapters or even the complete site.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can activate <a href="../basics/customization/index.html#activate-print-support">print support</a> in your <code>config.toml</code> to add the capability to print whole chapters or even the complete site.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Translation into Traditional Chinese.</p>
|
||||
|
|
@ -758,12 +758,12 @@
|
|||
<h2 id="300">3.0.0 (2022-02-22)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We made changes to the menu footer. If you have your <code>menu-footer.html</code> <a href="../basics/customization/index.html">partial overridden</a>, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the <code>menu-footer.html</code> partial that is coming with the exampleSite.</p>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We made changes to the menu footer. If you have your <code>menu-footer.html</code> <a href="../basics/customization/index.html#partials">partial overridden</a>, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the <code>menu-footer.html</code> partial that is coming with the exampleSite.</p>
|
||||
<p>This change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and <em>Clear history</em> functionality).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.</p>
|
||||
<p>This change will only affect your installation if you’ve not set the <code>themeVariant</code> parameter in your <code>config.toml</code>. <a href="../basics/customization/index.html#theme-variant">If you still want to use the Learn color variant</a>, you have to explicitly set <code>themeVariant="learn"</code> in your <code>config.toml</code>.</p>
|
||||
<p>This change will only affect your installation if you’ve not set the <code>themeVariant</code> parameter in your <code>config.toml</code>. <a href="../basics/branding/index.html#theme-variant">If you still want to use the Learn color variant</a>, you have to explicitly set <code>themeVariant="learn"</code> in your <code>config.toml</code>.</p>
|
||||
<p>Note, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -774,15 +774,15 @@
|
|||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> With this release you are now capable to define your own <em>dark mode</em> variants.</p>
|
||||
<p>To make this possible, we have introduced a lot more color variables you can use in <a href="../basics/customization/index.html#theme-variant">your color variants</a>. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.</p>
|
||||
<p>To make this possible, we have introduced a lot more color variables you can use in <a href="../basics/branding/index.html#theme-variant">your color variants</a>. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.</p>
|
||||
<p>To see what’s now possible, see the new variants <code>relearn-dark</code> and <code>neon</code> that are coming with this release.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> To make the creation of new variants easier for you, we’ve added a new interactive <a href="../basics/generator/index.html">theme variant generator</a>. This feature will not work with Internet Explorer 11.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can now configure multiple color variants in your <code>config.toml</code>. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer. See the <a href="../basics/customization/index.html#multiple-variants">documentation</a> for configuration.</p>
|
||||
<p>Note, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant switcher will not be displayed with Internet Explorer 11.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can now configure multiple color variants in your <code>config.toml</code>. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer. See the <a href="../basics/branding/index.html#multiple-variants">documentation</a> for configuration.</p>
|
||||
<p>Note, that the new variant selector will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant selector will not be displayed with Internet Explorer 11.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -842,7 +842,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now supports favicons served from <code>static/images/</code> named as <code>favicon</code> or <code>logo</code> in SVG, PNG or ICO format <a href="../basics/customization/index.html#change-the-favicon">out of the box</a>. An overridden partial <code>layouts/partials/favicon.html</code> may not be necessary anymore in most cases.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can hide the table of contents menu for the whole site by setting the <code>disableToc</code> option in your <code>config.toml</code>. For an example see <a href="../basics/configuration/index.html#global-site-parameters">the example configuration</a>.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can hide the table of contents menu for the whole site by setting the <code>disableToc</code> option in your <code>config.toml</code>. For an example see <a href="../basics/configuration/index.html">the example configuration</a>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -853,7 +853,7 @@
|
|||
<hr>
|
||||
<h2 id="260">2.6.0 (2021-10-21)</h2>
|
||||
<ul>
|
||||
<li><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Your site can now be served from a subfolder if you set <code>baseURL</code> and <code>canonifyURLs=true</code> in your <code>config.toml</code>. See the <a href="../basics/configuration/index.html#a-word-on-running-your-site-in-a-subfolder">documentation</a> for a detailed example.</li>
|
||||
<li><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Your site can now be served from a subfolder if you set <code>baseURL</code> and <code>canonifyURLs=true</code> in your <code>config.toml</code>. See the <a href="../basics/customization/index.html#serving-your-page-from-a-subfolder">documentation</a> for a detailed example.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h2 id="250">2.5.0 (2021-10-08)</h2>
|
||||
|
|
@ -938,7 +938,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can define the expansion state of your menus in the frontmatter. Please see further <a href="../cont/pages/index.html#override-expand-state-rules-for-menu-entries">documentation</a> for possible values and default behavior.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> New partials for defining pre/post content for menu items and the content. See <a href="../basics/customization/index.html">documentation</a> for further reading.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> New partials for defining pre/post content for menu items and the content. See <a href="../basics/customization/index.html#partials">documentation</a> for further reading.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Shortcode <a href="../shortcodes/children/index.html"><code>children</code></a> with new parameter <code>containerstyle</code>.</p>
|
||||
|
|
@ -984,8 +984,8 @@
|
|||
|
||||
<p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
|
||||
<p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
|
||||
<p><a href="#R-image-7613ff27b9f7f9cc48ba00cac50c4966" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-7613ff27b9f7f9cc48ba00cac50c4966"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-bc832cbf95c2eb69ac41195988228cde" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-bc832cbf95c2eb69ac41195988228cde"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
|
||||
<footer class="footline">
|
||||
<div class=" taxonomy-categories term-list cstyle " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||||
|
|
@ -1033,8 +1033,8 @@
|
|||
</span></span><span class="line"><span class="cl"><span class="gh"># Basics
|
||||
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>
|
||||
</span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
|
||||
<p><a href="#R-image-3ed9f9d5f63423cb3089389b3261b90d" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" 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-3ed9f9d5f63423cb3089389b3261b90d"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-148898ca8e525ec17bff453af08a72f9" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" 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-148898ca8e525ec17bff453af08a72f9"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
|
||||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
|
||||
<p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
|
||||
|
|
@ -1077,18 +1077,17 @@
|
|||
</header>
|
||||
<h1 id="configuration">Configuration</h1>
|
||||
|
||||
<h2 id="global-site-parameters">Global site parameters</h2>
|
||||
<p>On top of <a href="https://gohugo.io/overview/configuration/" target="_blank">Hugo global configuration</a>, the Relearn theme lets you define the following parameters in your <code>config.toml</code> (here, values are default).</p>
|
||||
<p>Note that some of these parameters are explained in details in other sections of this documentation.</p>
|
||||
<p>On top of <a href="https://gohugo.io/overview/configuration/" target="_blank">Hugo’s global configuration options</a>, the Relearn theme lets you define further options unique to the theme in your <code>config.toml</code>. The defaults are written in the comments of each option.</p>
|
||||
<p>Note that some of these options are explained in detail in other sections of this documentation.</p>
|
||||
|
||||
|
||||
<div class="tab-panel" data-tab-group="c284f2eeee835d8927d1d6498bfca50a">
|
||||
<div class="tab-panel" data-tab-group="42cda267a13304d1728dc24dcf8f3ca9">
|
||||
<div class="tab-nav">
|
||||
<div class="tab-nav-title">​</div>
|
||||
<button
|
||||
data-tab-item="configtoml"
|
||||
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
||||
onclick="switchTab('c284f2eeee835d8927d1d6498bfca50a','configtoml')"
|
||||
onclick="switchTab('42cda267a13304d1728dc24dcf8f3ca9','configtoml')"
|
||||
>
|
||||
<span class="tab-nav-text">config.toml</span>
|
||||
</button>
|
||||
|
|
@ -1177,7 +1176,7 @@
|
|||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># The color variants used for auto mode.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># Default: [ "relearn-light", "relearn-dark" ], overwritten by the first</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options from themeVariant if existant.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options of your `themeVariant` option if present.</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># The auto variant defines how your site adjusts to your selected OS settings</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># for light/dark mode. The first array element is the variant for light mode,</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c"># the second for dark mode.</span>
|
||||
|
|
@ -1523,14 +1522,130 @@
|
|||
</span></span><span class="line"><span class="cl"><span class="nx">customOpenapiURL</span> <span class="p">=</span> <span class="s2">""</span> <span class="c"># "https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"</span></span></span></code></pre></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 id="serving-your-page-from-a-subfolder">Serving your page from a subfolder</h2>
|
||||
</div>
|
||||
<footer class="footline">
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="default">
|
||||
<header class="headline">
|
||||
</header>
|
||||
<h1 id="branding">Branding</h1>
|
||||
|
||||
<p>The Relearn theme provides configuration options to change your your site’s colors, favicon and logo. This allows you to easily align your site visuals to your desired style. Most of these options are exposed thru so called color variants.</p>
|
||||
<p>A color variant lets you customize various visual effects of your site like almost any color, used fonts, color schemes of print, syntax highligtning, Mermaid and the OpenAPI shortcode, etc. It contains of a CSS file and optional configuration options in your <code>config.toml</code>.</p>
|
||||
<p>The Relearn theme ships with a wide set of different color variants. You can use them as-is, copy them over and use them as a starting point for your customizations or just create completely new variants unique to your site. The <a href="../basics/generator/index.html">interactive variant generator</a> may help you with this task.</p>
|
||||
<p>Once configured in your <code>config.toml</code>, you can select them with the variant selector at the bottom of the menu.</p>
|
||||
<h2 id="theme-variant">Change the Variant (Simple)</h2>
|
||||
<h3 id="single-variant">Single Variant</h3>
|
||||
<p>Set the <code>themeVariant</code> value to the name of your theme file. That’s it! Your site will be displayed in this variant only.</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>
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>Your theme variant file must reside in your site’s <code>static/css</code> directory or in the theme’s <code>static/css</code> directory and the file name must start with <code>theme-</code> and end wit <code>.css</code>. In the above example, the path of your theme file must be <code>static/css/theme-relearn-light.css</code>.</p>
|
||||
<p>If you want to make changes to a shipped color variant, create a copy in your site’s <code>static/css</code> directory. Don’t edit the file in the theme’s directory!</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="multiple-variants">Multiple Variants</h3>
|
||||
<p>You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.</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">"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> Tip</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The theme provides an advanced configuration mode, combining the functionality for multiple variants with the below possibilities of adjusting to your OS settings, logo and syntax highlightning and even more!</p>
|
||||
<p>Although all options documented here are still working, the advanced configuration options are the recommended way to configure your color variants. <a href="#theme-variant-advanced">See below</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="adjust-to-os-settings">Adjust to OS Settings</h2>
|
||||
<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That’s it.</p>
|
||||
<p>You can use the <code>auto</code> value with the single or multiple variants option. If you are using multiple variants, you can drop <code>auto</code> at any position in the option’s array, but usually it makes sense to set it in the first position and make it the 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 you don’t configure anything else, the theme will default to use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode. These defaults are overwritten by the first two non-auto options of your <code>themeVariant</code> option if present.</p>
|
||||
<p>In the above example, you would end with <code>red</code> for light mode and the default of <code>relearn-dark</code> for dark mode.</p>
|
||||
<p>If you don’t like that behavior, you can explicitly set <code>themeVariantAuto</code>. The first entry in the array is the color variant for light mode, the second for 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><h2 id="change-the-favicon">Change the Favicon</h2>
|
||||
<p>If your favicon is a SVG, PNG or ICO, just drop your image in your site’s <code>static/images/</code> directory and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
|
||||
<p>If you want to adjust your favicon according to your OS settings for light/dark mode, add the image files <code>static/images/favicon-light.svg</code> and <code>static/images/favicon-dark.svg</code> to your site’s directory, respectively, corresponding to your file format. In case some of the files are missing, the theme falls back to <code>favicon.svg</code> for each missing file. All supplied favicons must be of the same file format.</p>
|
||||
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
|
||||
<p>If you need to change this default behavior, create a new file <code>layouts/partials/favicon.html</code> in your site’s directory and write something 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-logo">Change the Logo</h2>
|
||||
<p>Create a new file in <code>layouts/partials/logo.html</code> of your site. Then write any HTML you want. You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
|
||||
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The size of the logo will adapt automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="syntax-highlightning">Syntax highlightning</h2>
|
||||
<p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">according to Hugo’s documentation</a>. Then, <code>@import</code> the syntax highlightning stylesheet in your color variant stylesheet.</p>
|
||||
<p>For an example, take a look into <code>theme-relearn-light.css</code> and <code>config.toml</code> of the exampleSite.</p>
|
||||
<p>If you want to reconfigure just the syntax highlighting of an existing color variant, you need to copy the file to your site’s directory and adjust it accordingly.</p>
|
||||
<h2 id="theme-variant-advanced">Change the Variant (Advanced)</h2>
|
||||
<p>The theme offers a new way to configure theme variants and all of the aspects above inside of a single configuration item. This comes with some features previously unsupported.</p>
|
||||
<p>Like with the <a href="#multiple-variants">multiple variants</a> option, you are defining your theme variants in an array but now <em>not by simple strings</em> <strong>but in a table with suboptions</strong>.</p>
|
||||
<p>Again, in this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.</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">"relearn-light"</span><span class="p">,</span> <span class="s2">"relearn-dark"</span> <span class="p">]</span></span></span></code></pre></div><p>you now write it that way:</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="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"relearn-light"</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">themeVariant</span><span class="p">]]</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"relearn-dark"</span></span></span></code></pre></div><p>The <code>identifier</code> option is mandatory and equivalent to the string in the first example. Further options can be configured, see the table below.</p>
|
||||
<h3 id="parameter">Parameter</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>identifier</td>
|
||||
<td><em><empty></em></td>
|
||||
<td>Must correspond to the name of a color variant either in your site’s or the theme’s directory in the form <code>static/css/theme-<IDENTIFIER>.css</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>name</td>
|
||||
<td>see notes</td>
|
||||
<td>The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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="../categories/custom/index.html">custom</a></li>
|
||||
<li><a class="term-link" href="../categories/theming/index.html">theming</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="default">
|
||||
<header class="headline">
|
||||
</header>
|
||||
<h1 id="customization">Customization</h1>
|
||||
|
||||
<h2 id="serving-your-page-from-a-subfolder">Serving your page from a subfolder</h2>
|
||||
<p>If your site is served from a subfolder, eg. <code>https://example.com/mysite/</code>, you have to set the following lines to your <code>config.toml</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="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">canonifyURLs</span> <span class="p">=</span> <span class="kc">true</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><p>Without <code>canonifyURLs=true</code> URLs in sublemental pages (like <code>sitemap.xml</code>, <code>rss.xml</code>) will be generated falsly while your HTML files will still work. See <a href="https://github.com/gohugoio/hugo/issues/5226" target="_blank">https://github.com/gohugoio/hugo/issues/5226</a>.</p>
|
||||
<h2 id="serving-your-page-from-the-filesystem">Serving your page from the filesystem</h2>
|
||||
<p>If you want your page served from the filesystem by using URLs starting with <code>file://</code> you’ll need the following configuration in your <code>config.toml</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="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><p>The theme will append an additional <code>index.html</code> to all branch bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your <code>config.toml</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="nx">relativeURLs</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div><p>The theme will append an additional <code>index.html</code> to all page bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your <code>config.toml</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">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 class="box notices cstyle note">
|
||||
|
|
@ -1541,15 +1656,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<h2 id="activate-search">Activate search</h2>
|
||||
<p>If not already present, add the following lines in the same <code>config.toml</code> file.</p>
|
||||
<p>If not already present, add the following lines in your <code>config.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 the root of your public folder ready to be consumed by the Lunr search library. Note that the <code>SEARCH</code> outputformat was named <code>JSON</code> in previous releases but was implemented differently. Although <code>JSON</code> still works, it is now deprecated.</p>
|
||||
<h3 id="activate-dedicated-search-page">Activate dedicated search page</h3>
|
||||
<p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to 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>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu’s search box .</p>
|
||||
<p><a href="#R-image-e9789a572ad4bb2da5eed07b3037ba3b" class="lightbox-link"><img src="../basics/configuration/search_page.png?&width=60pc" alt="Screenshot of the 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-e9789a572ad4bb2da5eed07b3037ba3b"><img src="../basics/configuration/search_page.png?&width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-01123e605bd347ec49489b11338286f7" class="lightbox-link"><img src="../basics/customization/search_page.png?&width=60pc" alt="Screenshot of the 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-01123e605bd347ec49489b11338286f7"><img src="../basics/customization/search_page.png?&width=60pc" alt="Screenshot of the 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> Note</div>
|
||||
|
|
@ -1574,22 +1689,10 @@
|
|||
<p>Nevertheless, if you’re unhappy with the resulting URLs you can manually redefine <code>outputFormats.PRINT</code> in your own <code>config.toml</code> to your liking.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="mathjax">MathJax</h2>
|
||||
<p>The MathJax configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See <a href="../shortcodes/math/index.html">Math</a> for additional documentation.</p>
|
||||
<h3 id="math-example">Example</h3>
|
||||
<p>MathJax is globally disabled. By default it won’t be loaded by any page.</p>
|
||||
<p>On page “Physics” you coded some JavaScript for a dynamic formulae. You can set the MathJax parameters locally to load mathJax on this page.</p>
|
||||
<p>You also can disable MathJax for specific pages while globally enabled.</p>
|
||||
<h2 id="mermaid">Mermaid</h2>
|
||||
<p>The Mermaid configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See <a href="../shortcodes/mermaid/index.html">Mermaid</a> for additional documentation.</p>
|
||||
<h3 id="mermaid-example">Example</h3>
|
||||
<p>Mermaid is globally disabled. By default it won’t be loaded by any page.</p>
|
||||
<p>On page “Architecture” you coded some JavaScript to dynamically generate a class diagram. You can set the Mermaid parameters locally to load mermaid on this page.</p>
|
||||
<p>You also can disable Mermaid for specific pages while globally enabled.</p>
|
||||
<h2 id="home-button-configuration">Home Button Configuration</h2>
|
||||
<p>If the <code>disableLandingPageButton</code> option is set to <code>false</code>, a Home button will appear
|
||||
on the left menu. It is an alternative for clicking on the logo. To edit the
|
||||
appearance, you will have to configure two parameters for the defined languages:</p>
|
||||
appearance, you will have to configure the <code>landingPageName</code> for the 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>
|
||||
|
|
@ -1600,74 +1703,13 @@ appearance, you will have to configure two parameters for the defined languages:
|
|||
</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 those params are not configured for a specific language, they will get their
|
||||
default values:</p>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this option is not configured for 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>The home button is going to look like this:</p>
|
||||
<p><a href="#R-image-4a493c35dabbfa197c1b133a84994330" class="lightbox-link"><img src="../basics/configuration/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-4a493c35dabbfa197c1b133a84994330"><img src="../basics/configuration/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-98b52e596fccac090eb708c0f085e167" class="lightbox-link"><img src="../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-98b52e596fccac090eb708c0f085e167"><img src="../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>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
|
||||
|
||||
<footer class="footline">
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="default">
|
||||
<header class="headline">
|
||||
</header>
|
||||
<h1 id="customization">Customization</h1>
|
||||
|
||||
<p>The Relearn theme has been built to be as configurable as possible by defining multiple <a href="https://gohugo.io/templates/partials/" target="_blank">partials</a></p>
|
||||
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this page</a>. You’d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
|
||||
<p>This theme defines the following partials :</p>
|
||||
<ul>
|
||||
<li><code>header.html</code>: the header of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>footer.html</code>: the footer of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>body.html</code>: the body of the page. The body may contain of one or many articles. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>article.html</code>: the output for a single article, can contain elements around your content. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>menu.html</code>: left menu. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>search.html</code>: search box. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>custom-header.html</code>: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include <code>style</code> HTML tag directive in your file.</li>
|
||||
<li><code>custom-footer.html</code>: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include <code>javascript</code> HTML tag directive in your file.</li>
|
||||
<li><code>favicon.html</code>: the favicon</li>
|
||||
<li><code>heading-pre.html</code>: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPre</code> setting into account.</li>
|
||||
<li><code>heading-post.html</code>: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPost</code> setting into account.</li>
|
||||
<li><code>logo.html</code>: the logo, on top left hand corner</li>
|
||||
<li><code>meta.html</code>: HTML meta tags, if you want to change default behavior</li>
|
||||
<li><code>menu-pre.html</code>: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s <code>menuPre</code> setting into account.</li>
|
||||
<li><code>menu-post.html</code>: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s <code>menuPost</code> setting into account.</li>
|
||||
<li><code>menu-footer.html</code>: footer of the the left menu</li>
|
||||
<li><code>toc.html</code>: table of contents</li>
|
||||
<li><code>content.html</code>: the content page itself. This can be overridden if you want to display page’s meta data above or below the content.</li>
|
||||
<li><code>content-header.html</code>: header above the title, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
<li><code>content-footer.html</code>: footer below the content, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
</ul>
|
||||
<h2 id="change-the-logo">Change the Logo</h2>
|
||||
<p>Create a new file in <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML you want.
|
||||
You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
|
||||
|
||||
<div class="box notices cstyle note">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>The size of the logo will adapt automatically</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="change-the-favicon">Change the Favicon</h2>
|
||||
<p>If your favicon is a SVG, PNG or ICO, just drop off your image in your local <code>static/images/</code> folder and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
|
||||
<p>Additionally, if you want your site to use light & dark theme favicons that follow the OS’ (and in some cases, the browser’s) color scheme, add the image files to your local <code>static/images/</code> folder and name them eg. <code>favicon-light.svg</code> and/or <code>favicon-dark.svg</code> respectively corresponding to your file format. In case one of the files is missing, the theme falls back to eg. <code>favicon.svg</code> for the missing file. All supplied favicons must be of the same file format.</p>
|
||||
|
||||
<div class="box notices cstyle warning">
|
||||
<div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> Warning</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>IE and old browser versions do not support <a href="https://caniuse.com/css-media-interaction" target="_blank">media queries</a>, which are necessary for the light & dark theme favicon option.
|
||||
If you have requirements to support IE and/or older browser versions, use one of the other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
|
||||
<p>If you need to change this default behavior, create a new file in <code>layouts/partials/</code> named <code>favicon.html</code>. Then write something 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 the Menu Width</h2>
|
||||
<h2 id="change-the-menu-width">Change the Menu Width</h2>
|
||||
<p>The menu width adjusts automatically for different screen sizes.</p>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -1700,49 +1742,9 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<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 the Colors</h2>
|
||||
<p>The Relearn theme lets you choose between some predefined color variants in light or dark mode, but feel free to add one yourself!</p>
|
||||
<p>You can preview the shipped variants by changing them in the variant selector at the bottom of the menu.</p>
|
||||
<h3 id="single-variant">Single Variant</h3>
|
||||
<p>Set the <code>themeVariant</code> value with the name of your 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 the above example your theme file has to be named <code>theme-relearn-light.css</code></p>
|
||||
<h3 id="multiple-variants">Multiple Variants</h3>
|
||||
<p>You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the 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 with 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> Tip</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">according to Hugo’s documentation</a>, and <code>@import</code> this stylesheet in your color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> and <code>config.toml</code> of the exampleSite.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="adjust-to-os-settings">Adjust to OS Settings</h3>
|
||||
<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That’s it.</p>
|
||||
<p>If you’ve set multiple variants, you can drop <code>auto</code> at any position, but usually it makes sense to set it in the first position and make it the 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 you don’t configure anything else, the theme will use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode.</p>
|
||||
<p>If you don’t like that, you can set <code>themeVariantAuto</code>. The first element is the variant for light mode, the second for 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> Note</div>
|
||||
<div class="box-content">
|
||||
|
||||
<p>This is not supported for Internet Explorer 11, which still displays in the <code>relearn-light</code> variant.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="javascript">JavaScript</h3>
|
||||
<p>Once a variant is fully loaded, either initially or by switching the variant manually with the variant selector, the custom event <code>themeVariantLoaded</code> on the <code>document</code> will be dispatched. You can add an event listener and react to 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">function</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 your Own</h3>
|
||||
<p>If you are not happy with the shipped variants you can either copy and rename one of the shipped files from <code>themes/hugo-theme-relearn/static/css</code> to <code>static/css</code>, edit them afterwards to your liking in a text editor and configure the <code>themeVariant</code> parameter in your <code>config.toml</code> or just use the <a href="../basics/generator/index.html">interactive variant generator</a>.</p>
|
||||
<h2 id="own-shortcodes-with-javascript-dependencies">Own Shortcodes with JavaScript Dependencies</h2>
|
||||
<p>Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files. To provide this behavior to the user and extending it for his own shortcodes this can be configured.</p>
|
||||
<p>Say you want to add a shortcode <code>myshortcode</code> that also requires the <code>jquery</code> JavaScript library.</p>
|
||||
</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 Shortcodes with JavaScript Dependencies</h2>
|
||||
<p>Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files.</p>
|
||||
<p>You can you use this mechanism in your own shortcodes. Say you want to add a shortcode <code>myshortcode</code> that also requires the <code>jquery</code> JavaScript library.</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Write the shortcode file <code>layouts/shortcodes/myshortcode.html</code> and add the following line</p>
|
||||
|
|
@ -1765,15 +1767,38 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<p>See the <code>math</code>, <code>mermaid</code> and <code>openapi</code> shortcodes for examples.</p>
|
||||
<h2 id="output-formats">Output Formats</h2>
|
||||
<p>Certain parts of the theme can be changed for support of your own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if you define a new output format <code>PLAINTEXT</code> in your <code>config.toml</code>, you can add a file <code>layouts/partials/header.plaintext.html</code> to change the way, the page header should look like for that output format.</p>
|
||||
<h2 id="react-to-variant-switches-in-javascript">React to Variant Switches in JavaScript</h2>
|
||||
<p>Once a color variant is fully loaded, either initially or by switching the color variant manually with the variant selector, the custom event <code>themeVariantLoaded</code> on the <code>document</code> will be dispatched. You can add an event listener and react to 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">function</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>The Relearn theme has been built to be as configurable as possible by defining multiple <a href="https://gohugo.io/templates/partials/" target="_blank">partials</a></p>
|
||||
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead <a href="https://gohugo.io/themes/customizing/" target="_blank">follow this page</a>. You’d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
|
||||
<p>This theme defines the following partials :</p>
|
||||
<ul>
|
||||
<li><code>header.html</code>: the header of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>footer.html</code>: the footer of the page. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>body.html</code>: the body of the page. The body may contain of one or many articles. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>article.html</code>: the output for a single article, can contain elements around your content. See <a href="#output-formats">output-formats</a></li>
|
||||
<li><code>menu.html</code>: left menu. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>search.html</code>: search box. <em>Not meant to be overwritten</em></li>
|
||||
<li><code>custom-header.html</code>: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include <code>style</code> HTML tag directive in your file.</li>
|
||||
<li><code>custom-footer.html</code>: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include <code>javascript</code> HTML tag directive in your file.</li>
|
||||
<li><code>favicon.html</code>: the favicon</li>
|
||||
<li><code>heading-pre.html</code>: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPre</code> setting into account.</li>
|
||||
<li><code>heading-post.html</code>: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s <code>headingPost</code> setting into account.</li>
|
||||
<li><code>logo.html</code>: the logo, on top left hand corner</li>
|
||||
<li><code>meta.html</code>: HTML meta tags, if you want to change default behavior</li>
|
||||
<li><code>menu-pre.html</code>: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s <code>menuPre</code> setting into account.</li>
|
||||
<li><code>menu-post.html</code>: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s <code>menuPost</code> setting into account.</li>
|
||||
<li><code>menu-footer.html</code>: footer of the the left menu</li>
|
||||
<li><code>toc.html</code>: table of contents</li>
|
||||
<li><code>content.html</code>: the content page itself. This can be overridden if you want to display page’s meta data above or below the content.</li>
|
||||
<li><code>content-header.html</code>: header above the title, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
<li><code>content-footer.html</code>: footer below the content, has a default implementation but you can overwrite it if you don’t like it.</li>
|
||||
</ul>
|
||||
|
||||
<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="../categories/custom/index.html">custom</a></li>
|
||||
<li><a class="term-link" href="../categories/theming/index.html">theming</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
|
@ -1785,19 +1810,19 @@ If you have requirements to support IE and/or older browser versions, use one of
|
|||
<p>This interactive tool may help you to generate your own color variant stylesheet.</p>
|
||||
|
||||
<div class="expand">
|
||||
<input type="checkbox" id="R-expand-205a5af25626a26f81d749a9ae78858b" aria-controls="R-expandcontent-205a5af25626a26f81d749a9ae78858b" >
|
||||
<label class="expand-label" for="R-expand-205a5af25626a26f81d749a9ae78858b" >
|
||||
<input type="checkbox" id="R-expand-12d409fde30485806a52856680d769ff" aria-controls="R-expandcontent-12d409fde30485806a52856680d769ff" >
|
||||
<label class="expand-label" for="R-expand-12d409fde30485806a52856680d769ff" >
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
Show usage instructions
|
||||
</label>
|
||||
<div id="R-expandcontent-205a5af25626a26f81d749a9ae78858b" class="expand-content">
|
||||
<div id="R-expandcontent-12d409fde30485806a52856680d769ff" class="expand-content">
|
||||
|
||||
<p>To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.</p>
|
||||
<p>To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.</p>
|
||||
<p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
|
||||
<p>The arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn’t overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.</p>
|
||||
<p>To better understand this select the <code>neon</code> variant and modify the different heading colors. There, colors for the heading <code>h2</code>, <code>h3</code> and <code>h4</code> are explicitly set. <code>h5</code> is not set and inherits its value from <code>h4</code>. <code>h6</code> is also not set and inherits its value from <code>h5</code>.</p>
|
||||
<p>Once you’ve changed a color, the variant switch will show a “My custom variant” entry and your changes are stored in the browser. You can <strong>browse to other pages</strong> and even close the browser <strong>without losing your changes</strong>.</p>
|
||||
<p>Once you’ve changed a color, the variant selector will show a “My custom variant” entry and your changes are stored in the browser. You can <strong>browse to other pages</strong> and even close the browser <strong>without losing your changes</strong>.</p>
|
||||
<p>Once you are satisfied, you can download the new variants file and copy it into your site’s <code>static/css</code> directory. Afterwards you have to adjust the <code>themeVariant</code> parameter in your <code>config.toml</code> to your chosen file name.</p>
|
||||
<p>Eg. if your new variants file is named <code>theme-my-custom-variant.css</code>, you have to set <code>themeVariant='my-custom-variant'</code> to use it.</p>
|
||||
</div>
|
||||
|
|
@ -1851,8 +1876,8 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
<h1 id="topbar-modification">Topbar Modification</h1>
|
||||
|
||||
<p>The theme comes with a reasonably configured topbar.</p>
|
||||
<p><a href="#R-image-bfff9502c39c09eee2e7be83e5444d79" class="lightbox-link"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-bfff9502c39c09eee2e7be83e5444d79"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-df44a3bffc5fe1fbf9f4c68dc48eb211" class="lightbox-link"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-df44a3bffc5fe1fbf9f4c68dc48eb211"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
|
||||
|
||||
<div class="box notices cstyle tip">
|
||||
|
|
@ -1864,8 +1889,8 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
</div>
|
||||
<h2 id="areas">Areas</h2>
|
||||
<p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
|
||||
<p><a href="#R-image-e69ba9abec0d33dc19352dd2d2dbae6e" class="lightbox-link"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-e69ba9abec0d33dc19352dd2d2dbae6e"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-9305e09e5938581501e83333eabeeeb3" class="lightbox-link"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-9305e09e5938581501e83333eabeeeb3"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
|
||||
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
|
||||
|
|
@ -1901,14 +1926,14 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
<i class="fa-fw fas fa-pen"></i>
|
||||
|
||||
</button>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" target="_blank"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="../basics/configuration/index.html#global-site-parameters">parameter is set</a></li>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" target="_blank"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="../basics/configuration/index.html">parameter is set</a></li>
|
||||
<li>
|
||||
<span class="btn cstyle transparent">
|
||||
<button type="button">
|
||||
<i class="fa-fw fas fa-print"></i>
|
||||
|
||||
</button>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><strong>print</strong></a>: browses to the chapters printable page if <a href="../basics/configuration/index.html#activate-print-support">print support</a> was activated</li>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><strong>print</strong></a>: browses to the chapters printable page if <a href="../basics/customization/index.html#activate-print-support">print support</a> was activated</li>
|
||||
<li>
|
||||
<span class="btn cstyle transparent">
|
||||
<button type="button">
|
||||
|
|
@ -3519,22 +3544,22 @@ window.variants && variants.generator( '#R-vargenerator' );
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../js/clipboard.min.js?1700469871" defer></script>
|
||||
<script src="../js/perfect-scrollbar.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-color.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-dispatch.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-drag.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-ease.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-interpolate.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-selection.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-timer.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-transition.min.js?1700469871" defer></script>
|
||||
<script src="../js/d3/d3-zoom.min.js?1700469871" defer></script>
|
||||
<script src="../js/js-yaml.min.js?1700469871" defer></script>
|
||||
<script src="../js/mermaid.min.js?1700469871" defer></script>
|
||||
<script src="../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-color.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-dispatch.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-drag.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-ease.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-interpolate.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-selection.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-timer.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-transition.min.js?1700524446" defer></script>
|
||||
<script src="../js/d3/d3-zoom.min.js?1700524446" defer></script>
|
||||
<script src="../js/js-yaml.min.js?1700524446" defer></script>
|
||||
<script src="../js/mermaid.min.js?1700524446" defer></script>
|
||||
<script>
|
||||
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
|
||||
</script>
|
||||
<script src="../js/theme.js?1700469871" defer></script>
|
||||
<script src="../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -40,19 +40,26 @@ This theme&rsquo;s repository is: https://github.com/McShelby/hugo-theme-rel
|
|||
<link>https://McShelby.github.io/hugo-theme-relearn/basics/configuration/index.html</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
<guid>https://McShelby.github.io/hugo-theme-relearn/basics/configuration/index.html</guid>
|
||||
<description>Global site parameters On top of Hugo global configuration, the Relearn theme lets you define the following parameters in your config.toml (here, values are default).
|
||||
Note that some of these parameters are explained in details in other sections of this documentation.
|
||||
&#8203; config.toml [params] # If an option value is said to be not set, you can achieve the same behavior # by given it an empty string value. ############################################################################### # Hugo # These options usually apply to other themes aswell.</description>
|
||||
<description>On top of Hugo&rsquo;s global configuration options, the Relearn theme lets you define further options unique to the theme in your config.toml. The defaults are written in the comments of each option.
|
||||
Note that some of these options are explained in detail in other sections of this documentation.
|
||||
&#8203; config.toml [params] # If an option value is said to be not set, you can achieve the same behavior # by given it an empty string value.</description>
|
||||
</item>
|
||||
<item>
|
||||
<title>Branding</title>
|
||||
<link>https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
<guid>https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html</guid>
|
||||
<description>The Relearn theme provides configuration options to change your your site&rsquo;s colors, favicon and logo. This allows you to easily align your site visuals to your desired style. Most of these options are exposed thru so called color variants.
|
||||
A color variant lets you customize various visual effects of your site like almost any color, used fonts, color schemes of print, syntax highligtning, Mermaid and the OpenAPI shortcode, etc. It contains of a CSS file and optional configuration options in your config.</description>
|
||||
</item>
|
||||
<item>
|
||||
<title>Customization</title>
|
||||
<link>https://McShelby.github.io/hugo-theme-relearn/basics/customization/index.html</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
<guid>https://McShelby.github.io/hugo-theme-relearn/basics/customization/index.html</guid>
|
||||
<description>The Relearn theme has been built to be as configurable as possible by defining multiple partials
|
||||
In themes/hugo-theme-relearn/layouts/partials/, you will find all the partials defined for this theme. If you need to overwrite something, don&rsquo;t change the code directly. Instead follow this page. You&rsquo;d create a new partial in the layouts/partials folder of your local project. This partial will have the priority.
|
||||
This theme defines the following partials :
|
||||
header.html: the header of the page.</description>
|
||||
<description>Serving your page from a subfolder If your site is served from a subfolder, eg. https://example.com/mysite/, you have to set the following lines to your config.toml
|
||||
baseURL = &#34;https://example.com/mysite/&#34; canonifyURLs = true relativeURLs = trueWithout canonifyURLs=true URLs in sublemental pages (like sitemap.xml, rss.xml) will be generated falsly while your HTML files will still work. See https://github.com/gohugoio/hugo/issues/5226.
|
||||
Serving your page from the filesystem If you want your page served from the filesystem by using URLs starting with file:// you&rsquo;ll need the following configuration in your config.</description>
|
||||
</item>
|
||||
<item>
|
||||
<title>Stylesheet generator</title>
|
||||
|
|
@ -60,7 +67,7 @@ header.html: the header of the page.</description>
|
|||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
<guid>https://McShelby.github.io/hugo-theme-relearn/basics/generator/index.html</guid>
|
||||
<description>This interactive tool may help you to generate your own color variant stylesheet.
|
||||
Show usage instructions To get started, first select a color variant from the variant switch in the lower left sidebar that fits you best as a starting point.
|
||||
Show usage instructions To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.
|
||||
The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph and the page will update accordingly.</description>
|
||||
</item>
|
||||
<item>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
|
||||
<link href="../../basics/installation/index.print.html" rel="alternate" type="text/html" title="Installation :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -178,8 +178,8 @@
|
|||
</span></span><span class="line"><span class="cl"><span class="gh"># Basics
|
||||
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>
|
||||
</span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
|
||||
<p><a href="#R-image-3ed9f9d5f63423cb3089389b3261b90d" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" 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-3ed9f9d5f63423cb3089389b3261b90d"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-148898ca8e525ec17bff453af08a72f9" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" 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-148898ca8e525ec17bff453af08a72f9"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
|
||||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
|
||||
<p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
|
||||
|
|
@ -296,12 +296,12 @@
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -314,6 +314,7 @@
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class="active"><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -457,13 +458,13 @@
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/installation/index.html" rel="canonical" type="text/html" title="Installation :: Hugo Relearn Theme">
|
||||
<link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -124,8 +124,8 @@
|
|||
</span></span><span class="line"><span class="cl"><span class="gh"># Basics
|
||||
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>
|
||||
</span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
|
||||
<p><a href="#R-image-3ed9f9d5f63423cb3089389b3261b90d" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" 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-3ed9f9d5f63423cb3089389b3261b90d"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-148898ca8e525ec17bff453af08a72f9" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" 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-148898ca8e525ec17bff453af08a72f9"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
|
||||
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
|
||||
<p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
|
||||
|
|
@ -161,8 +161,8 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What's New :: Hugo Relearn Theme">
|
||||
<link href="../../basics/migration/index.print.html" rel="alternate" type="text/html" title="What's New :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
<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">author</span><span class="p">.</span><span class="nx">name</span> <span class="p">=</span> <span class="s2">"Hugo"</span></span></span></code></pre></div></li>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Taxonomy <a href="https://gohugo.io/content-management/taxonomies/#add-custom-metadata-to-a-taxonomy-or-term" target="_blank">term pages</a> now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your <code>config.toml</code> by adding <code>disableTermBreadcrumbs=true</code>.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Taxonomy <a href="https://gohugo.io/content-management/taxonomies#add-custom-metadata-to-a-taxonomy-or-term" target="_blank">term pages</a> now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your <code>config.toml</code> by adding <code>disableTermBreadcrumbs=true</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Taxonomy and term pages are now allowed to contain content. This is added inbetween the title and the page list.</p>
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> It is now possible to adjust the menu width for your whole site. <a href="../../basics/customization/index.html#change-the-menu-width">See the docs</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. <a href="../../basics/configuration/index.html#social-media-meta-tags">See the docs</a>.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. <a href="../../basics/customization/index.html#social-media-meta-tags">See the docs</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release comes with additional sort options for the menu and the <a href="../../shortcodes/children/index.html"><code>children</code> shortcode</a>. Both will now accept the following values: <code>weight</code>, <code>title</code>, <code>linktitle</code>, <code>modifieddate</code>, <code>expirydate</code>, <code>publishdate</code>, <code>date</code>, <code>length</code> or <code>default</code> (adhering to Hugo’s default sort order).</p>
|
||||
|
|
@ -321,7 +321,7 @@
|
|||
<h2 id="5210">5.21.0 (2023-09-18)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html">partial overridden</a>, you may want to review the styling (eg. margins/paddings) of your partial.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html#partials">partial overridden</a>, you may want to review the styling (eg. margins/paddings) of your partial.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release comes with an awesome new feature, that allows you to customize your topbar buttons, change behavior, reorder them or define entirely new ones, unique to your installation. See <a href="../../basics/topbar/index.html">the documentation</a> for further details.</p>
|
||||
|
|
@ -368,7 +368,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme has added two new color variants <code>zen-light</code> and <code>zen-dark</code>. Check it out!</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now <a href="../../basics/customization/index.html#javascript">dispatches the custom event</a> <code>themeVariantLoaded</code> on the <code>document</code> when the variant is fully loaded either initially or by switching the variant manually with the variant selector.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now <a href="../../basics/customization/index.html#react-to-variant-switches-in-javascript">dispatches the custom event</a> <code>themeVariantLoaded</code> on the <code>document</code> when the variant is fully loaded either initially or by switching the variant manually with the variant selector.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme has updated its Mermaid dependency to 10.3.1. This adds support for the <a href="../../shortcodes/mermaid/index.html#sankey">sankey diagram type</a> and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).</p>
|
||||
|
|
@ -513,7 +513,7 @@
|
|||
<p>The default setting of <code>on</code>, in effect since 1.1.0, changed back to <code>off</code> as there was interference with scrolling on mobile and big pages.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../../basics/customization/index.html#adjust-to-os-settings">adapt to your OS’s light/dark mode setting</a>.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../../basics/branding/index.html#adjust-to-os-settings">adapt to your OS’s light/dark mode setting</a>.</p>
|
||||
<p>This is also the new default setting if you haven’t configured <code>themeVariant</code> in your <code>config.toml</code>.</p>
|
||||
<p>Additionally you can configure the variants to be taken for light/dark mode with the new <code>themeVariantAuto</code> parameter.</p>
|
||||
<p>This is not supported for Internet Explorer 11, which still displays in the <code>relearn-light</code> variant.</p>
|
||||
|
|
@ -612,7 +612,7 @@
|
|||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release introduces an additional dedicated search page. On this page, displayed search results have more space making it easier scanning thru large number of results.</p>
|
||||
<p>To activate this feature, you need to <a href="../../basics/configuration/index.html#activate-dedicated-search-page">configure it</a> in your <code>config.toml</code> as a new outputformat <code>SEARCHPAGE</code> for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.</p>
|
||||
<p>To activate this feature, you need to <a href="../../basics/customization/index.html#activate-dedicated-search-page">configure it</a> in your <code>config.toml</code> as a new outputformat <code>SEARCHPAGE</code> for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.</p>
|
||||
<p>You can access the search page by either clicking on the magnifier glass or pressing enter inside of the search box.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -622,7 +622,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You are now able to turn off the generation of generator meta tags in your HTML head to hide the used versions of Hugo and this theme.</p>
|
||||
<p>To <a href="../../basics/configuration/index.html#global-site-parameters">configure this</a> in your <code>config.toml</code> make sure to set Hugo’s <code>disableHugoGeneratorInject=true</code> <strong>and</strong> also <code>[params] disableGeneratorVersion=true</code>, otherwise Hugo will generate a meta tag into your home page automagically.</p>
|
||||
<p>To <a href="../../basics/configuration/index.html">configure this</a> in your <code>config.toml</code> make sure to set Hugo’s <code>disableHugoGeneratorInject=true</code> <strong>and</strong> also <code>[params] disableGeneratorVersion=true</code>, otherwise Hugo will generate a meta tag into your home page automagically.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Creation of your project gets a little bit faster with this release.</p>
|
||||
|
|
@ -656,7 +656,7 @@
|
|||
<h2 id="540">5.4.0 (2022-11-01)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> <a href="../../basics/configuration/index.html#serving-your-page-from-the-filesystem">With the proper settings</a> in your <code>config.toml</code> your page is now servable from the local file system using <code>file://</code> URLs.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> <a href="../../basics/customization/index.html#serving-your-page-from-the-filesystem">With the proper settings</a> in your <code>config.toml</code> your page is now servable from the local file system using <code>file://</code> URLs.</p>
|
||||
<p>Please note that the searchbox will only work for this if you reconfigure your outputformat for the homepage in your <code>config.toml</code> from <code>JSON</code> to <code>SEARCH</code>. The now deprecated <code>JSON</code> outputformat still works as before, so there is no need to reconfigure your installation if it is only served from <code>http://</code> or <code>https://</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -682,7 +682,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> <a href="../../cont/markdown/index.html#add-css-classes">Image formatting</a> has two new classes to align images to the <code>left</code> or <code>right</code>. Additionally, the already existing <code>inline</code> option is now documented.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Printing for the <a href="../../shortcodes/openapi/index.html"><code>swagger</code> shortcode</a> was optimized to expand sections that are usually closed in interactive mode. This requires <a href="../../basics/configuration/index.html#activate-print-support">print support</a> to be configured.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Printing for the <a href="../../shortcodes/openapi/index.html"><code>swagger</code> shortcode</a> was optimized to expand sections that are usually closed in interactive mode. This requires <a href="../../basics/customization/index.html#activate-print-support">print support</a> to be configured.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -795,7 +795,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> If you prefer expandable/collapsible menu items, you can now set <code>collapsibleMenu=true</code> in your <code>config.toml</code>. This will add arrows to all menu items that contain sub menus. The menu will expand/collapse without navigation if you click on an arrow.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can activate <a href="../../basics/configuration/index.html#activate-print-support">print support</a> in your <code>config.toml</code> to add the capability to print whole chapters or even the complete site.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can activate <a href="../../basics/customization/index.html#activate-print-support">print support</a> in your <code>config.toml</code> to add the capability to print whole chapters or even the complete site.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Translation into Traditional Chinese.</p>
|
||||
|
|
@ -834,12 +834,12 @@
|
|||
<h2 id="300">3.0.0 (2022-02-22)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We made changes to the menu footer. If you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html">partial overridden</a>, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the <code>menu-footer.html</code> partial that is coming with the exampleSite.</p>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We made changes to the menu footer. If you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html#partials">partial overridden</a>, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the <code>menu-footer.html</code> partial that is coming with the exampleSite.</p>
|
||||
<p>This change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and <em>Clear history</em> functionality).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.</p>
|
||||
<p>This change will only affect your installation if you’ve not set the <code>themeVariant</code> parameter in your <code>config.toml</code>. <a href="../../basics/customization/index.html#theme-variant">If you still want to use the Learn color variant</a>, you have to explicitly set <code>themeVariant="learn"</code> in your <code>config.toml</code>.</p>
|
||||
<p>This change will only affect your installation if you’ve not set the <code>themeVariant</code> parameter in your <code>config.toml</code>. <a href="../../basics/branding/index.html#theme-variant">If you still want to use the Learn color variant</a>, you have to explicitly set <code>themeVariant="learn"</code> in your <code>config.toml</code>.</p>
|
||||
<p>Note, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -850,15 +850,15 @@
|
|||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> With this release you are now capable to define your own <em>dark mode</em> variants.</p>
|
||||
<p>To make this possible, we have introduced a lot more color variables you can use in <a href="../../basics/customization/index.html#theme-variant">your color variants</a>. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.</p>
|
||||
<p>To make this possible, we have introduced a lot more color variables you can use in <a href="../../basics/branding/index.html#theme-variant">your color variants</a>. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.</p>
|
||||
<p>To see what’s now possible, see the new variants <code>relearn-dark</code> and <code>neon</code> that are coming with this release.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> To make the creation of new variants easier for you, we’ve added a new interactive <a href="../../basics/generator/index.html">theme variant generator</a>. This feature will not work with Internet Explorer 11.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can now configure multiple color variants in your <code>config.toml</code>. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer. See the <a href="../../basics/customization/index.html#multiple-variants">documentation</a> for configuration.</p>
|
||||
<p>Note, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant switcher will not be displayed with Internet Explorer 11.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can now configure multiple color variants in your <code>config.toml</code>. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer. See the <a href="../../basics/branding/index.html#multiple-variants">documentation</a> for configuration.</p>
|
||||
<p>Note, that the new variant selector will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant selector will not be displayed with Internet Explorer 11.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -918,7 +918,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now supports favicons served from <code>static/images/</code> named as <code>favicon</code> or <code>logo</code> in SVG, PNG or ICO format <a href="../../basics/customization/index.html#change-the-favicon">out of the box</a>. An overridden partial <code>layouts/partials/favicon.html</code> may not be necessary anymore in most cases.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can hide the table of contents menu for the whole site by setting the <code>disableToc</code> option in your <code>config.toml</code>. For an example see <a href="../../basics/configuration/index.html#global-site-parameters">the example configuration</a>.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can hide the table of contents menu for the whole site by setting the <code>disableToc</code> option in your <code>config.toml</code>. For an example see <a href="../../basics/configuration/index.html">the example configuration</a>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -929,7 +929,7 @@
|
|||
<hr>
|
||||
<h2 id="260">2.6.0 (2021-10-21)</h2>
|
||||
<ul>
|
||||
<li><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Your site can now be served from a subfolder if you set <code>baseURL</code> and <code>canonifyURLs=true</code> in your <code>config.toml</code>. See the <a href="../../basics/configuration/index.html#a-word-on-running-your-site-in-a-subfolder">documentation</a> for a detailed example.</li>
|
||||
<li><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Your site can now be served from a subfolder if you set <code>baseURL</code> and <code>canonifyURLs=true</code> in your <code>config.toml</code>. See the <a href="../../basics/customization/index.html#serving-your-page-from-a-subfolder">documentation</a> for a detailed example.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h2 id="250">2.5.0 (2021-10-08)</h2>
|
||||
|
|
@ -1014,7 +1014,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can define the expansion state of your menus in the frontmatter. Please see further <a href="../../cont/pages/index.html#override-expand-state-rules-for-menu-entries">documentation</a> for possible values and default behavior.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> New partials for defining pre/post content for menu items and the content. See <a href="../../basics/customization/index.html">documentation</a> for further reading.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> New partials for defining pre/post content for menu items and the content. See <a href="../../basics/customization/index.html#partials">documentation</a> for further reading.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Shortcode <a href="../../shortcodes/children/index.html"><code>children</code></a> with new parameter <code>containerstyle</code>.</p>
|
||||
|
|
@ -1137,12 +1137,12 @@
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -1155,6 +1155,7 @@
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -1298,13 +1299,13 @@
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/migration/index.html" rel="canonical" type="text/html" title="What's New :: Hugo Relearn Theme">
|
||||
<link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What's New :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
<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">author</span><span class="p">.</span><span class="nx">name</span> <span class="p">=</span> <span class="s2">"Hugo"</span></span></span></code></pre></div></li>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Taxonomy <a href="https://gohugo.io/content-management/taxonomies/#add-custom-metadata-to-a-taxonomy-or-term" target="_blank">term pages</a> now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your <code>config.toml</code> by adding <code>disableTermBreadcrumbs=true</code>.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Taxonomy <a href="https://gohugo.io/content-management/taxonomies#add-custom-metadata-to-a-taxonomy-or-term" target="_blank">term pages</a> now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your <code>config.toml</code> by adding <code>disableTermBreadcrumbs=true</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Taxonomy and term pages are now allowed to contain content. This is added inbetween the title and the page list.</p>
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> It is now possible to adjust the menu width for your whole site. <a href="../../basics/customization/index.html#change-the-menu-width">See the docs</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. <a href="../../basics/configuration/index.html#social-media-meta-tags">See the docs</a>.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. <a href="../../basics/customization/index.html#social-media-meta-tags">See the docs</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release comes with additional sort options for the menu and the <a href="../../shortcodes/children/index.html"><code>children</code> shortcode</a>. Both will now accept the following values: <code>weight</code>, <code>title</code>, <code>linktitle</code>, <code>modifieddate</code>, <code>expirydate</code>, <code>publishdate</code>, <code>date</code>, <code>length</code> or <code>default</code> (adhering to Hugo’s default sort order).</p>
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
<h2 id="5210">5.21.0 (2023-09-18)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html">partial overridden</a>, you may want to review the styling (eg. margins/paddings) of your partial.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html#partials">partial overridden</a>, you may want to review the styling (eg. margins/paddings) of your partial.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release comes with an awesome new feature, that allows you to customize your topbar buttons, change behavior, reorder them or define entirely new ones, unique to your installation. See <a href="../../basics/topbar/index.html">the documentation</a> for further details.</p>
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme has added two new color variants <code>zen-light</code> and <code>zen-dark</code>. Check it out!</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now <a href="../../basics/customization/index.html#javascript">dispatches the custom event</a> <code>themeVariantLoaded</code> on the <code>document</code> when the variant is fully loaded either initially or by switching the variant manually with the variant selector.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now <a href="../../basics/customization/index.html#react-to-variant-switches-in-javascript">dispatches the custom event</a> <code>themeVariantLoaded</code> on the <code>document</code> when the variant is fully loaded either initially or by switching the variant manually with the variant selector.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme has updated its Mermaid dependency to 10.3.1. This adds support for the <a href="../../shortcodes/mermaid/index.html#sankey">sankey diagram type</a> and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).</p>
|
||||
|
|
@ -424,7 +424,7 @@
|
|||
<p>The default setting of <code>on</code>, in effect since 1.1.0, changed back to <code>off</code> as there was interference with scrolling on mobile and big pages.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../../basics/customization/index.html#adjust-to-os-settings">adapt to your OS’s light/dark mode setting</a>.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../../basics/branding/index.html#adjust-to-os-settings">adapt to your OS’s light/dark mode setting</a>.</p>
|
||||
<p>This is also the new default setting if you haven’t configured <code>themeVariant</code> in your <code>config.toml</code>.</p>
|
||||
<p>Additionally you can configure the variants to be taken for light/dark mode with the new <code>themeVariantAuto</code> parameter.</p>
|
||||
<p>This is not supported for Internet Explorer 11, which still displays in the <code>relearn-light</code> variant.</p>
|
||||
|
|
@ -523,7 +523,7 @@
|
|||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> This release introduces an additional dedicated search page. On this page, displayed search results have more space making it easier scanning thru large number of results.</p>
|
||||
<p>To activate this feature, you need to <a href="../../basics/configuration/index.html#activate-dedicated-search-page">configure it</a> in your <code>config.toml</code> as a new outputformat <code>SEARCHPAGE</code> for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.</p>
|
||||
<p>To activate this feature, you need to <a href="../../basics/customization/index.html#activate-dedicated-search-page">configure it</a> in your <code>config.toml</code> as a new outputformat <code>SEARCHPAGE</code> for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.</p>
|
||||
<p>You can access the search page by either clicking on the magnifier glass or pressing enter inside of the search box.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -533,7 +533,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You are now able to turn off the generation of generator meta tags in your HTML head to hide the used versions of Hugo and this theme.</p>
|
||||
<p>To <a href="../../basics/configuration/index.html#global-site-parameters">configure this</a> in your <code>config.toml</code> make sure to set Hugo’s <code>disableHugoGeneratorInject=true</code> <strong>and</strong> also <code>[params] disableGeneratorVersion=true</code>, otherwise Hugo will generate a meta tag into your home page automagically.</p>
|
||||
<p>To <a href="../../basics/configuration/index.html">configure this</a> in your <code>config.toml</code> make sure to set Hugo’s <code>disableHugoGeneratorInject=true</code> <strong>and</strong> also <code>[params] disableGeneratorVersion=true</code>, otherwise Hugo will generate a meta tag into your home page automagically.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Creation of your project gets a little bit faster with this release.</p>
|
||||
|
|
@ -567,7 +567,7 @@
|
|||
<h2 id="540">5.4.0 (2022-11-01)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> <a href="../../basics/configuration/index.html#serving-your-page-from-the-filesystem">With the proper settings</a> in your <code>config.toml</code> your page is now servable from the local file system using <code>file://</code> URLs.</p>
|
||||
<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> <a href="../../basics/customization/index.html#serving-your-page-from-the-filesystem">With the proper settings</a> in your <code>config.toml</code> your page is now servable from the local file system using <code>file://</code> URLs.</p>
|
||||
<p>Please note that the searchbox will only work for this if you reconfigure your outputformat for the homepage in your <code>config.toml</code> from <code>JSON</code> to <code>SEARCH</code>. The now deprecated <code>JSON</code> outputformat still works as before, so there is no need to reconfigure your installation if it is only served from <code>http://</code> or <code>https://</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -593,7 +593,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> <a href="../../cont/markdown/index.html#add-css-classes">Image formatting</a> has two new classes to align images to the <code>left</code> or <code>right</code>. Additionally, the already existing <code>inline</code> option is now documented.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Printing for the <a href="../../shortcodes/openapi/index.html"><code>swagger</code> shortcode</a> was optimized to expand sections that are usually closed in interactive mode. This requires <a href="../../basics/configuration/index.html#activate-print-support">print support</a> to be configured.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Printing for the <a href="../../shortcodes/openapi/index.html"><code>swagger</code> shortcode</a> was optimized to expand sections that are usually closed in interactive mode. This requires <a href="../../basics/customization/index.html#activate-print-support">print support</a> to be configured.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -706,7 +706,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> If you prefer expandable/collapsible menu items, you can now set <code>collapsibleMenu=true</code> in your <code>config.toml</code>. This will add arrows to all menu items that contain sub menus. The menu will expand/collapse without navigation if you click on an arrow.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can activate <a href="../../basics/configuration/index.html#activate-print-support">print support</a> in your <code>config.toml</code> to add the capability to print whole chapters or even the complete site.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can activate <a href="../../basics/customization/index.html#activate-print-support">print support</a> in your <code>config.toml</code> to add the capability to print whole chapters or even the complete site.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Translation into Traditional Chinese.</p>
|
||||
|
|
@ -745,12 +745,12 @@
|
|||
<h2 id="300">3.0.0 (2022-02-22)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We made changes to the menu footer. If you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html">partial overridden</a>, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the <code>menu-footer.html</code> partial that is coming with the exampleSite.</p>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We made changes to the menu footer. If you have your <code>menu-footer.html</code> <a href="../../basics/customization/index.html#partials">partial overridden</a>, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the <code>menu-footer.html</code> partial that is coming with the exampleSite.</p>
|
||||
<p>This change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and <em>Clear history</em> functionality).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i></span><span class="badge-content">Breaking</span></span> We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.</p>
|
||||
<p>This change will only affect your installation if you’ve not set the <code>themeVariant</code> parameter in your <code>config.toml</code>. <a href="../../basics/customization/index.html#theme-variant">If you still want to use the Learn color variant</a>, you have to explicitly set <code>themeVariant="learn"</code> in your <code>config.toml</code>.</p>
|
||||
<p>This change will only affect your installation if you’ve not set the <code>themeVariant</code> parameter in your <code>config.toml</code>. <a href="../../basics/branding/index.html#theme-variant">If you still want to use the Learn color variant</a>, you have to explicitly set <code>themeVariant="learn"</code> in your <code>config.toml</code>.</p>
|
||||
<p>Note, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -761,15 +761,15 @@
|
|||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> With this release you are now capable to define your own <em>dark mode</em> variants.</p>
|
||||
<p>To make this possible, we have introduced a lot more color variables you can use in <a href="../../basics/customization/index.html#theme-variant">your color variants</a>. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.</p>
|
||||
<p>To make this possible, we have introduced a lot more color variables you can use in <a href="../../basics/branding/index.html#theme-variant">your color variants</a>. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.</p>
|
||||
<p>To see what’s now possible, see the new variants <code>relearn-dark</code> and <code>neon</code> that are coming with this release.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> To make the creation of new variants easier for you, we’ve added a new interactive <a href="../../basics/generator/index.html">theme variant generator</a>. This feature will not work with Internet Explorer 11.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can now configure multiple color variants in your <code>config.toml</code>. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer. See the <a href="../../basics/customization/index.html#multiple-variants">documentation</a> for configuration.</p>
|
||||
<p>Note, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant switcher will not be displayed with Internet Explorer 11.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can now configure multiple color variants in your <code>config.toml</code>. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer. See the <a href="../../basics/branding/index.html#multiple-variants">documentation</a> for configuration.</p>
|
||||
<p>Note, that the new variant selector will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant selector will not be displayed with Internet Explorer 11.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -829,7 +829,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> The theme now supports favicons served from <code>static/images/</code> named as <code>favicon</code> or <code>logo</code> in SVG, PNG or ICO format <a href="../../basics/customization/index.html#change-the-favicon">out of the box</a>. An overridden partial <code>layouts/partials/favicon.html</code> may not be necessary anymore in most cases.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can hide the table of contents menu for the whole site by setting the <code>disableToc</code> option in your <code>config.toml</code>. For an example see <a href="../../basics/configuration/index.html#global-site-parameters">the example configuration</a>.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can hide the table of contents menu for the whole site by setting the <code>disableToc</code> option in your <code>config.toml</code>. For an example see <a href="../../basics/configuration/index.html">the example configuration</a>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -840,7 +840,7 @@
|
|||
<hr>
|
||||
<h2 id="260">2.6.0 (2021-10-21)</h2>
|
||||
<ul>
|
||||
<li><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Your site can now be served from a subfolder if you set <code>baseURL</code> and <code>canonifyURLs=true</code> in your <code>config.toml</code>. See the <a href="../../basics/configuration/index.html#a-word-on-running-your-site-in-a-subfolder">documentation</a> for a detailed example.</li>
|
||||
<li><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Your site can now be served from a subfolder if you set <code>baseURL</code> and <code>canonifyURLs=true</code> in your <code>config.toml</code>. See the <a href="../../basics/customization/index.html#serving-your-page-from-a-subfolder">documentation</a> for a detailed example.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h2 id="250">2.5.0 (2021-10-08)</h2>
|
||||
|
|
@ -925,7 +925,7 @@
|
|||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You can define the expansion state of your menus in the frontmatter. Please see further <a href="../../cont/pages/index.html#override-expand-state-rules-for-menu-entries">documentation</a> for possible values and default behavior.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> New partials for defining pre/post content for menu items and the content. See <a href="../../basics/customization/index.html">documentation</a> for further reading.</p>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> New partials for defining pre/post content for menu items and the content. See <a href="../../basics/customization/index.html#partials">documentation</a> for further reading.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Shortcode <a href="../../shortcodes/children/index.html"><code>children</code></a> with new parameter <code>containerstyle</code>.</p>
|
||||
|
|
@ -967,8 +967,8 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
|
||||
<link href="../../basics/requirements/index.print.html" rel="alternate" type="text/html" title="Requirements :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -125,8 +125,8 @@
|
|||
|
||||
<p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
|
||||
<p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
|
||||
<p><a href="#R-image-7613ff27b9f7f9cc48ba00cac50c4966" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-7613ff27b9f7f9cc48ba00cac50c4966"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-bc832cbf95c2eb69ac41195988228cde" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-bc832cbf95c2eb69ac41195988228cde"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
|
||||
<footer class="footline">
|
||||
<div class=" taxonomy-categories term-list cstyle " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||||
|
|
@ -222,12 +222,12 @@
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -240,6 +240,7 @@
|
|||
<li data-nav-id="/basics/requirements/index.html" class="active"><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class=""><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -383,13 +384,13 @@
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/requirements/index.html" rel="canonical" type="text/html" title="Requirements :: Hugo Relearn Theme">
|
||||
<link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -95,8 +95,8 @@
|
|||
|
||||
<p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
|
||||
<p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
|
||||
<p><a href="#R-image-7613ff27b9f7f9cc48ba00cac50c4966" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-7613ff27b9f7f9cc48ba00cac50c4966"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-bc832cbf95c2eb69ac41195988228cde" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-bc832cbf95c2eb69ac41195988228cde"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
|
||||
<footer class="footline">
|
||||
<div class=" taxonomy-categories term-list cstyle " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
||||
|
|
@ -111,8 +111,8 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469871" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469871" defer></script>
|
||||
<script src="../../js/theme.js?1700469871" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="../../basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbar Modification :: Hugo Relearn Theme">
|
||||
<link href="../../basics/topbar/index.print.html" rel="alternate" type="text/html" title="Topbar Modification :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524445" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524445" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524445" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524445" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524445" rel="stylesheet" media="print">
|
||||
<link href="../../css/ie.css?1700524445" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524445"></script>
|
||||
<script src="../../js/variant.js?1700524445"></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
|
||||
|
|
@ -154,8 +154,8 @@
|
|||
<h1 id="topbar-modification">Topbar Modification</h1>
|
||||
|
||||
<p>The theme comes with a reasonably configured topbar.</p>
|
||||
<p><a href="#R-image-bfff9502c39c09eee2e7be83e5444d79" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-bfff9502c39c09eee2e7be83e5444d79"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-df44a3bffc5fe1fbf9f4c68dc48eb211" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-df44a3bffc5fe1fbf9f4c68dc48eb211"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
|
||||
|
||||
<div class="box notices cstyle tip">
|
||||
|
|
@ -167,8 +167,8 @@
|
|||
</div>
|
||||
<h2 id="areas">Areas</h2>
|
||||
<p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
|
||||
<p><a href="#R-image-e69ba9abec0d33dc19352dd2d2dbae6e" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-e69ba9abec0d33dc19352dd2d2dbae6e"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-9305e09e5938581501e83333eabeeeb3" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-9305e09e5938581501e83333eabeeeb3"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
|
||||
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
|
||||
|
|
@ -204,14 +204,14 @@
|
|||
<i class="fa-fw fas fa-pen"></i>
|
||||
|
||||
</button>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" target="_blank"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="../../basics/configuration/index.html#global-site-parameters">parameter is set</a></li>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" target="_blank"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="../../basics/configuration/index.html">parameter is set</a></li>
|
||||
<li>
|
||||
<span class="btn cstyle transparent">
|
||||
<button type="button">
|
||||
<i class="fa-fw fas fa-print"></i>
|
||||
|
||||
</button>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><strong>print</strong></a>: browses to the chapters printable page if <a href="../../basics/configuration/index.html#activate-print-support">print support</a> was activated</li>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><strong>print</strong></a>: browses to the chapters printable page if <a href="../../basics/customization/index.html#activate-print-support">print support</a> was activated</li>
|
||||
<li>
|
||||
<span class="btn cstyle transparent">
|
||||
<button type="button">
|
||||
|
|
@ -567,12 +567,12 @@
|
|||
<script>
|
||||
var contentLangs=['en'];
|
||||
</script>
|
||||
<script src="../../js/auto-complete.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700469870" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700469870" defer></script>
|
||||
<script src="../../js/search.js?1700469870" defer></script>
|
||||
<script src="../../js/auto-complete.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.stemmer.support.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.multi.min.js?1700524446" defer></script>
|
||||
<script src="../../js/lunr/lunr.en.min.js?1700524446" defer></script>
|
||||
<script src="../../js/search.js?1700524446" defer></script>
|
||||
</div>
|
||||
<div id="R-homelinks" class="default-animation">
|
||||
<hr class="padding">
|
||||
|
|
@ -585,6 +585,7 @@
|
|||
<li data-nav-id="/basics/requirements/index.html" class=""><a class="padding" href="../../basics/requirements/index.html">Requirements<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/installation/index.html" class=""><a class="padding" href="../../basics/installation/index.html">Installation<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/configuration/index.html" class=""><a class="padding" href="../../basics/configuration/index.html">Configuration<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/branding/index.html" class=""><a class="padding" href="../../basics/branding/index.html">Branding<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/customization/index.html" class=""><a class="padding" href="../../basics/customization/index.html">Customization<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/generator/index.html" class=""><a class="padding" href="../../basics/generator/index.html">Stylesheet generator<i class="fas fa-check read-icon"></i></a></li>
|
||||
<li data-nav-id="/basics/topbar/index.html" class="active"><a class="padding" href="../../basics/topbar/index.html">Topbar Modification<i class="fas fa-check read-icon"></i></a></li>
|
||||
|
|
@ -728,13 +729,13 @@
|
|||
setTimeout( githubButtonsInit, 400 );
|
||||
});
|
||||
</script>
|
||||
<script async src="../../js/github-buttons.js?1700469870"></script>
|
||||
<script async src="../../js/github-buttons.js?1700524446"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<script src="../../js/clipboard.min.js?1700469870" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469870" defer></script>
|
||||
<script src="../../js/theme.js?1700469870" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="pir">
|
||||
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html" rel="canonical" type="text/html" title="Topbar Modification :: Hugo Relearn Theme">
|
||||
<link href="../../basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbar Modification :: Hugo Relearn Theme">
|
||||
<link href="../../images/logo.svg?1700469870" rel="icon" type="image/svg+xml">
|
||||
<link href="../../images/logo.svg?1700524445" 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?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700469870" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700469870" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700469870" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700469870" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700469870" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700469870" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700469870"></script>
|
||||
<script src="../../js/variant.js?1700469870"></script>
|
||||
<link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/nucleus.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/auto-complete.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/perfect-scrollbar.min.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/fonts.css?1700524446" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700524446" rel="stylesheet"></noscript>
|
||||
<link href="../../css/theme.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/theme-auto.css?1700524446" rel="stylesheet" id="R-variant-style">
|
||||
<link href="../../css/variant.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/print.css?1700524446" rel="stylesheet" media="print">
|
||||
<link href="../../css/format-print.css?1700524446" rel="stylesheet">
|
||||
<link href="../../css/ie.css?1700524446" rel="stylesheet">
|
||||
<script src="../../js/url.js?1700524446"></script>
|
||||
<script src="../../js/variant.js?1700524446"></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
|
||||
|
|
@ -94,8 +94,8 @@
|
|||
<h1 id="topbar-modification">Topbar Modification</h1>
|
||||
|
||||
<p>The theme comes with a reasonably configured topbar.</p>
|
||||
<p><a href="#R-image-bfff9502c39c09eee2e7be83e5444d79" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-bfff9502c39c09eee2e7be83e5444d79"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-df44a3bffc5fe1fbf9f4c68dc48eb211" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-df44a3bffc5fe1fbf9f4c68dc48eb211"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
|
||||
|
||||
<div class="box notices cstyle tip">
|
||||
|
|
@ -107,8 +107,8 @@
|
|||
</div>
|
||||
<h2 id="areas">Areas</h2>
|
||||
<p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
|
||||
<p><a href="#R-image-e69ba9abec0d33dc19352dd2d2dbae6e" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-e69ba9abec0d33dc19352dd2d2dbae6e"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<p><a href="#R-image-9305e09e5938581501e83333eabeeeb3" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
||||
<a href="javascript:history.back();" class="lightbox-back" id="R-image-9305e09e5938581501e83333eabeeeb3"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
|
||||
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
|
||||
|
|
@ -144,14 +144,14 @@
|
|||
<i class="fa-fw fas fa-pen"></i>
|
||||
|
||||
</button>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" target="_blank"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="../../basics/configuration/index.html#global-site-parameters">parameter is set</a></li>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" target="_blank"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="../../basics/configuration/index.html">parameter is set</a></li>
|
||||
<li>
|
||||
<span class="btn cstyle transparent">
|
||||
<button type="button">
|
||||
<i class="fa-fw fas fa-print"></i>
|
||||
|
||||
</button>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><strong>print</strong></a>: browses to the chapters printable page if <a href="../../basics/configuration/index.html#activate-print-support">print support</a> was activated</li>
|
||||
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><strong>print</strong></a>: browses to the chapters printable page if <a href="../../basics/customization/index.html#activate-print-support">print support</a> was activated</li>
|
||||
<li>
|
||||
<span class="btn cstyle transparent">
|
||||
<button type="button">
|
||||
|
|
@ -426,8 +426,8 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="../../js/clipboard.min.js?1700469871" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700469871" defer></script>
|
||||
<script src="../../js/theme.js?1700469871" defer></script>
|
||||
<script src="../../js/clipboard.min.js?1700524446" defer></script>
|
||||
<script src="../../js/perfect-scrollbar.min.js?1700524446" defer></script>
|
||||
<script src="../../js/theme.js?1700524446" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue