nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-06-15 13:20:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

deploy: 1250bf30a8

Browse source
This commit is contained in:
McShelby 2023-10-09 15:44:52 +00:00
parent b7b1d3921b
commit aa299efbdf
256 changed files with 6494 additions and 6284 deletions
basics/customization
index.htmlindex.print.html

74
basics/customization/index.html
View file

@ -13,20 +13,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?1696699240" rel="icon" type="image/svg+xml">
<link href="../../images/logo.svg?1696866282" 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?1696699240" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1696699240" rel="stylesheet"></noscript>
<link href="../../css/nucleus.css?1696699240" rel="stylesheet">
<link href="../../css/auto-complete.css?1696699240" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1696699240" rel="stylesheet"></noscript>
<link href="../../css/perfect-scrollbar.min.css?1696699240" rel="stylesheet">
<link href="../../css/fonts.css?1696699240" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1696699240" rel="stylesheet"></noscript>
<link href="../../css/theme.css?1696699240" rel="stylesheet">
<link href="../../css/theme-auto.css?1696699240" rel="stylesheet" id="R-variant-style">
<link href="../../css/variant.css?1696699240" rel="stylesheet">
<link href="../../css/print.css?1696699240" rel="stylesheet" media="print">
<link href="../../css/ie.css?1696699240" rel="stylesheet">
<script src="../../js/url.js?1696699240"></script>
<script src="../../js/variant.js?1696699240"></script>
<link href="../../css/fontawesome-all.min.css?1696866282" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1696866282" rel="stylesheet"></noscript>
<link href="../../css/nucleus.css?1696866282" rel="stylesheet">
<link href="../../css/auto-complete.css?1696866282" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1696866282" rel="stylesheet"></noscript>
<link href="../../css/perfect-scrollbar.min.css?1696866282" rel="stylesheet">
<link href="../../css/fonts.css?1696866282" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1696866282" rel="stylesheet"></noscript>
<link href="../../css/theme.css?1696866282" rel="stylesheet">
<link href="../../css/theme-auto.css?1696866282" rel="stylesheet" id="R-variant-style">
<link href="../../css/variant.css?1696866282" rel="stylesheet">
<link href="../../css/print.css?1696866282" rel="stylesheet" media="print">
<link href="../../css/ie.css?1696866282" rel="stylesheet">
<script src="../../js/url.js?1696866282"></script>
<script src="../../js/variant.js?1696866282"></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
@ -82,9 +82,10 @@
<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="#output-formats">Output Formats</a></li>
</ul>
</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>
</ul>
</nav>
</div>
@ -261,7 +262,30 @@ If you have requirements to support IE and/or older browser versions, use one of
</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/">interactive variant generator</a>.</p>
<h3 id="output-formats">Output Formats</h3>
<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>
<ol>
<li>
<p>Write the shortcode file <code>layouts/partials/shortcode/myshortcode.html</code> and add the following line</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">-</span> <span class="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">Set</span> <span class="s">&#34;hasMyShortcode&#34;</span> <span class="kc">true</span> <span class="p">}}</span></span></span></code></pre></div></li>
<li>
<p>Add the following snippet to your <code>config.toml</code></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">relearn</span><span class="p">.</span><span class="nx">dependencies</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">relearn</span><span class="p">.</span><span class="nx">dependencies</span><span class="p">.</span><span class="nx">myshortcode</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s">&#34;MyShortcode&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">location</span> <span class="p">=</span> <span class="s">&#34;footer&#34;</span></span></span></code></pre></div></li>
<li>
<p>Add the dependency loader file <code>layouts/dependencies/myshortcode.html</code>. The loader file will be appended to your header or footer, dependend on the <code>location</code> setting in your <code>config.toml</code>.</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://www.unpkg.com/jquery/dist/jquery.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span></span></span></code></pre></div></li>
</ol>
<p>Character casing is relevant!</p>
<ul>
<li>the <code>name</code> setting in your <code>config.toml</code> must match the key you used for the store in your <code>layouts/partials/shortcode/myshortcode.html</code>.</li>
<li>the key on <code>params.relearn.dependencies</code> in your <code>config.toml</code> must match the file name of your loader file.</li>
</ul>
<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>
<footer class="footline">
@ -359,12 +383,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?1696699240" defer></script>
<script src="../../js/lunr/lunr.min.js?1696699240" defer></script>
<script src="../../js/lunr/lunr.stemmer.support.min.js?1696699240" defer></script>
<script src="../../js/lunr/lunr.multi.min.js?1696699240" defer></script>
<script src="../../js/lunr/lunr.en.min.js?1696699240" defer></script>
<script src="../../js/search.js?1696699240" defer></script>
<script src="../../js/auto-complete.js?1696866283" defer></script>
<script src="../../js/lunr/lunr.min.js?1696866283" defer></script>
<script src="../../js/lunr/lunr.stemmer.support.min.js?1696866283" defer></script>
<script src="../../js/lunr/lunr.multi.min.js?1696866283" defer></script>
<script src="../../js/lunr/lunr.en.min.js?1696866283" defer></script>
<script src="../../js/search.js?1696866283" defer></script>
</div>
<div id="R-homelinks" class="default-animation">
<hr class="padding">
@ -521,13 +545,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?1696699240"></script>
<script async src="../../js/github-buttons.js?1696866283"></script>
</div>
</div>
</div>
</aside>
<script src="../../js/clipboard.min.js?1696699240" defer></script>
<script src="../../js/perfect-scrollbar.min.js?1696699240" defer></script>
<script src="../../js/theme.js?1696699240" defer></script>
<script src="../../js/clipboard.min.js?1696866283" defer></script>
<script src="../../js/perfect-scrollbar.min.js?1696866283" defer></script>
<script src="../../js/theme.js?1696866283" defer></script>
</body>
</html>

59
basics/customization/index.print.html
View file

@ -13,21 +13,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?1696699240" rel="icon" type="image/svg+xml">
<link href="../../images/logo.svg?1696866282" 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?1696699241" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1696699241" rel="stylesheet"></noscript>
<link href="../../css/nucleus.css?1696699241" rel="stylesheet">
<link href="../../css/auto-complete.css?1696699241" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1696699241" rel="stylesheet"></noscript>
<link href="../../css/perfect-scrollbar.min.css?1696699241" rel="stylesheet">
<link href="../../css/fonts.css?1696699241" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1696699241" rel="stylesheet"></noscript>
<link href="../../css/theme.css?1696699241" rel="stylesheet">
<link href="../../css/theme-auto.css?1696699241" rel="stylesheet" id="R-variant-style">
<link href="../../css/variant.css?1696699241" rel="stylesheet">
<link href="../../css/print.css?1696699241" rel="stylesheet" media="print">
<link href="../../css/format-print.css?1696699241" rel="stylesheet">
<link href="../../css/ie.css?1696699241" rel="stylesheet">
<script src="../../js/url.js?1696699241"></script>
<script src="../../js/variant.js?1696699241"></script>
<link href="../../css/fontawesome-all.min.css?1696866283" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1696866283" rel="stylesheet"></noscript>
<link href="../../css/nucleus.css?1696866283" rel="stylesheet">
<link href="../../css/auto-complete.css?1696866283" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1696866283" rel="stylesheet"></noscript>
<link href="../../css/perfect-scrollbar.min.css?1696866283" rel="stylesheet">
<link href="../../css/fonts.css?1696866283" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1696866283" rel="stylesheet"></noscript>
<link href="../../css/theme.css?1696866283" rel="stylesheet">
<link href="../../css/theme-auto.css?1696866283" rel="stylesheet" id="R-variant-style">
<link href="../../css/variant.css?1696866283" rel="stylesheet">
<link href="../../css/print.css?1696866283" rel="stylesheet" media="print">
<link href="../../css/format-print.css?1696866283" rel="stylesheet">
<link href="../../css/ie.css?1696866283" rel="stylesheet">
<script src="../../js/url.js?1696866283"></script>
<script src="../../js/variant.js?1696866283"></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
@ -205,7 +205,30 @@ If you have requirements to support IE and/or older browser versions, use one of
</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/">interactive variant generator</a>.</p>
<h3 id="output-formats">Output Formats</h3>
<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>
<ol>
<li>
<p>Write the shortcode file <code>layouts/partials/shortcode/myshortcode.html</code> and add the following line</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">-</span> <span class="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">Set</span> <span class="s">&#34;hasMyShortcode&#34;</span> <span class="kc">true</span> <span class="p">}}</span></span></span></code></pre></div></li>
<li>
<p>Add the following snippet to your <code>config.toml</code></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">relearn</span><span class="p">.</span><span class="nx">dependencies</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">relearn</span><span class="p">.</span><span class="nx">dependencies</span><span class="p">.</span><span class="nx">myshortcode</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s">&#34;MyShortcode&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">location</span> <span class="p">=</span> <span class="s">&#34;footer&#34;</span></span></span></code></pre></div></li>
<li>
<p>Add the dependency loader file <code>layouts/dependencies/myshortcode.html</code>. The loader file will be appended to your header or footer, dependend on the <code>location</code> setting in your <code>config.toml</code>.</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://www.unpkg.com/jquery/dist/jquery.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span></span></span></code></pre></div></li>
</ol>
<p>Character casing is relevant!</p>
<ul>
<li>the <code>name</code> setting in your <code>config.toml</code> must match the key you used for the store in your <code>layouts/partials/shortcode/myshortcode.html</code>.</li>
<li>the key on <code>params.relearn.dependencies</code> in your <code>config.toml</code> must match the file name of your loader file.</li>
</ul>
<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>
<footer class="footline">
@ -222,8 +245,8 @@ If you have requirements to support IE and/or older browser versions, use one of
</div>
</main>
</div>
<script src="../../js/clipboard.min.js?1696699241" defer></script>
<script src="../../js/perfect-scrollbar.min.js?1696699241" defer></script>
<script src="../../js/theme.js?1696699241" defer></script>
<script src="../../js/clipboard.min.js?1696866284" defer></script>
<script src="../../js/perfect-scrollbar.min.js?1696866284" defer></script>
<script src="../../js/theme.js?1696866284" defer></script>
</body>
</html>