mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 09:43:06 +00:00
1300 lines
88 KiB
HTML
1300 lines
88 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Article">
|
|
<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.136.5">
|
|
<meta name="generator" content="Relearn 7.1.0+ad8ee549a7f4d02899713ed23f4c75ad3d7a21af">
|
|
<meta name="description" content="Customize files for advanced usage">
|
|
<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="Customization :: Hugo Relearn Theme">
|
|
<meta name="twitter:description" content="Customize files for advanced usage">
|
|
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/index.html">
|
|
<meta property="og:site_name" content="Hugo Relearn Theme">
|
|
<meta property="og:title" content="Customization :: Hugo Relearn Theme">
|
|
<meta property="og:description" content="Customize files for advanced usage">
|
|
<meta property="og:locale" content="en">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="name" content="Customization :: Hugo Relearn Theme">
|
|
<meta itemprop="description" content="Customize files for advanced usage">
|
|
<meta itemprop="wordCount" content="40">
|
|
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="keywords" content="Reference">
|
|
<title>Customization :: Hugo Relearn Theme</title>
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/index.html" rel="alternate" hreflang="x-default">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/index.html" rel="alternate" hreflang="en">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/index.html" rel="alternate" hreflang="art-x-pir">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/index.html" rel="canonical" type="text/html" title="Customization :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/configuration/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/images/logo.svg?1729838017" rel="icon" type="image/svg+xml">
|
|
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729838017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729838017" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/nucleus.css?1729838017" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/auto-complete.css?1729838017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1729838017" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1729838017" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/fonts.css?1729838017" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1729838017" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/theme.css?1729838017" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1729838017" rel="stylesheet" id="R-variant-style">
|
|
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1729838017" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="/hugo-theme-relearn/css/print.css?1729838017" rel="stylesheet" media="print">
|
|
<link href="/hugo-theme-relearn/css/format-print.css?1729838017" rel="stylesheet">
|
|
<script src="/hugo-theme-relearn/js/variant.js?1729838017"></script>
|
|
<script>
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.relBasePath='..\/..';
|
|
window.relearn.relBaseUri='..\/..\/..';
|
|
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
|
|
window.relearn.disableAnchorCopy=false;
|
|
window.relearn.disableAnchorScrolling=false;
|
|
// variant stuff
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', '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="/hugo-theme-relearn/configuration/customization/index.html">
|
|
<div id="R-body" class="default-animation">
|
|
<div id="R-body-overlay"></div>
|
|
<nav id="R-topbar">
|
|
<div class="topbar-wrapper">
|
|
<div class="topbar-sidebar-divider"></div>
|
|
<div class="topbar-area topbar-area-start" data-area="start">
|
|
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)"><i class="fa-fw fas fa-bars"></i></button>
|
|
</div>
|
|
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table of Contents (CTRL+ALT+t)"><i class="fa-fw fas fa-list-alt"></i></button>
|
|
<div class="topbar-content">
|
|
<div class="topbar-content-wrapper">
|
|
</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="/hugo-theme-relearn/configuration/index.html"><span itemprop="name">Configuration</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Customization</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/configuration/customization/_index.en.md" target="_self" 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="/hugo-theme-relearn/configuration/customization/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="/hugo-theme-relearn/configuration/content/hidden/index.html" title="Hidden Pages (🡐)"><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="/hugo-theme-relearn/configuration/customization/partials/index.html" title="Partials (🡒)"><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 configuration" tabindex="-1">
|
|
<div class="flex-block-wrapper">
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="customization">Customization</h1>
|
|
|
|
<div class="children children-h2 children-sort-">
|
|
<h2><a href="/hugo-theme-relearn/configuration/customization/partials/index.html">Partials</a></h2><p>Modifying partials to your needs</p>
|
|
<h2><a href="/hugo-theme-relearn/configuration/customization/dependencies/index.html">Extending Scripts</a></h2><p>Add further code to your site</p>
|
|
<h2><a href="/hugo-theme-relearn/configuration/customization/imageeffects/index.html">Image Effects</a></h2><p>How to extend image effects</p>
|
|
<h2><a href="/hugo-theme-relearn/configuration/customization/topbar/index.html">Topbar</a></h2><p>How to extend the topbar</p>
|
|
<h2><a href="/hugo-theme-relearn/configuration/customization/designs/index.html">Page Designs</a></h2><p>Extending page designs</p>
|
|
<h2><a href="/hugo-theme-relearn/configuration/customization/outputformats/index.html">Output Formats</a></h2><p>Adding Custom Output Formats</p>
|
|
<h2><a href="/hugo-theme-relearn/configuration/customization/taxonomy/index.html">Taxonomies</a></h2><p>How to display custom taxonomies on your pages</p>
|
|
</div>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/reference/index.html">Reference</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<section>
|
|
<h1 class="a11y-only">Subsections of Customization</h1>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="partials">Partials</h1>
|
|
|
|
<h2 id="usable-partials">Usable Partials</h2>
|
|
<p>You can call other partials from <code>themes/hugo-relearn-themes/</code> besides those in <code>themes/hugo-relearn-themes/layouts/partials/_relearn</code>. However, using partials not mentioned as customizable below might make future updates more challenging.</p>
|
|
<h2 id="customizable-partials">Customizable Partials</h2>
|
|
<p>The Relearn theme allows you to customize various parts of the theme by overriding partials. This makes the theme highly configurable.</p>
|
|
<p>A good rule to follow: The less code a partial contains, the easier it will be to update the theme in the future.</p>
|
|
<p>Here’s a list of partials you can safely override:</p>
|
|
<ul>
|
|
<li>
|
|
<p><code>layouts/partials/content.html</code>: The main content of a page. Override this to display additonal page metadata.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/content-header.html</code>: The header above the title. By default, it shows tags, but you can change this.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/content-footer.html</code>: The footer below the content. By default, it shows author info, modification dates, and categories. You can customize this.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/custom-header.html</code>: For adding custom CSS. Remember to include the <code>style</code> HTML tag.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/custom-footer.html</code>: For adding custom JavaScript. Remember to include the <code>script</code> HTML tag.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/favicon.html</code>: The favicon. You should definitely customize this.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/heading.html</code>: the page’s title headings</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/heading-pre.html</code>: Add content before the page’s title headings. Remember to consider the <code>headingPre</code> front matter.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/heading-post.html</code>: Add content after the page’s title headings. Remember to consider the <code>headingPost</code> front matter.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/logo.html</code>: The logo in the top left corner. You should customize this.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/menu-pre.html</code>: Add content before menu items. Remember to consider the <code>menuPre</code> front matter.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/menu-post.html</code>: Add content after menu items. Remember to consider the <code>menuPost</code> front matter.</p>
|
|
</li>
|
|
<li>
|
|
<p><code>layouts/partials/menu-footer.html</code>: The footer of the left menu.</p>
|
|
</li>
|
|
</ul>
|
|
<p>You can override other partials from <code>themes/hugo-relearn-themes/</code>, but be careful as this might make future updates more difficult.</p>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/explanation/index.html">Explanation</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="extending-scripts">Extending Scripts</h1>
|
|
|
|
<p>A common question is how to add extra CSS styles or JavaScript to your site. This depends on what you need.</p>
|
|
<h2 id="adding-javascript-or-stylesheets-to-all-pages">Adding JavaScript or Stylesheets to All Pages</h2>
|
|
<p>To add JavaScript files or CSS stylesheets to every page, you can include them in <code>layouts/partials/custom-header.html</code> or <code>layouts/partials/custom-footer.html</code>.</p>
|
|
<p>However, this can make your site larger than necessary if these files are only needed on a few pages. The next section explains how to add dependencies only when needed.</p>
|
|
<h2 id="custom-shortcodes-with-dependencies">Custom Shortcodes with Dependencies</h2>
|
|
<p>Some shortcodes need extra JavaScript and CSS files. The theme only loads these when the shortcode is used. You can use this for your own shortcodes too.</p>
|
|
<p>For example, to create a shortcode called <code>myshortcode</code> that needs the <code>jquery</code> library:</p>
|
|
<ol>
|
|
<li>
|
|
<p>Create the shortcode file <code>layouts/shortcodes/myshortcode.html</code> and add the folloging line somewhere:</p>
|
|
<div class="tab-panel" data-tab-group="18a67b43a7d8f3bbb01ad5138232e582">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="layoutsshortcodesmyshortcodehtml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('18a67b43a7d8f3bbb01ad5138232e582','layoutsshortcodesmyshortcodehtml')"
|
|
>
|
|
<span class="tab-nav-text">layouts/shortcodes/myshortcode.html</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="layoutsshortcodesmyshortcodehtml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="o">...</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">-</span> <span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">Set</span> <span class="s">"hasMyShortcode"</span> <span class="kc">true</span> <span class="p">}}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="o">...</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></li>
|
|
<li>
|
|
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Option</span></span> Add this to your <code>hugo.toml</code>:</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">relearn</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></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="s1">'MyShortcode'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">relearn</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">dependencies</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">myshortcode</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">MyShortcode</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"relearn"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"dependencies"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"myshortcode"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"MyShortcode"</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></span><span class="line"><span class="cl"> <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></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<p>Create loader file <code>layouts/partials/dependencies/myshortcode.html</code>:</p>
|
|
<div class="tab-panel" data-tab-group="c5d40b915bfc89d65ec7336abdf5a020">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="layoutspartialsdependenciesmyshortcodehtml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('c5d40b915bfc89d65ec7336abdf5a020','layoutspartialsdependenciesmyshortcodehtml')"
|
|
>
|
|
<span class="tab-nav-text">layouts/partials/dependencies/myshortcode.html</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="layoutspartialsdependenciesmyshortcodehtml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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="k">if</span> <span class="nx">eq</span> <span class="p">.</span><span class="nx">location</span> <span class="s">"footer"</span> <span class="p">}}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nx">script</span> <span class="nx">src</span><span class="p">=</span><span class="s">"https://www.unpkg.com/jquery/dist/jquery.js"</span><span class="p">><</span><span class="o">/</span><span class="nx">script</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">-</span> <span class="nx">end</span> <span class="p">}}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></li>
|
|
</ol>
|
|
<p>Important notes:</p>
|
|
<ul>
|
|
<li>Character casing is relevant!</li>
|
|
<li>The <code>name</code> in <code>hugo.toml</code> must match the <code>Store</code> key used in the shortcode file, prefixed with a <code>has</code>.</li>
|
|
<li>The key of <code>relearn.dependencies</code> must match the loader file name.</li>
|
|
</ul>
|
|
<p>See the <code>math</code>, <code>mermaid</code>, and <code>openapi</code> shortcodes for examples.</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>For advanced customization, you can use the dependency loader in your own partials:</p>
|
|
<div class="highlight wrap-code"><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="nx">partial</span> <span class="s">"dependencies.gotmpl"</span> <span class="p">(</span><span class="nx">dict</span> <span class="s">"page"</span> <span class="p">.</span> <span class="s">"location"</span> <span class="s">"mylocation"</span><span class="p">)</span> <span class="p">}}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<p>Give a unique name for the <code>location</code> parameter when you call it, so you can distinguish your loaders behavior depending on the location it was called from.</p>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/explanation/index.html">Explanation</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/howto/index.html">Howto</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="image-effects">Image Effects</h1>
|
|
|
|
<p>This page shows you, how to configure custom <a href="/hugo-theme-relearn/authoring/markdown/index.html#image-effects">image effects</a> on top of existing ones.</p>
|
|
<p>This setting can also <a href="/hugo-theme-relearn/authoring/imageeffects/index.html">be overridden by your front matter</a>.</p>
|
|
<p>If you don’t configure anything in your <code>hugo.toml</code>, the image effects default to</p>
|
|
<h2 id="default-values">Default Values</h2>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">imageEffects</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">false</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"imageEffects"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"border"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lazy"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lightbox"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"shadow"</span><span class="p">:</span> <span class="kc">false</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></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 id="configuration">Configuration</h2>
|
|
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Option</span></span> You can change these settings in your <code>hugo.toml</code> and add arbitrary custom effects as boolean values (like <code>bg-white</code> in the below snippet).</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">imageEffects</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">bg-white</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">bg-white</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"imageEffects"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"bg-white"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"border"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lazy"</span><span class="p">:</span> <span class="kc">false</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></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>This would result in</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">imageEffects</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">bg-white</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">false</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">bg-white</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"imageEffects"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"bg-white"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"border"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lazy"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lightbox"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"shadow"</span><span class="p">:</span> <span class="kc">false</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></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 id="example">Example</h3>
|
|
<p>With this configuration in effect, the following URL</p>
|
|
<div class="tab-panel" data-tab-group="0eaf047ffcbd296241a950883300a745">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="markdown"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('0eaf047ffcbd296241a950883300a745','markdown')"
|
|
>
|
|
<span class="tab-nav-text">Markdown</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="markdown"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png</span>)</span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><p>would result in</p>
|
|
<div class="tab-panel" data-tab-group="a114becf0623d14e597f7aa8b5a2546c">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="html"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('a114becf0623d14e597f7aa8b5a2546c','html')"
|
|
>
|
|
<span class="tab-nav-text">HTML</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="html"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://octodex.github.com/images/minion.png"</span> <span class="na">loading</span><span class="o">=</span><span class="s">"lazy"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Minion"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-white border nolazy lightbox noshadow"</span><span class="p">></span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><h2 id="styling-effects">Styling Effects</h2>
|
|
<p>If the resulting effect value is</p>
|
|
<ul>
|
|
<li><code>true</code>: add a class with the effect’s name</li>
|
|
<li><code>false</code>: add a class with the effect’s name and a “no” prefix</li>
|
|
</ul>
|
|
<p>Styles for default effects are contained in the theme. Add styles for your custom effects to <code>layouts/partials/content-header.html</code>.</p>
|
|
<p>For the above example you could add styles for both boolean cases:</p>
|
|
<div class="tab-panel" data-tab-group="84958bf2984f776b58180874a57a255b">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="layoutspartialscontent-headerhtml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('84958bf2984f776b58180874a57a255b','layoutspartialscontent-headerhtml')"
|
|
>
|
|
<span class="tab-nav-text">layouts/partials/content-header.html</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="layoutspartialscontent-headerhtml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">style</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="nt">img</span><span class="p">.</span><span class="nc">bg-white</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">white</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="nt">img</span><span class="p">.</span><span class="nc">nobg-white</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">transparent</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="nt">style</span><span class="p">></span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/explanation/index.html">Explanation</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/howto/index.html">Howto</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="topbar">Topbar</h1>
|
|
|
|
<p>The theme comes with a reasonably configured topbar. You can learn how to <a href="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html">configure the defaults in this section</a>.</p>
|
|
<p><a href="#R-image-46de4690b2890c42299f4fbdb473cce7" class="lightbox-link"><img alt="topbar on mobile devices" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="/hugo-theme-relearn/configuration/customization/topbar/topbar-closed.png" style=" height: auto; width: auto;"></a>
|
|
<a href="javascript:history.back();" class="lightbox-back" id="R-image-46de4690b2890c42299f4fbdb473cce7"><img alt="topbar on mobile devices" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="/hugo-theme-relearn/configuration/customization/topbar/topbar-closed.png"></a></p>
|
|
<p>Nevertheless, your requirements may differ from this configuration. Luckily, the theme has you covered as the topbar, its buttons, and the functionality behind these buttons are fully configurable by you.</p>
|
|
<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>All mentioned file names below can be clicked and show you the implementation for a better understanding.</p>
|
|
</div>
|
|
</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-83a7e7dd175bbc20ef00a85d62f784af" class="lightbox-link"><img alt="topbar with default areas marked" class="bg-white border lazy lightbox noshadow figure-image" loading="lazy" src="/hugo-theme-relearn/configuration/customization/topbar/topbar-areas.png" style=" height: auto; width: auto;"></a>
|
|
<a href="javascript:history.back();" class="lightbox-back" id="R-image-83a7e7dd175bbc20ef00a85d62f784af"><img alt="topbar with default areas marked" class="bg-white border lazy lightbox noshadow lightbox-image" loading="lazy" src="/hugo-theme-relearn/configuration/customization/topbar/topbar-areas.png"></a></p>
|
|
<ul>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" rel="external" target="_self"><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" rel="external" target="_self"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/more.html" rel="external" target="_self"><strong>more</strong></a>: shown when pressing the <span class="btn cstyle transparent"><span><i class="fa-fw fas fa-ellipsis-v"></i></span></span> <em>more</em> button in the topbar</li>
|
|
</ul>
|
|
<p>While you cannot add additional areas in the topbar, you are free to configure additional buttons that behave like the <em>more</em> button, providing further user-defined areas.</p>
|
|
<h2 id="buttons">Buttons</h2>
|
|
<p>The theme ships with the following predefined buttons (from left to right in the screenshot):</p>
|
|
<ul>
|
|
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-bars"></i></span></span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/sidebar.html" rel="external" target="_self"><strong>sidebar</strong></a>: opens the sidebar flyout if in mobile layout</li>
|
|
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-list-alt"></i></span></span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" rel="external" target="_self"><strong>toc</strong></a>: <a href="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html#table-of-contents">opens the table of contents in an overlay</a></li>
|
|
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-pen"></i></span></span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" rel="external" target="_self"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html#edit-button">parameter is set</a></li>
|
|
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-print"></i></span></span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" rel="external" target="_self"><strong>print</strong></a>: browses to the chapter’s printable page if <a href="/hugo-theme-relearn/configuration/sitemanagement/outputformats/index.html#print-support">print support</a> was activated</li>
|
|
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-chevron-left"></i></span></span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/prev.html" rel="external" target="_self"><strong>prev</strong></a>: browses to the <a href="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html#arrow-navigation">previous page</a> if there is one</li>
|
|
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-chevron-right"></i></span></span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/next.html" rel="external" target="_self"><strong>next</strong></a>: browses to the [next page]authoring/frontmatter/topbar(#arrow-navigation) if there is one</li>
|
|
<li><span class="btn cstyle transparent"><span><i class="fa-fw fas fa-ellipsis-v"></i></span></span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" rel="external" target="_self"><strong>more</strong></a>: opens the overlay for the <em>more</em> area</li>
|
|
</ul>
|
|
<p>Not all buttons are displayed at every given time. This is configurable (see below if interested).</p>
|
|
<h2 id="redefining-areas">Redefining Areas</h2>
|
|
<p>Each predefined area and button comes in its own file. By that, it is easy for you to overwrite an area file in your installation, reusing only the buttons you like.</p>
|
|
<p>E.g., you can redefine the predefined <em>end</em> area by adding the file <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" rel="external" target="_self"><code>layouts/partials/topbar/area/end.html</code></a> in your installation (not in the theme itself) to remove all but the <em>more</em> button.</p>
|
|
<p>The below example sets an explicit value for the <code>onempty</code> parameter, overriding the specific default value for this button (these defaults vary depending on the button). The parameter causes the <em>more</em> button to always be displayed instead of hiding once its content is empty.</p>
|
|
<div class="highlight wrap-code"><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">partial</span> <span class="s">"topbar/button/more.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"onempty"</span> <span class="s">"disable"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
|
|
<h2 id="defining-own-buttons">Defining Own Buttons</h2>
|
|
<h3 id="button-types">Button Types</h3>
|
|
<p>The theme distinguishes between two types of buttons:</p>
|
|
<ul>
|
|
<li><a href="/hugo-theme-relearn/configuration/customization/topbar/index.html#button"><strong>button</strong></a>: a clickable button that either browses to another site, triggers a user-defined script or opens an overlay containing user-defined content</li>
|
|
<li><a href="/hugo-theme-relearn/configuration/customization/topbar/index.html#area-button"><strong>area-button</strong></a>: the template for the <span class="btn cstyle transparent"><span><i class="fa-fw fas fa-ellipsis-v"></i></span></span> <em>more</em> button, to define your own area overlay buttons</li>
|
|
</ul>
|
|
<h3 id="button-parameter">Button Parameter</h3>
|
|
<h4 id="screen-widths-and-actions">Screen Widths and Actions</h4>
|
|
<p>Depending on the screen width, you can configure how the button should behave. Screen width is divided into three classes:</p>
|
|
<ul>
|
|
<li><strong>s</strong>: (controlled by the <code>onwidths</code> parameter) mobile layout where the menu sidebar is hidden</li>
|
|
<li><strong>m</strong>: (controlled by the <code>onwidthm</code> parameter) desktop layout with visible sidebar while the content area width still resizes</li>
|
|
<li><strong>l</strong>: (controlled by the <code>onwidthl</code> parameter) desktop layout with visible sidebar once the content area reached its maximum width</li>
|
|
</ul>
|
|
<p>For each width class, you can configure one of the following actions:</p>
|
|
<ul>
|
|
<li><code>show</code>: the button is displayed in its given area</li>
|
|
<li><code>hide</code>: the button is removed</li>
|
|
<li><code>area-XXX</code>: the button is moved from its given area into the area <code>XXX</code>; for example, this is used to move buttons to the <em>more</em> area overlay in the mobile layout</li>
|
|
</ul>
|
|
<h4 id="hiding-and-disabling-stuff">Hiding and Disabling Stuff</h4>
|
|
<p>While hiding a button depending on the screen size can be configured with the above-described <em>hide</em> action, you may want to hide the button on certain other conditions as well.</p>
|
|
<p>For example, the <em>print</em> button in its default configuration should only be displayed if print support was configured. This is done in your button template by checking the conditions first before displaying the button (see <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" rel="external" target="_self"><code>layouts/partials/topbar/button/print.html</code></a>).</p>
|
|
<p>Another preferred condition for hiding a button is if the displayed overlay is empty. This is the case for the <em>toc</em> (see <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" rel="external" target="_self"><code>layouts/partials/topbar/button/toc.html</code></a>) as well as the <em>more</em> button (see <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" rel="external" target="_self"><code>layouts/partials/topbar/button/more.html</code></a>) and controlled by the parameter <code>onempty</code>.</p>
|
|
<p>This parameter can have one of the following values:</p>
|
|
<ul>
|
|
<li><code>disable</code>: the button is displayed in a disabled state if the overlay is empty</li>
|
|
<li><code>hide</code>: the button is removed if the overlay is empty</li>
|
|
</ul>
|
|
<p>If you want to disable a button containing <em>no overlay</em>, this can be achieved by an empty <code>href</code> parameter. An example can be seen in the <em>prev</em> button (see <code>layouts/partials/topbar/button/prev.html</code>) where the URL for the previous site may be empty.</p>
|
|
<h2 id="reference">Reference</h2>
|
|
<h3 id="button">Button</h3>
|
|
<p>Contains the basic button functionality and is used as a base implementation for all other buttons (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/button.html" rel="external" target="_self"><code>layouts/partials/topbar/func/button.html</code></a>).</p>
|
|
<p>Call this from your own button templates if you want to implement a button without an overlay like the <em>print</em> button (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" rel="external" target="_self"><code>layouts/partials/topbar/button/print.html</code></a>) or with an overlay containing arbitrary content like the <em>toc</em> button (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" rel="external" target="_self"><code>layouts/partials/topbar/button/toc.html</code></a>).</p>
|
|
<p>For displaying an area in the button’s overlay, see <a href="/hugo-theme-relearn/configuration/customization/topbar/index.html#area-button">Area-Button</a>.</p>
|
|
<h4 id="parameter">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>class</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory unique class name for this button. Displaying two buttons with the same value for <strong>class</strong> is undefined.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>href</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Either the destination URL for the button or JavaScript code to be executed on click.<br><br>- If starting with <code>javascript:</code> all following text will be executed in your browser<br>- Every other string will be interpreted as URL<br>- If empty, the button will be displayed in a disabled state regardless of its <strong>content</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>icon</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td><a href="/hugo-theme-relearn/shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onempty</strong></td>
|
|
<td><code>disable</code></td>
|
|
<td>Defines what to do with the button if the content parameter was set but ends up empty:<br><br>- <code>disable</code>: The button is displayed in a disabled state.<br>- <code>hide</code>: The button is removed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>hint</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary text displayed in the tooltip.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>title</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary text for the button.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>content</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary HTML to put into the content overlay. This parameter may be empty. In this case, no overlay will be generated.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 id="area-button">Area-Button</h3>
|
|
<p>Contains the basic functionality to display area overlay buttons (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/area-button.html" rel="external" target="_self"><code>layouts/partials/topbar/func/area-button.html</code></a>).</p>
|
|
<p>Call this from your own button templates if you want to implement a button with an area overlay like the <em>more</em> button (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" rel="external" target="_self"><code>layouts/partials/topbar/button/more.html</code></a>).</p>
|
|
<h4 id="parameter-1">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>area</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory unique area name for this area. Displaying two areas with the same value for <strong>area</strong> is undefined.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>icon</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td><a href="/hugo-theme-relearn/shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onempty</strong></td>
|
|
<td><code>disable</code></td>
|
|
<td>Defines what to do with the button if the content overlay is empty:<br><br>- <code>disable</code>: The button is displayed in a disabled state.<br>- <code>hide</code>: The button is removed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>hint</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary text displayed in the tooltip.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>title</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary text for the button.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 id="predefined-buttons">Predefined Buttons</h3>
|
|
<p>The predefined buttons by the theme (all other buttons besides the <em>more</em> and <em>toc</em> button in <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button" rel="external" target="_self"><code>layouts/partials/topbar/button</code></a>).</p>
|
|
<p>Call these from your own redefined area templates if you want to use default button behavior.</p>
|
|
<p>The <em><varying></em> parameter values are different for each button and configured for standard behavior as seen on this page.</p>
|
|
<h4 id="parameter-2">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 id="predefined-overlay-buttons">Predefined Overlay-Buttons</h3>
|
|
<p>The predefined buttons by the theme that open an overlay (the <em>more</em> and <em>toc</em> button in <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button" rel="external" target="_self"><code>layouts/partials/topbar/button</code></a>).</p>
|
|
<p>Call these from your own redefined area templates if you want to use default button behavior utilizing overlay functionality.</p>
|
|
<p>The <em><varying></em> parameter values are different for each button and configured for standard behavior as seen on this page.</p>
|
|
<h4 id="parameter-3">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onempty</strong></td>
|
|
<td><code>disable</code></td>
|
|
<td>Defines what to do with the button if the content overlay is empty:<br><br>- <code>disable</code>: The button is displayed in a disabled state.<br>- <code>hide</code>: The button is removed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/explanation/index.html">Explanation</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/reference/index.html">Reference</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="page-designs">Page Designs</h1>
|
|
|
|
<p>A page is displayed by exactly one page design. The Relearn theme offers the page designs <code>home</code>, <code>chapter</code>, and <code>default</code>.</p>
|
|
<p>A page design usually consists of</p>
|
|
<ul>
|
|
<li><a href="https://gohugo.io/content-management/archetypes/" rel="external" target="_self">an archetype file</a>: a template for creating new Markdown files with this design</li>
|
|
<li><a href="https://gohugo.io/templates/types/#content-view" rel="external" target="_self">content view files</a>: represented by <a href="https://gohugo.io/content-management/front-matter/#type" rel="external" target="_self">Hugo’s reserved <code>type</code> front matter</a> and backed by matching partials</li>
|
|
<li>CSS styles</li>
|
|
</ul>
|
|
<p>If no <code>type</code> is set in your front matter, the page is treated as if <code>type='default'</code> was set.</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>Don’t use the <code>type</code> option in your modifications for other functionality!</p>
|
|
</div>
|
|
</div>
|
|
<p>All shipped designs use the theme’s framework from <code>themes/hugo-theme-learn/layouts/_default/baseof.html</code>, containing of the same topbar and sidebar but can change how content appears in the center of the page.</p>
|
|
<h2 id="using-a-page-design">Using a Page Design</h2>
|
|
<p>Regardless of shipped or custom page design, you are <a href="/hugo-theme-relearn/authoring/frontmatter/designs/index.html">using them</a> in the same way.</p>
|
|
<h2 id="creating-a-page-designs">Creating a Page Designs</h2>
|
|
<p>To make a custom page design:</p>
|
|
<ol>
|
|
<li>
|
|
<p>Choose a name (for example, <code>mydesign</code>)</p>
|
|
</li>
|
|
<li>
|
|
<p>Create a content view file at <code>layouts/mydesign/views/article.html</code></p>
|
|
<div class="tab-panel" data-tab-group="7c414bf8ce673836093a7556d038d45e">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="layoutsmydesignviewsarticlehtml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('7c414bf8ce673836093a7556d038d45e','layoutsmydesignviewsarticlehtml')"
|
|
>
|
|
<span class="tab-nav-text">layouts/mydesign/views/article.html</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="layoutsmydesignviewsarticlehtml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">article</span> <span class="na">class</span><span class="o">=</span><span class="s">"mydesign"</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">"headline"</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl">{{ partial "content-header.html" . }}
|
|
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">header</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"article-subheading"</span><span class="p">></span>AWESOME<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl">{{ partial "heading-pre.html" . }}{{ partial "heading.html" . }}{{ partial "heading-post.html" . }}
|
|
</span></span><span class="line"><span class="cl">{{ partial "article-content.html" . }}
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"footline"</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl">{{ partial "content-footer.html" . }}
|
|
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">footer</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">article</span><span class="p">></span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><p>In this file, you can customize the page design as needed. Typically, you’ll want to:</p>
|
|
<ul>
|
|
<li>Set a <code>class</code> at the <code>article</code> element for custom CSS styles</li>
|
|
<li>Use <code>{{ partial "article-content.html" . }}</code> to show your page content</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Create an archetype file at <code>archetypes/mydesign.md</code> (optional)</p>
|
|
<div class="tab-panel" data-tab-group="2439e27c3875ad5bc787e2ceca044221">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="archetypesmydesignmd"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('2439e27c3875ad5bc787e2ceca044221','archetypesmydesignmd')"
|
|
>
|
|
<span class="tab-nav-text">archetypes/mydesign.md</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="archetypesmydesignmd"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">+++
|
|
</span></span><span class="line"><span class="cl">title = "{{ replace .Name "-" " " | title }}"
|
|
</span></span><span class="line"><span class="cl">type = "mydesign"
|
|
</span></span><span class="line"><span class="cl">+++
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl">This is my new design.</span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></li>
|
|
<li>
|
|
<p>Add CSS in file <code>layouts/partials/custom-header.html</code> (optional)</p>
|
|
<div class="tab-panel" data-tab-group="fcbb3adc42a97b0072a58626e05b32c5">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="layoutspartialscustom-headerhtml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('fcbb3adc42a97b0072a58626e05b32c5','layoutspartialscustom-headerhtml')"
|
|
>
|
|
<span class="tab-nav-text">layouts/partials/custom-header.html</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="layoutspartialscustom-headerhtml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">style</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">mydesign</span> <span class="p">.</span><span class="nc">article-subheading</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">72</span><span class="kt">rem</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="nc">mydesign</span> <span class="nt">a</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="kc">pink</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="nt">style</span><span class="p">></span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></li>
|
|
</ol>
|
|
<h3 id="partials">Partials</h3>
|
|
<p>The above example uses <code>layouts/mydesign/views/article.html</code> but you have some others</p>
|
|
<ul>
|
|
<li><code>layouts/mydesign/baseof.html</code>: Completely redefine the whole HTML structure, none of the other listed partials will be used</li>
|
|
<li><code>layouts/mydesign/views/menu.html</code>: Defines the sidebar menu layout</li>
|
|
<li><code>layouts/mydesign/views/body.html</code>: Determines what to contain in the content area (for example a single page, a list of pages, a tree of sub pages)</li>
|
|
<li><code>layouts/mydesign/views/article.html</code>: Controls how one page’s content and title are displayed</li>
|
|
</ul>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/explanation/index.html">Explanation</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/howto/index.html">Howto</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="output-formats">Output Formats</h1>
|
|
|
|
<p>In addition to the <a href="/hugo-theme-relearn/configuration/sitemanagement/outputformats/index.html">output formats coming with the theme</a>, you can create your own <a href="https://gohugo.io/templates/output-formats/" rel="external" target="_self">output formats</a>.</p>
|
|
<h2 id="starting-from-scratch">Starting from Scratch</h2>
|
|
<p>If you want to add a new output format called <code>myformat</code> that outputs HTML and you want to build everything yourself without using the theme’s components:</p>
|
|
<ol>
|
|
<li>Create a file <code>layouts/_default/baseof.myformat.html</code></li>
|
|
<li>Implement all the necessary code in this file</li>
|
|
</ol>
|
|
<h2 id="using-the-themes-structure">Using the Theme’s Structure</h2>
|
|
<p>If you want to keep the general framework and only change specific parts, you can override these files:</p>
|
|
<ul>
|
|
<li><code>layouts/_default/views/article.html</code>: Controls how a page’s content and title are displayed</li>
|
|
<li><code>layouts/_default/views/body.html</code>: Determines the page body structure</li>
|
|
<li><code>layouts/_default/views/menu.html</code>: Defines the sidebar menu layout</li>
|
|
<li><code>layouts/_default/views/storeOutputFormat.html</code>: Stores the output format name for use in the framework</li>
|
|
</ul>
|
|
<p>For a real-world example, check out the <code>print</code> output format implementations</p>
|
|
<ul>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/views/body.print.html" rel="external" target="_self"><code>layouts/_default/views/body.print.html</code></a></li>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/views/menu.print.html" rel="external" target="_self"><code>layouts/_default/views/menu.print.html</code></a></li>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/views/storeOutputFormat.print.html" rel="external" target="_self"><code>layouts/_default/views/storeOutputFormat.print.html</code></a></li>
|
|
</ul>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/explanation/index.html">Explanation</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/howto/index.html">Howto</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
<div class="R-taxonomy taxonomy-tags cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/tags/taxonomy/index.html">Taxonomy</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<h1 id="taxonomies">Taxonomies</h1>
|
|
|
|
<p>This page explains how to show custom taxonomies on your pages.</p>
|
|
<p>For more details, check the official docs on <a href="https://gohugo.io/content-management/taxonomies/#configure-taxonomies" rel="external" target="_self">setting up custom taxonomies</a> and <a href="https://gohugo.io/content-management/taxonomies/#assign-terms-to-content" rel="external" target="_self">using them in your content</a>.</p>
|
|
<h2 id="default-behavior">Default Behavior</h2>
|
|
<p>The Relearn theme automatically shows Hugo’s <a href="https://gohugo.io/content-management/taxonomies/#default-taxonomies" rel="external" target="_self">default taxonomies</a> <em>tags</em> and <em>categories</em> out of the box.</p>
|
|
<ul>
|
|
<li>Tags appear at the top of the page in alphabetical order in form of baggage tags.</li>
|
|
<li>Categories appear at the bottom of the page in alphabetical order as a list prefixed with an icon.</li>
|
|
</ul>
|
|
<p>Each item links to a page showing all articles with that term.</p>
|
|
<h2 id="setting-up-custom-taxonomies">Setting Up Custom Taxonomies</h2>
|
|
<p>To add custom taxonomies, update your <code>hugo.toml</code> file. You also have to add the default taxonomies if you want to use them.</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><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">taxonomies</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">category</span> <span class="p">=</span> <span class="s1">'categories'</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">mycustomtag</span> <span class="p">=</span> <span class="s1">'mycustomtags'</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">tag</span> <span class="p">=</span> <span class="s1">'tags'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">taxonomies</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">category</span><span class="p">:</span><span class="w"> </span><span class="l">categories</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">mycustomtag</span><span class="p">:</span><span class="w"> </span><span class="l">mycustomtags</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">tag</span><span class="p">:</span><span class="w"> </span><span class="l">tags</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"taxonomies"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"category"</span><span class="p">:</span> <span class="s2">"categories"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"mycustomtag"</span><span class="p">:</span> <span class="s2">"mycustomtags"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"tag"</span><span class="p">:</span> <span class="s2">"tags"</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></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 id="showing-custom-taxonomies">Showing Custom Taxonomies</h2>
|
|
<p>To display your custom taxonomy terms, add this to your page (usually in <code>layouts/partials/content-footer.html</code>):</p>
|
|
<div class="highlight wrap-code"><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">partial</span> <span class="s">"term-list.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"taxonomy"</span> <span class="s">"mycustomtags"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"icon"</span> <span class="s">"layer-group"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">)</span> <span class="p">}}</span></span></span></code></pre></div>
|
|
<h3 id="parameter">Parameter</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>taxonomy</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>The plural name of the taxonomy to display as used in your front matter.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>class</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Additional CSS classes set on the outermost generated HTML element.<br><br>If set to <code>tags</code> you will get the visuals for displaying the <em>tags</em> taxonomy, otherwise it will be a simple list of links as for the <em>categories</em> taxonomy.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>style</strong></td>
|
|
<td><code>primary</code></td>
|
|
<td>The style scheme used if <strong>class</strong> is <code>tags</code>.<br><br>- by severity: <code>caution</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>color</strong></td>
|
|
<td>see notes</td>
|
|
<td>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> to be used if <strong>class</strong> is <code>tags</code>. If not set, the chosen color depends on the <strong>style</strong>. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>icon</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>An optional <a href="/hugo-theme-relearn/shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a> set to the left of the list.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories 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="/hugo-theme-relearn/categories/explanation/index.html">Explanation</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/howto/index.html">Howto</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/categories/reference/index.html">Reference</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="/hugo-theme-relearn/js/clipboard.min.js?1729838017" defer></script>
|
|
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1729838017" defer></script>
|
|
<script src="/hugo-theme-relearn/js/theme.js?1729838017" defer></script>
|
|
</body>
|
|
</html>
|