hugo-theme-relearn/shortcodes/notice/index.html
2025-01-03 11:44:29 +00:00

1153 lines
113 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Article" data-r-output-format="html">
<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.140.2">
<meta name="generator" content="Relearn 7.3.1">
<meta name="description" content="Disclaimers to help you structure your page">
<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="Notice :: Hugo Relearn Theme">
<meta name="twitter:description" content="Disclaimers to help you structure your page">
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html">
<meta property="og:site_name" content="Hugo Relearn Theme">
<meta property="og:title" content="Notice :: Hugo Relearn Theme">
<meta property="og:description" content="Disclaimers to help you structure your page">
<meta property="og:locale" content="en">
<meta property="og:type" content="article">
<meta property="article:section" content="Shortcodes">
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="name" content="Notice :: Hugo Relearn Theme">
<meta itemprop="description" content="Disclaimers to help you structure your page">
<meta itemprop="wordCount" content="1552">
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="keywords" content="Howto,Reference,BoxStyle">
<title>Notice :: Hugo Relearn Theme</title>
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="alternate" hreflang="x-default">
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="alternate" hreflang="en">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="art-x-pir">
<link href="/hugo-theme-relearn/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Hugo Relearn Theme">
<link href="/hugo-theme-relearn/shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Hugo Relearn Theme">
<link href="/hugo-theme-relearn/images/logo.svg?1735904654" rel="icon" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1735904654" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1735904654" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/auto-complete.css?1735904654" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1735904654" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1735904654" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme.min.css?1735904654" rel="stylesheet">
<link href="/hugo-theme-relearn/css/format-html.min.css?1735904654" rel="stylesheet" id="R-format-style">
<script>
window.relearn = window.relearn || {};
window.relearn.relBasePath='..\/..';
window.relearn.relBaseUri='..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
window.relearn.min = `.min`;
window.relearn.disableAnchorCopy=false;
window.relearn.disableAnchorScrolling=false;
// variant stuff
window.relearn.themevariants = [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ];
window.relearn.customvariantname = "my-custom-variant";
window.relearn.changeVariant = function(variant) {
var oldVariant = document.documentElement.dataset.rThemeVariant;
window.localStorage.setItem(window.relearn.absBaseUri + "/variant", variant);
document.documentElement.dataset.rThemeVariant = variant;
if (oldVariant != variant) {
document.dispatchEvent( new CustomEvent('themeVariantLoaded', { detail: { variant, oldVariant } }) );
}
}
window.relearn.markVariant = function() {
var variant = window.localStorage.getItem(window.relearn.absBaseUri + "/variant");
var select = document.querySelector("#R-select-variant");
if (select) {
select.value = variant;
}
}
window.relearn.initVariant = function() {
var variant = window.localStorage.getItem(window.relearn.absBaseUri + "/variant") ?? "";
if( variant == window.relearn.customvariantname ){
}else if( !variant || !window.relearn.themevariants.includes(variant) ){
variant = window.relearn.themevariants[0];
window.localStorage.setItem(window.relearn.absBaseUri + "/variant", variant);
}
document.documentElement.dataset.rThemeVariant = variant;
}
window.relearn.initVariant();
window.relearn.markVariant();
// 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>
<script src="/hugo-theme-relearn/js/variant.js?1735904654"></script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support html disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/shortcodes/notice/index.html">
<div id="R-body" class="default-animation">
<div id="R-body-overlay"></div>
<nav id="R-topbar">
<div class="topbar-wrapper">
<div class="topbar-sidebar-divider"></div>
<div class="topbar-area topbar-area-start" data-area="start">
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)"><i class="fa-fw fas fa-bars"></i></button>
</div>
<div 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&#43;ALT&#43;t)"><i class="fa-fw fas fa-list-alt"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<nav class="TableOfContents">
<ul>
<li><a href="#usage">Usage</a>
<ul>
<li><a href="#parameter">Parameter</a></li>
</ul>
</li>
<li><a href="#settings">Settings</a>
<ul>
<li><a href="#defining-own-styles">Defining own Styles</a></li>
</ul>
</li>
<li><a href="#examples">Examples</a>
<ul>
<li><a href="#by-severity-using-callout-syntax">By Severity Using Callout Syntax</a></li>
<li><a href="#by-brand-colors-with-title-and-icon-variantion">By Brand Colors with Title and Icon Variantion</a></li>
<li><a href="#by-color">By Color</a></li>
<li><a href="#by-special-color">By Special Color</a></li>
<li><a href="#various-features">Various Features</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/shortcodes/index.html"><span itemprop="name">Shortcodes</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Notice</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/shortcodes/notice.en.md" target="_self" title="Edit (CTRL&#43;ALT&#43;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/shortcodes/notice/index.print.html" title="Print whole chapter (CTRL&#43;ALT&#43;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/shortcodes/mermaid/index.html" title="Mermaid (🡐)"><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/shortcodes/openapi/index.html" title="OpenAPI (🡒)"><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 shortcodes" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="notice">Notice</h1>
<p>The <code>notice</code> shortcode shows various types of disclaimers with adjustable color, title and icon to help you structure your page.</p>
<details open class=" box cstyle notices primary">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-skull-crossbones"></i>
There may be pirates
</summary>
<div class="box-content">
<p>It is all about the boxes.</p>
</div>
</details>
<h2 id="usage">Usage</h2>
<div class="tab-panel" data-tab-group="shortcode-parameter">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="callout"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('shortcode-parameter','callout')"
>
<span class="tab-nav-text">callout</span>
</button>
<button
data-tab-item="shortcode"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','shortcode')"
>
<span class="tab-nav-text">shortcode</span>
</button>
<button
data-tab-item="shortcode-positional"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','shortcode-positional')"
>
<span class="tab-nav-text">shortcode (positional)</span>
</button>
<button
data-tab-item="partial"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','partial')"
>
<span class="tab-nav-text">partial</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="callout"
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-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!primary] There may be pirates
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; It is all about the boxes.</span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="shortcode"
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-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;There may be pirates&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">is</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">the</span> <span class="nx">boxes</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="shortcode-positional"
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-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">primary</span> <span class="s">&#34;There may be pirates&#34;</span> <span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">is</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">the</span> <span class="nx">boxes</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="partial"
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-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">&#34;shortcodes/notice.html&#34;</span> <span class="p">(</span><span class="nx">dict</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;page&#34;</span> <span class="p">.</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;style&#34;</span> <span class="s">&#34;primary&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;title&#34;</span> <span class="s">&#34;There may be pirates&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;icon&#34;</span> <span class="s">&#34;skull-crossbones&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;content&#34;</span> <span class="s">&#34;It is all about the boxes.&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<p>Callout syntax has limited features as it does not provide all of the below parameter. Nevertheless, it is widely available in other Markdown parsers like <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts" rel="external" target="_self">GitHub</a> or <a href="https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title" rel="external" target="_self">Obsidian</a> and therefore is the recommend syntax for generating portable Markdown.</p>
<p>If you want to display a transparent expandable box without any border, you can also use the <a href="/hugo-theme-relearn/shortcodes/expand/index.html"><code>expand</code> shortcode</a>.</p>
<h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>groupid</strong></td>
<td></td>
<td><em>&lt;empty&gt;</em></td>
<td>Arbitrary name of the group the box belongs to.<br><br>Expandable boxes with the same <strong>groupid</strong> sychronize their open state.</td>
</tr>
<tr>
<td><strong>style</strong></td>
<td>1</td>
<td><code>default</code></td>
<td>The style scheme used for the box.<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><br><br>You can also <a href="/hugo-theme-relearn/shortcodes/notice/index.html#defining-own-styles">define your own styles</a>.</td>
</tr>
<tr>
<td><strong>color</strong></td>
<td></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 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<br><br>This is not available using callout syntax.</td>
</tr>
<tr>
<td><strong>title</strong></td>
<td>2</td>
<td>see notes</td>
<td>Arbitrary text for the box title. Depending on the <strong>style</strong> there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: <em>&lt;empty&gt;</em><br><br>If you want no title for a severity style, you have to set this parameter to <code>&quot; &quot;</code> (a non empty string filled with spaces)</td>
</tr>
<tr>
<td><strong>icon</strong></td>
<td>3</td>
<td>see notes</td>
<td><a href="/hugo-theme-relearn/shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a> set to the left of the title. Depending on the <strong>style</strong> there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: <em>&lt;empty&gt;</em><br><br>If you want no icon for a severity style, you have to set this parameter to <code>&quot; &quot;</code> (a non empty string filled with spaces)<br><br>This is not available using callout syntax.</td>
</tr>
<tr>
<td><strong>expanded</strong></td>
<td></td>
<td><em>&lt;empty&gt;</em></td>
<td>Whether to draw an expander and how the content is displayed.<br><br>- <em>&lt;empty&gt;</em>: no expander is drawn and the content is permanently shown<br>- <code>true</code>: the expander is drawn and the content is initially shown<br>- <code>false</code>: the expander is drawn and the content is initially hidden</td>
</tr>
<tr>
<td><em><strong>&lt;content&gt;</strong></em></td>
<td></td>
<td><em>&lt;empty&gt;</em></td>
<td>Arbitrary text to be displayed in box.</td>
</tr>
</tbody>
</table>
<h2 id="settings">Settings</h2>
<h3 id="defining-own-styles">Defining own Styles</h3>
<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> Besides the predefined <code>style</code> values <a href="/hugo-theme-relearn/shortcodes/notice/index.html#parameter">from above</a>, you are able to define your own.</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">boxStyle</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">color</span> <span class="p">=</span> <span class="s1">&#39;gold&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">i18n</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">icon</span> <span class="p">=</span> <span class="s1">&#39;rainbow&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;magic&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Magic&#39;</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">boxStyle</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">color</span><span class="p">:</span><span class="w"> </span><span class="l">gold</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">i18n</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">icon</span><span class="p">:</span><span class="w"> </span><span class="l">rainbow</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">magic</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Magic</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">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;boxStyle&#34;</span><span class="p">:</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">&#34;color&#34;</span><span class="p">:</span> <span class="s2">&#34;gold&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;i18n&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;icon&#34;</span><span class="p">:</span> <span class="s2">&#34;rainbow&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;magic&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Magic&#34;</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>
<p>The <code>style</code> parameter used in a shortcode must match the <code>identifier</code> in the configuration. The title for the style will be determined from the configured <code>title</code>. If no <code>title</code> but a <code>i18n</code> is set, the title will be taken from the translation files by that key. The <code>title</code> may be empty in which case, the box does not contain a default title. <code>icon</code> and <code>color</code> are working similar.</p>
<p>You can also redefine the predefined styles if you&rsquo;re not satisfied with the default values.</p>
<p>Below is a <a href="/hugo-theme-relearn/shortcodes/notice/index.html#user-defined-style">usage example</a>.</p>
<h2 id="examples">Examples</h2>
<h3 id="by-severity-using-callout-syntax">By Severity Using Callout Syntax</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!CAUTION]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Advises about risks or negative outcomes of certain actions.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!IMPORTANT]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Key information users need to know to achieve their goal.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!INFO]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Information that users &lt;ins&gt;_might_&lt;/ins&gt; find interesting.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!NOTE]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Useful information that users should know, even when skimming content.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!TIP]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Helpful advice for doing things better or more easily.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!WARNING]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; Urgent info that needs immediate user attention to avoid problems.</span></span></code></pre></div>
<details open class=" box cstyle notices caution">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-hand"></i>
Caution
</summary>
<div class="box-content">
<p>Advises about risks or negative outcomes of certain actions.</p>
</div>
</details>
<details open class=" box cstyle notices important">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-bolt"></i>
Important
</summary>
<div class="box-content">
<p>Key information users need to know to achieve their goal.</p>
</div>
</details>
<details open class=" box cstyle notices info">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-info-circle"></i>
Info
</summary>
<div class="box-content">
<p>Information that users <ins><em>might</em></ins> find interesting.</p>
</div>
</details>
<details open class=" box cstyle notices note">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-exclamation-circle"></i>
Note
</summary>
<div class="box-content">
<p>Useful information that users should know, even when skimming content.</p>
</div>
</details>
<details open class=" box cstyle notices tip">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-lightbulb"></i>
Tip
</summary>
<div class="box-content">
<p>Helpful advice for doing things better or more easily.</p>
</div>
</details>
<details open class=" box cstyle notices warning">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-exclamation-triangle"></i>
Warning
</summary>
<div class="box-content">
<p>Urgent info that needs immediate user attention to avoid problems.</p>
</div>
</details>
<h3 id="by-brand-colors-with-title-and-icon-variantion">By Brand Colors with Title and Icon Variantion</h3>
<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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Primary&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">primary</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;secondary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Secondary&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">secondary</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;stopwatch&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">An</span> <span class="o">**</span><span class="nx">accent</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<details open class=" box cstyle notices primary">
<summary class="box-label" tabindex="-1">
Primary
</summary>
<div class="box-content">
<p>A <strong>primary</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices secondary">
<summary class="box-label" tabindex="-1">
Secondary
</summary>
<div class="box-content">
<p>A <strong>secondary</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices accent">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-stopwatch"></i>
<span class="a11y-only">Details</span>
</summary>
<div class="box-content">
<p>An <strong>accent</strong> disclaimer</p>
</div>
</details>
<h3 id="by-color">By Color</h3>
<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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;blue&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Blue&#34;</span><span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">blue</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;cyan&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Cyan&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">cyan</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Green&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">green</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;grey&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bug&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">grey</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;magenta&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Magenta&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">magenta</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;orange&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Orange&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bug&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">orange</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Red&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">red</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<details open class=" box cstyle notices blue">
<summary class="box-label" tabindex="-1">
Blue
</summary>
<div class="box-content">
<p>A <strong>blue</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices cyan">
<summary class="box-label" tabindex="-1">
Cyan
</summary>
<div class="box-content">
<p>A <strong>cyan</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices green">
<summary class="box-label" tabindex="-1">
Green
</summary>
<div class="box-content">
<p>A <strong>green</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices grey">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-bug"></i>
<span class="a11y-only">Details</span>
</summary>
<div class="box-content">
<p>A <strong>grey</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices magenta">
<summary class="box-label" tabindex="-1">
Magenta
</summary>
<div class="box-content">
<p>A <strong>magenta</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices orange">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-bug"></i>
Orange
</summary>
<div class="box-content">
<p>A <strong>orange</strong> disclaimer</p>
</div>
</details>
<details open class=" box cstyle notices red">
<summary class="box-label" tabindex="-1">
Red
</summary>
<div class="box-content">
<p>A <strong>red</strong> disclaimer</p>
</div>
</details>
<h3 id="by-special-color">By Special Color</h3>
<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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;default&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Default&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">some</span> <span class="nx">grey</span> <span class="k">default</span> <span class="nx">color</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;code&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Code&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Colored</span> <span class="nx">like</span> <span class="nx">a</span> <span class="nx">code</span> <span class="nx">fence</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;transparent&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Transparent&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">visible</span> <span class="nx">borders</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<details open class=" box cstyle notices default">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-skull-crossbones"></i>
Default
</summary>
<div class="box-content">
<p>Just some grey default color.</p>
</div>
</details>
<details open class=" box cstyle notices code">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-skull-crossbones"></i>
Code
</summary>
<div class="box-content">
<p>Colored like a code fence.</p>
</div>
</details>
<details open class=" box cstyle notices transparent">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-skull-crossbones"></i>
Transparent
</summary>
<div class="box-content">
<p>No visible borders.</p>
</div>
</details>
<h3 id="various-features">Various Features</h3>
<h4 id="with-user-defined-color-font-awesome-brand-icon-and-markdown-in-title-and-content">With User-Defined Color, Font Awesome Brand Icon and Markdown in Title and Content</h4>
<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">notice</span> <span class="nx">color</span><span class="p">=</span><span class="s">&#34;fuchsia&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;**Hugo** is _awesome_&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;fa-fw fab fa-hackerrank&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">You</span> <span class="nx">can</span> <span class="nx">add</span> <span class="nx">standard</span> <span class="nx">markdown</span> <span class="nx">syntax</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">and</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">etc</span><span class="p">.[^</span><span class="nx">etc</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[^</span><span class="nx">etc</span><span class="p">]:</span> <span class="nx">Et</span> <span class="nf">Cetera</span> <span class="p">(</span><span class="nx">English</span><span class="p">:</span> <span class="o">/</span><span class="nx">ɛtˈsɛtərə</span><span class="o">/</span><span class="p">),</span> <span class="nx">abbreviated</span> <span class="nx">to</span> <span class="nx">etc</span><span class="p">.,</span> <span class="nx">etc</span><span class="p">,</span> <span class="nx">et</span> <span class="nx">cet</span><span class="p">.,</span> <span class="nx">is</span> <span class="nx">a</span> <span class="nx">Latin</span> <span class="nx">expression</span> <span class="nx">that</span> <span class="nx">is</span> <span class="nx">used</span> <span class="nx">in</span> <span class="nx">English</span> <span class="nx">to</span> <span class="nx">mean</span> <span class="s">&#34;and other similar things&#34;</span><span class="p">,</span> <span class="nx">or</span> <span class="s">&#34;and so forth&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<details open class=" box cstyle notices default" style=";--VARIABLE-BOX-color: fuchsia">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fab fa-hackerrank"></i>
<strong>Hugo</strong> is <em>awesome</em>
</summary>
<div class="box-content">
<p>You can add standard markdown syntax:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li>
<li><a href="https://example.com" rel="external" target="_self">links</a></li>
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
</ul>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div>
<blockquote>
<p>the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)</p>
</blockquote>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean &ldquo;and other similar things&rdquo;, or &ldquo;and so forth&rdquo;&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
</div>
</details>
<h4 id="expandable-content-area-with-groupid">Expandable Content Area with <code>groupid</code></h4>
<p>If you give multiple expandable boxes the same <code>groupid</code>, at most one will be open at any given time. If you open one of the boxes, all other boxes of the same group will close.</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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">&#34;notice-toggle&#34;</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">&#34;notice-toggle&#34;</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">&#34;false&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Thank</span> <span class="nx">you</span><span class="p">!</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<details open class=" box cstyle notices green expand" name="notice-toggle">
<summary class="box-label">
<i class="expander-icon fa-fw fas fa-chevron-right"></i>
Expand me&hellip;
</summary>
<div class="box-content">
<p>No need to press you!</p>
</div>
</details>
<details class=" box cstyle notices red expand" name="notice-toggle">
<summary class="box-label">
<i class="expander-icon fa-fw fas fa-chevron-right"></i>
Expand me&hellip;
</summary>
<div class="box-content">
<p>Thank you!</p>
</div>
</details>
<h4 id="no-content-or-no-title">No Content or No Title</h4>
<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">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Just a bar&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">a</span> <span class="nx">box</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<details open class=" box cstyle notices accent">
<summary class="box-label" tabindex="-1">
Just a bar
</summary>
</details>
<details open class=" box cstyle notices accent">
<summary class="box-label a11y-only" tabindex="-1">
<span class="a11y-only">Details</span>
</summary>
<div class="box-content">
<p>Just a box</p>
</div>
</details>
<h4 id="various-callouts">Various Callouts</h4>
<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">&gt;</span> <span class="p">[!</span><span class="nx">caution</span><span class="p">]</span> <span class="nx">Callouts</span> <span class="nx">can</span> <span class="nx">have</span> <span class="nx">custom</span> <span class="nx">titles</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Like</span> <span class="nx">this</span> <span class="nx">one</span><span class="p">.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">caution</span><span class="p">]</span> <span class="nx">Title</span><span class="o">-</span><span class="nx">only</span> <span class="nx">callout</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">-</span> <span class="nx">Are</span> <span class="nx">callouts</span> <span class="nx">foldable</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">foldable</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">the</span> <span class="nx">contents</span> <span class="nx">are</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">the</span> <span class="nx">callout</span> <span class="nx">is</span> <span class="nx">collapsed</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">+</span> <span class="nx">Are</span> <span class="nx">callouts</span> <span class="nx">foldable</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">foldable</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">the</span> <span class="nx">contents</span> <span class="nx">are</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">the</span> <span class="nx">callout</span> <span class="nx">is</span> <span class="nx">collapsed</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">info</span><span class="p">]</span> <span class="nx">Can</span> <span class="nx">callouts</span> <span class="nx">be</span> <span class="nx">nested</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">[!</span><span class="nx">important</span><span class="p">]</span> <span class="nx">Yes</span><span class="p">!,</span> <span class="nx">they</span> <span class="nx">can</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">[!</span><span class="nx">tip</span><span class="p">]</span> <span class="nx">You</span> <span class="nx">can</span> <span class="nx">even</span> <span class="nx">use</span> <span class="nx">multiple</span> <span class="nx">layers</span> <span class="nx">of</span> <span class="nx">nesting</span><span class="p">.</span></span></span></code></pre></div>
<details open class=" box cstyle notices caution">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-hand"></i>
Callouts can have custom titles
</summary>
<div class="box-content">
<p>Like this one.</p>
</div>
</details>
<details open class=" box cstyle notices caution">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-hand"></i>
Title-only callout
</summary>
</details>
<details class=" box cstyle notices note expand">
<summary class="box-label">
<i class="expander-icon fa-fw fas fa-chevron-right"></i>
<i class="fa-fw fas fa-exclamation-circle"></i>
Are callouts foldable?
</summary>
<div class="box-content">
<p>Yes! In a foldable callout, the contents are hidden when the callout is collapsed</p>
</div>
</details>
<details open class=" box cstyle notices note expand">
<summary class="box-label">
<i class="expander-icon fa-fw fas fa-chevron-right"></i>
<i class="fa-fw fas fa-exclamation-circle"></i>
Are callouts foldable?
</summary>
<div class="box-content">
<p>Yes! In a foldable callout, the contents are hidden when the callout is collapsed</p>
</div>
</details>
<details open class=" box cstyle notices info">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-info-circle"></i>
Can callouts be nested?
</summary>
<div class="box-content">
<details open class=" box cstyle notices important">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-bolt"></i>
Yes!, they can.
</summary>
<div class="box-content">
<details open class=" box cstyle notices tip">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-lightbulb"></i>
You can even use multiple layers of nesting.
</summary>
</details>
</div>
</details>
</div>
</details>
<h4 id="code-with-collapsed-colored-borders">Code with Collapsed Colored Borders</h4>
<div class="highlight wrap-code"><pre tabindex="0"><code>&gt; [!secondary]
&gt; ```c
&gt; // With colored border in Markdown syntax
&gt; printf(&#34;Hello World!&#34;);
&gt; ```
{{% notice style=&#34;red&#34; %}}
```c
// With colored border in Shortcode syntax
printf(&#34;Hello World!&#34;);
```
{{% /notice %}}</code></pre></div>
<details open class=" box cstyle notices secondary">
<summary class="box-label a11y-only" tabindex="-1">
<span class="a11y-only">Details</span>
</summary>
<div class="box-content">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// With colored border in Markdown syntax
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div>
</div>
</details>
<details open class=" box cstyle notices red">
<summary class="box-label a11y-only" tabindex="-1">
<span class="a11y-only">Details</span>
</summary>
<div class="box-content">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// With colored border in Shortcode syntax
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div>
</div>
</details>
<h4 id="user-defined-style">User-defined Style</h4>
<p>Self-defined styles can be <a href="/hugo-theme-relearn/shortcodes/notice/index.html#defining-own-styles">configured</a> in your <code>hugo.toml</code> and used for every shortcode, that accepts a <code>style</code> parameter.</p>
<div class="highlight wrap-code"><pre tabindex="0"><code>&gt; [!magic]
&gt; Maaagic!</code></pre></div>
<details open class=" box cstyle notices magic">
<summary class="box-label" tabindex="-1">
<i class="fa-fw fas fa-rainbow"></i>
Magic
</summary>
<div class="box-content">
<p>Maaagic!</p>
</div>
</details>
<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/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>
</div>
</main>
</div>
<aside id="R-sidebar" class="default-animation showVisitedLinks">
<div id="R-header-topbar" class="default-animation"></div>
<div id="R-header-wrapper" class="default-animation">
<div id="R-header" class="default-animation">
<style>
a#R-logo {
font-size: 1.875rem;
margin-top: -.8125rem;
max-width: 60%;
width: 14.125rem;
}
@media only all and (max-width: 59.999rem) {
a#R-logo {
font-size: 1.5625rem;
margin-top: -.1875rem;
}
}
#R-logo svg,
#R-logo svg * {
opacity: .945;
}
#R-logo svg {
margin-bottom: -1.25rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
width: 40.5%;
}
@media only all and (max-width: 59.999rem) {
#R-logo svg {
margin-bottom: -.75rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
}
}
</style>
<a id="R-logo" href="/hugo-theme-relearn/index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044">
<path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#282828;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/>
<path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
</svg>Relearn
</a>
</div>
<script>
window.index_js_url="/hugo-theme-relearn/searchindex.en.js?1735904654";
</script>
<search><form action="/hugo-theme-relearn/search/index.html" method="get">
<div class="searchbox default-animation">
<button class="search-detail" type="submit" title="Search (CTRL+ALT+f)"><i class="fas fa-search"></i></button>
<label class="a11y-only" for="R-search-by">Search</label>
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="Search...">
<button class="search-clear" type="button" data-search-clear="" title="Clear search"><i class="fas fa-times" title="Clear search"></i></button>
</div>
</form></search>
<script>
var contentLangs=['en'];
</script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1735904654" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.min.js?1735904654" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.stemmer.support.min.js?1735904654" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.multi.min.js?1735904654" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.en.min.js?1735904654" defer></script>
<script src="/hugo-theme-relearn/js/search.js?1735904654" defer></script>
</div>
<div id="R-homelinks" class="default-animation">
<hr class="padding">
</div>
<div id="R-content-wrapper" class="highlightable">
<div id="R-shortcutmenu-home" class="R-sidebarmenu">
<ul class="enlarge morespace collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/introduction/index.html"><input type="checkbox" id="R-section-e1ed3a04f1f57a27be4a8d0eb274be18" aria-controls="R-subsections-e1ed3a04f1f57a27be4a8d0eb274be18"><label for="R-section-e1ed3a04f1f57a27be4a8d0eb274be18"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Introduction</span></label><a class="padding" href="/hugo-theme-relearn/introduction/index.html"><i class='fa-fw fas fa-star'></i> Introduction<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-e1ed3a04f1f57a27be4a8d0eb274be18" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/introduction/quickstart/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/quickstart/index.html">Getting Started<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/upgrade/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/upgrade/index.html">Upgrade<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/tools/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/tools/index.html">Tool Integration<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/releasenotes/index.html"><input type="checkbox" id="R-section-f5041d5a50403ef230e5b3d632ef5b5e" aria-controls="R-subsections-f5041d5a50403ef230e5b3d632ef5b5e"><label for="R-section-f5041d5a50403ef230e5b3d632ef5b5e"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu What&#39;s New</span></label><a class="padding" href="/hugo-theme-relearn/introduction/releasenotes/index.html">What&#39;s New<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-f5041d5a50403ef230e5b3d632ef5b5e" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/introduction/releasenotes/5/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/releasenotes/5/index.html">Version 5<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/releasenotes/4/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/releasenotes/4/index.html">Version 4<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/releasenotes/3/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/releasenotes/3/index.html">Version 3<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/releasenotes/2/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/releasenotes/2/index.html">Version 2<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/releasenotes/1/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/releasenotes/1/index.html">Version 1<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/changelog/index.html"><input type="checkbox" id="R-section-4c8f9a0e787a57f2acea75c8c8f09920" aria-controls="R-subsections-4c8f9a0e787a57f2acea75c8c8f09920"><label for="R-section-4c8f9a0e787a57f2acea75c8c8f09920"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Changelog</span></label><a class="padding" href="/hugo-theme-relearn/introduction/changelog/index.html">Changelog<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-4c8f9a0e787a57f2acea75c8c8f09920" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/introduction/changelog/5/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/changelog/5/index.html">Version 5<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/changelog/4/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/changelog/4/index.html">Version 4<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/changelog/3/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/changelog/3/index.html">Version 3<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/changelog/2/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/changelog/2/index.html">Version 2<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/introduction/changelog/1/index.html"><a class="padding" href="/hugo-theme-relearn/introduction/changelog/1/index.html">Version 1<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/index.html"><input type="checkbox" id="R-section-6f6dce359ca8d596b5b1de1969a0aca2" aria-controls="R-subsections-6f6dce359ca8d596b5b1de1969a0aca2"><label for="R-section-6f6dce359ca8d596b5b1de1969a0aca2"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Configuration</span></label><a class="padding" href="/hugo-theme-relearn/configuration/index.html"><i class='fa-fw fas fa-gears'></i> Configuration<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-6f6dce359ca8d596b5b1de1969a0aca2" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sitemanagement/index.html"><input type="checkbox" id="R-section-30019b7214c19b7e47568868fc6b6f47" aria-controls="R-subsections-30019b7214c19b7e47568868fc6b6f47"><label for="R-section-30019b7214c19b7e47568868fc6b6f47"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Site Management</span></label><a class="padding" href="/hugo-theme-relearn/configuration/sitemanagement/index.html">Site Management<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-30019b7214c19b7e47568868fc6b6f47" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sitemanagement/structure/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sitemanagement/structure/index.html">Directory Structure<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sitemanagement/multilingual/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sitemanagement/multilingual/index.html">Multilingual<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sitemanagement/meta/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sitemanagement/meta/index.html">Meta Information<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sitemanagement/deployment/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sitemanagement/deployment/index.html">Deployment Scenarios<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sitemanagement/outputformats/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sitemanagement/outputformats/index.html">Available Output Formats<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sitemanagement/stableoutput/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sitemanagement/stableoutput/index.html">Stable Output<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/branding/index.html"><input type="checkbox" id="R-section-f4b18c0bbd92c3635c0cb3ea3fa97f55" aria-controls="R-subsections-f4b18c0bbd92c3635c0cb3ea3fa97f55"><label for="R-section-f4b18c0bbd92c3635c0cb3ea3fa97f55"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Branding</span></label><a class="padding" href="/hugo-theme-relearn/configuration/branding/index.html">Branding<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-f4b18c0bbd92c3635c0cb3ea3fa97f55" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/configuration/branding/logo/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/branding/logo/index.html">Logo<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/branding/colors/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/branding/colors/index.html">Colors<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/branding/modules/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/branding/modules/index.html">Module Theming<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/branding/generator/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/branding/generator/index.html">Stylesheet Generator<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sidebar/index.html"><input type="checkbox" id="R-section-8a12d8e45be5abcac33050ee02bdb0dc" aria-controls="R-subsections-8a12d8e45be5abcac33050ee02bdb0dc"><label for="R-section-8a12d8e45be5abcac33050ee02bdb0dc"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Sidebar</span></label><a class="padding" href="/hugo-theme-relearn/configuration/sidebar/index.html">Sidebar<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-8a12d8e45be5abcac33050ee02bdb0dc" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sidebar/width/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sidebar/width/index.html">Width<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sidebar/headerfooter/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sidebar/headerfooter/index.html">Header &amp; Footer<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sidebar/search/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sidebar/search/index.html">Search<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/sidebar/menus/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sidebar/menus/index.html">Menus<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/content/index.html"><input type="checkbox" id="R-section-2a87e0c002948b04af017faf43e5f0cd" aria-controls="R-subsections-2a87e0c002948b04af017faf43e5f0cd"><label for="R-section-2a87e0c002948b04af017faf43e5f0cd"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Content</span></label><a class="padding" href="/hugo-theme-relearn/configuration/content/index.html">Content<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-2a87e0c002948b04af017faf43e5f0cd" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/configuration/content/width/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/content/width/index.html">Width<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/content/titles/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/content/titles/index.html">Titles &amp; Breadcrumbs<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/content/headings/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/content/headings/index.html">Headings<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/content/linking/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/content/linking/index.html">Linking<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/content/hidden/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/content/hidden/index.html">Hidden Pages<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/index.html"><input type="checkbox" id="R-section-19858c09ec2f1c50e3d9de05671968f7" aria-controls="R-subsections-19858c09ec2f1c50e3d9de05671968f7"><label for="R-section-19858c09ec2f1c50e3d9de05671968f7"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Customization</span></label><a class="padding" href="/hugo-theme-relearn/configuration/customization/index.html">Customization<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-19858c09ec2f1c50e3d9de05671968f7" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/partials/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/customization/partials/index.html">Partials<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/extending/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/customization/extending/index.html">Extending Scripts<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/imageeffects/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/customization/imageeffects/index.html">Image Effects<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/topbar/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/customization/topbar/index.html">Topbar<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/designs/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/customization/designs/index.html">Page Designs<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/outputformats/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/customization/outputformats/index.html">Output Formats<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/customization/taxonomy/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/customization/taxonomy/index.html">Taxonomies<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/configuration/reference/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/reference/index.html">Options Reference<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/index.html"><input type="checkbox" id="R-section-8b31cad8bcabec610b76d42ea98e772d" aria-controls="R-subsections-8b31cad8bcabec610b76d42ea98e772d"><label for="R-section-8b31cad8bcabec610b76d42ea98e772d"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Authoring</span></label><a class="padding" href="/hugo-theme-relearn/authoring/index.html"><i class='fa-fw fab fa-markdown'></i> Authoring<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-8b31cad8bcabec610b76d42ea98e772d" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/authoring/structure/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/structure/index.html">Directory Structure<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/frontmatter/index.html"><input type="checkbox" id="R-section-825d31d37330c362736813c7d9e192f9" aria-controls="R-subsections-825d31d37330c362736813c7d9e192f9"><label for="R-section-825d31d37330c362736813c7d9e192f9"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Front Matter</span></label><a class="padding" href="/hugo-theme-relearn/authoring/frontmatter/index.html">Front Matter<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-825d31d37330c362736813c7d9e192f9" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/authoring/frontmatter/designs/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/frontmatter/designs/index.html">Page Designs<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="crosslink " data-nav-id="/hugo-theme-relearn/configuration/sidebar/menus/index.html"><a class="padding" href="/hugo-theme-relearn/configuration/sidebar/menus/index.html">Menus<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/frontmatter/linking/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/frontmatter/linking/index.html">Linking<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html">Topbar<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/frontmatter/reference/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/frontmatter/reference/index.html">Reference<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/meta/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/meta/index.html">Meta Information<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/markdown/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/markdown/index.html">Markdown Syntax<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/authoring/imageeffects/index.html"><a class="padding" href="/hugo-theme-relearn/authoring/imageeffects/index.html">Image Effects<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="parent " data-nav-id="/hugo-theme-relearn/shortcodes/index.html"><input type="checkbox" id="R-section-d1d72bec74e5a90c315283c9c8d23f10" aria-controls="R-subsections-d1d72bec74e5a90c315283c9c8d23f10" checked><label for="R-section-d1d72bec74e5a90c315283c9c8d23f10"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Shortcodes</span></label><a class="padding" href="/hugo-theme-relearn/shortcodes/index.html"><i class='fa-fw fas fa-shapes'></i> Shortcodes<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-d1d72bec74e5a90c315283c9c8d23f10" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/badge/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/badge/index.html">Badge<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/button/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/button/index.html">Button<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/index.html"><input type="checkbox" id="R-section-fe0c5ca44d2308c87cd4ce4b0f5b840c" aria-controls="R-subsections-fe0c5ca44d2308c87cd4ce4b0f5b840c"><label for="R-section-fe0c5ca44d2308c87cd4ce4b0f5b840c"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Children</span></label><a class="padding" href="/hugo-theme-relearn/shortcodes/children/index.html">Children<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-fe0c5ca44d2308c87cd4ce4b0f5b840c" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/test/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/children/test/index.html">page X<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/index.html"><input type="checkbox" id="R-section-3a684958d7eda0d20aafd9ea9a702f88" aria-controls="R-subsections-3a684958d7eda0d20aafd9ea9a702f88"><label for="R-section-3a684958d7eda0d20aafd9ea9a702f88"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu page 1</span></label><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-1/index.html">page 1<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-3a684958d7eda0d20aafd9ea9a702f88" class="collapsible-menu">
<li class="alwaysopen " data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.html"><input type="checkbox" id="R-section-2727dc6e08fcb96a079be91aa7704ea4" aria-controls="R-subsections-2727dc6e08fcb96a079be91aa7704ea4" checked><label for="R-section-2727dc6e08fcb96a079be91aa7704ea4"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu page 1-1</span></label><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.html">page 1-1<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-2727dc6e08fcb96a079be91aa7704ea4" class="collapsible-menu">
<li class="headless alwaysopen " data-nav-id=""><input type="checkbox" id="R-section-c58ec1ea7ddbdef134eb892a5c569711" aria-controls="R-subsections-c58ec1ea7ddbdef134eb892a5c569711" checked><label for="R-section-c58ec1ea7ddbdef134eb892a5c569711"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu page 1-1-2 (headless)</span></label><span class="padding">page 1-1-2 (headless)</span><ul id="R-subsections-c58ec1ea7ddbdef134eb892a5c569711" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">page 1-1-2-1<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">page 1-1-2-2<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">page 1-1-3<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/children-2/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-2/index.html">page 2<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/children-3/index.html"><input type="checkbox" id="R-section-f00fb288327406c804f8936fa36d260b" aria-controls="R-subsections-f00fb288327406c804f8936fa36d260b"><label for="R-section-f00fb288327406c804f8936fa36d260b"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu page 3</span></label><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-3/index.html">page 3<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-f00fb288327406c804f8936fa36d260b" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/children/children-3/test3/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/children/children-3/test3/index.html">page 3-1<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/expand/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/expand/index.html">Expand<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/highlight/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/highlight/index.html">Highlight<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/icon/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/icon/index.html">Icon<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/include/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/include/index.html">Include<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/math/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/math/index.html">Math<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/mermaid/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/mermaid/index.html">Mermaid<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="active " data-nav-id="/hugo-theme-relearn/shortcodes/notice/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/notice/index.html">Notice<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/openapi/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/openapi/index.html">OpenAPI<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/resources/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/resources/index.html">Resources<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/siteparam/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/siteparam/index.html">SiteParam<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/tab/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/tab/index.html">Tab<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/shortcodes/tabs/index.html"><a class="padding" href="/hugo-theme-relearn/shortcodes/tabs/index.html">Tabs<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
</ul>
</div>
<div id="R-shortcutmenu-shortcuts" class="R-sidebarmenu">
<div class="nav-title padding">More</div>
<ul class="space collapsible-menu">
<li class="" data-nav-id="https://github.com/McShelby/hugo-theme-relearn"><a class="padding" href="https://github.com/McShelby/hugo-theme-relearn" target="_self"><i class="fa-fw fab fa-github"></i> GitHub Repo<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/showcase/index.html"><a class="padding" href="/hugo-theme-relearn/showcase/index.html"><i class='fa-fw fas fa-camera'></i> Showcases<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/more/credits/index.html"><a class="padding" href="/hugo-theme-relearn/more/credits/index.html"><i class='fa-fw fas fa-bullhorn'></i> Credits<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/tags/index.html"><a class="padding" href="/hugo-theme-relearn/tags/index.html"><i class="fa-fw fas fa-tags"></i> Tags<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/categories/index.html"><a class="padding" href="/hugo-theme-relearn/categories/index.html"><i class="fa-fw fas fa-layer-group"></i> Categories<i class="fa-fw fas fa-check read-icon"></i></a></li>
</ul>
</div>
<div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter"></div>
<div id="R-menu-footer">
<hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter">
<div id="R-prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks showLangSwitch showVariantSwitch showVisitedLinks">
<ul>
<li id="R-select-language-container" class="footerLangSwitch showLangSwitch">
<div class="padding menu-control">
<i class="fa-fw fas fa-language"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-language">Language</label>
<select id="R-select-language" onchange="location = this.querySelector( this.value ).dataset.url;">
<option id="R-select-language-en" value="#R-select-language-en" data-url="/hugo-theme-relearn/shortcodes/notice/index.html" lang="en" selected>English</option>
<option id="R-select-language-pir" value="#R-select-language-pir" data-url="/hugo-theme-relearn/pir/shortcodes/notice/index.html" lang="art-x-pir">Arrr! ☠ Pirrratish ☠</option>
</select>
</div>
<div class="clear"></div>
</div>
</li>
<li id="R-select-variant-container" class="footerVariantSwitch showVariantSwitch">
<div class="padding menu-control">
<i class="fa-fw fas fa-paint-brush"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-variant">Theme</label>
<select id="R-select-variant" onchange="window.relearn.changeVariant( this.value );">
<option id="R-select-variant-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
<option id="R-select-variant-relearn-light" value="relearn-light">Relearn Light</option>
<option id="R-select-variant-relearn-dark" value="relearn-dark">Relearn Dark</option>
<option id="R-select-variant-relearn-bright" value="relearn-bright">Relearn Bright</option>
<option id="R-select-variant-zen-auto" value="zen-auto">Zen Light/Dark</option>
<option id="R-select-variant-zen-light" value="zen-light">Zen Light</option>
<option id="R-select-variant-zen-dark" value="zen-dark">Zen Dark</option>
<option id="R-select-variant-retro-auto" value="retro-auto">Retro Learn/Neon</option>
<option id="R-select-variant-neon" value="neon">Neon</option>
<option id="R-select-variant-learn" value="learn">Learn</option>
<option id="R-select-variant-blue" value="blue">Blue</option>
<option id="R-select-variant-green" value="green">Green</option>
<option id="R-select-variant-red" value="red">Red</option>
</select>
</div>
<div class="clear"></div>
</div>
<script>window.relearn.markVariant();</script>
</li>
<li class="footerVisitedLinks showVisitedLinks">
<div class="padding menu-control">
<i class="fa-fw fas fa-history"></i>
<span>&nbsp;</span>
<div class="control-style">
<button onclick="clearHistory();">Clear History</button>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div id="R-footer" class="footerFooter showFooter">
<span class="github-buttons"></span>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script>
function githubButtonsScheme(){
var scheme = 'light';
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#R-sidebar' ) ).getPropertyValue( 'background-color' );
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
if( colorValues.length === 3 && ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165) ){
scheme = 'dark';
}
return scheme;
}
function githubButtonsInit(){
if( !window.githubButtons ){
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
}
document.addEventListener( 'themeVariantLoaded', function( e ){
setTimeout( githubButtonsInit, 400 );
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setTimeout( githubButtonsInit, 400 );
});
</script>
<script async src="/hugo-theme-relearn/js/github-buttons.js?1735904654"></script>
</div>
</div>
</div>
</aside>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1735904654" defer></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1735904654" defer></script>
<script src="/hugo-theme-relearn/js/theme.js?1735904654" defer></script>
</body>
</html>