<linkhref="https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/index.html"rel="canonical"type="text/html"title="Customization :: Hugo Relearn Theme">
<linkhref="/hugo-theme-relearn/configuration/customization/index.xml"rel="alternate"type="application/rss+xml"title="Customization :: Hugo Relearn Theme">
<h2><ahref="/hugo-theme-relearn/configuration/customization/taxonomy/index.html">Taxonomies</a></h2><p>How to display custom taxonomies on your pages</p>
<h1class="a11y-only">Subsections of Customization</h1>
<articleclass="default">
<headerclass="headline">
</header>
<h1id="partials">Partials</h1>
<h2id="usable-partials">Usable Partials</h2>
<p>You can call other partials from <code>themes/hugo-relearn-themes/</code> besides those in <code>themes/hugo-relearn-themes/layouts/partials/_relearn</code>. However, using partials not mentioned as customizable below might make future updates more challenging.</p>
<p>The Relearn theme allows you to customize various parts of the theme by overriding partials. This makes the theme highly configurable.</p>
<p>A good rule to follow: The less code a partial contains, the easier it will be to update the theme in the future.</p>
<p>Here’s a list of partials you can safely override:</p>
<ul>
<li>
<p><code>layouts/partials/content.html</code>: The main content of a page. Override this to display additonal page metadata.</p>
</li>
<li>
<p><code>layouts/partials/content-header.html</code>: The header above the title. By default, it shows tags, but you can change this.</p>
</li>
<li>
<p><code>layouts/partials/content-footer.html</code>: The footer below the content. By default, it shows author info, modification dates, and categories. You can customize this.</p>
</li>
<li>
<p><code>layouts/partials/custom-header.html</code>: For adding custom CSS. Remember to include the <code>style</code> HTML tag.</p>
</li>
<li>
<p><code>layouts/partials/custom-footer.html</code>: For adding custom JavaScript. Remember to include the <code>script</code> HTML tag.</p>
</li>
<li>
<p><code>layouts/partials/favicon.html</code>: The favicon. You should definitely customize this.</p>
</li>
<li>
<p><code>layouts/partials/heading.html</code>: the page’s title headings</p>
</li>
<li>
<p><code>layouts/partials/heading-pre.html</code>: Add content before the page’s title headings. Remember to consider the <code>headingPre</code> front matter.</p>
</li>
<li>
<p><code>layouts/partials/heading-post.html</code>: Add content after the page’s title headings. Remember to consider the <code>headingPost</code> front matter.</p>
</li>
<li>
<p><code>layouts/partials/logo.html</code>: The logo in the top left corner. You should customize this.</p>
</li>
<li>
<p><code>layouts/partials/menu-pre.html</code>: Add content before menu items. Remember to consider the <code>menuPre</code> front matter.</p>
</li>
<li>
<p><code>layouts/partials/menu-post.html</code>: Add content after menu items. Remember to consider the <code>menuPost</code> front matter.</p>
</li>
<li>
<p><code>layouts/partials/menu-footer.html</code>: The footer of the left menu.</p>
</li>
</ul>
<p>You can override other partials from <code>themes/hugo-relearn-themes/</code>, but be careful as this might make future updates more difficult.</p>
<p>A common question is how to add extra CSS styles or JavaScript to your site. This depends on what you need.</p>
<h2id="adding-javascript-or-stylesheets-to-all-pages">Adding JavaScript or Stylesheets to All Pages</h2>
<p>To add JavaScript files or CSS stylesheets to every page, you can include them in <code>layouts/partials/custom-header.html</code> or <code>layouts/partials/custom-footer.html</code>.</p>
<p>However, this can make your site larger than necessary if these files are only needed on a few pages. The next section explains how to add dependencies only when needed.</p>
<h2id="custom-shortcodes-with-dependencies">Custom Shortcodes with Dependencies</h2>
<p>Some shortcodes need extra JavaScript and CSS files. The theme only loads these when the shortcode is used. You can use this for your own shortcodes too.</p>
<p>For example, to create a shortcode called <code>myshortcode</code> that needs the <code>jquery</code> library:</p>
<ol>
<li>
<p>Create the shortcode file <code>layouts/shortcodes/myshortcode.html</code> and add the folloging line somewhere:</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Option</span></span> Add this to your <code>hugo.toml</code>:</p>
<li>The <code>name</code> in <code>hugo.toml</code> must match the <code>Store</code> key used in the shortcode file, prefixed with a <code>has</code>.</li>
<li>The key of <code>relearn.dependencies</code> must match the loader file name.</li>
</ul>
<p>See the <code>math</code>, <code>mermaid</code>, and <code>openapi</code> shortcodes for examples.</p>
<p>Give a unique name for the <code>location</code> parameter when you call it, so you can distinguish your loaders behavior depending on the location it was called from.</p>
<p>This page shows you, how to configure custom <ahref="/hugo-theme-relearn/authoring/markdown/index.html#image-effects">image effects</a> on top of existing ones.</p>
<p>This setting can also <ahref="/hugo-theme-relearn/authoring/imageeffects/index.html">be overridden by your front matter</a>.</p>
<p>If you don’t configure anything in your <code>hugo.toml</code>, the image effects default to</p>
<p><spanclass="badge cstyle cyan badge-with-title"><spanclass="badge-title"><iclass="fa-fw fas fa-gears"></i></span><spanclass="badge-content">Option</span></span> You can change these settings in your <code>hugo.toml</code> and add arbitrary custom effects as boolean values (like <code>bg-white</code> in the below snippet).</p>
<p>The theme comes with a reasonably configured topbar. You can learn how to <ahref="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html">configure the defaults in this section</a>.</p>
<p><ahref="#R-image-5b7de33e1a9f3a69cf94fe131226bfe7"class="lightbox-link"><imgalt="topbar on mobile devices"class="bg-white border lazy lightbox noshadow figure-image"loading="lazy"src="/hugo-theme-relearn/configuration/customization/topbar/topbar-closed.png"style=" height: auto; width: auto;"></a>
<ahref="javascript:history.back();"class="lightbox-back"id="R-image-5b7de33e1a9f3a69cf94fe131226bfe7"><imgalt="topbar on mobile devices"class="bg-white border lazy lightbox noshadow lightbox-image"loading="lazy"src="/hugo-theme-relearn/configuration/customization/topbar/topbar-closed.png"></a></p>
<p>Nevertheless, your requirements may differ from this configuration. Luckily, the theme has you covered as the topbar, its buttons, and the functionality behind these buttons are fully configurable by you.</p>
<divclass="box notices cstyle tip">
<divclass="box-label">
<iclass="fa-fw fas fa-lightbulb"></i> Tip
</div>
<divclass="box-content">
<p>All mentioned file names below can be clicked and show you the implementation for a better understanding.</p>
</div>
</div>
<h2id="areas">Areas</h2>
<p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
<p><ahref="#R-image-aea72ed0bc7bbb7c9cc3c398ac706390"class="lightbox-link"><imgalt="topbar with default areas marked"class="bg-white border lazy lightbox noshadow figure-image"loading="lazy"src="/hugo-theme-relearn/configuration/customization/topbar/topbar-areas.png"style=" height: auto; width: auto;"></a>
<ahref="javascript:history.back();"class="lightbox-back"id="R-image-aea72ed0bc7bbb7c9cc3c398ac706390"><imgalt="topbar with default areas marked"class="bg-white border lazy lightbox noshadow lightbox-image"loading="lazy"src="/hugo-theme-relearn/configuration/customization/topbar/topbar-areas.png"></a></p>
<li><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html"rel="external"target="_self"><strong>start</strong></a>: shown between menu and breadcrumb</li>
<li><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html"rel="external"target="_self"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
<li><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/more.html"rel="external"target="_self"><strong>more</strong></a>: shown when pressing the <spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-ellipsis-v"></i></span></span><em>more</em> button in the topbar</li>
</ul>
<p>While you cannot add additional areas in the topbar, you are free to configure additional buttons that behave like the <em>more</em> button, providing further user-defined areas.</p>
<h2id="buttons">Buttons</h2>
<p>The theme ships with the following predefined buttons (from left to right in the screenshot):</p>
<ul>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-bars"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/sidebar.html"rel="external"target="_self"><strong>sidebar</strong></a>: opens the sidebar flyout if in mobile layout</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-list-alt"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html"rel="external"target="_self"><strong>toc</strong></a>: <ahref="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html#table-of-contents">opens the table of contents in an overlay</a></li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-pen"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html"rel="external"target="_self"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code><ahref="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html#edit-button">parameter is set</a></li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-print"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html"rel="external"target="_self"><strong>print</strong></a>: browses to the chapter’s printable page if <ahref="/hugo-theme-relearn/configuration/sitemanagement/outputformats/index.html#print-support">print support</a> was activated</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-chevron-left"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/prev.html"rel="external"target="_self"><strong>prev</strong></a>: browses to the <ahref="/hugo-theme-relearn/authoring/frontmatter/topbar/index.html#arrow-navigation">previous page</a> if there is one</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-chevron-right"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/next.html"rel="external"target="_self"><strong>next</strong></a>: browses to the [next page]authoring/frontmatter/topbar(#arrow-navigation) if there is one</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-ellipsis-v"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html"rel="external"target="_self"><strong>more</strong></a>: opens the overlay for the <em>more</em> area</li>
</ul>
<p>Not all buttons are displayed at every given time. This is configurable (see below if interested).</p>
<h2id="redefining-areas">Redefining Areas</h2>
<p>Each predefined area and button comes in its own file. By that, it is easy for you to overwrite an area file in your installation, reusing only the buttons you like.</p>
<p>E.g., you can redefine the predefined <em>end</em> area by adding the file <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html"rel="external"target="_self"><code>layouts/partials/topbar/area/end.html</code></a> in your installation (not in the theme itself) to remove all but the <em>more</em> button.</p>
<p>The below example sets an explicit value for the <code>onempty</code> parameter, overriding the specific default value for this button (these defaults vary depending on the button). The parameter causes the <em>more</em> button to always be displayed instead of hiding once its content is empty.</p>
<h2id="defining-own-buttons">Defining Own Buttons</h2>
<h3id="button-types">Button Types</h3>
<p>The theme distinguishes between two types of buttons:</p>
<ul>
<li><ahref="/hugo-theme-relearn/configuration/customization/topbar/index.html#button"><strong>button</strong></a>: a clickable button that either browses to another site, triggers a user-defined script or opens an overlay containing user-defined content</li>
<li><ahref="/hugo-theme-relearn/configuration/customization/topbar/index.html#area-button"><strong>area-button</strong></a>: the template for the <spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-ellipsis-v"></i></span></span><em>more</em> button, to define your own area overlay buttons</li>
</ul>
<h3id="button-parameter">Button Parameter</h3>
<h4id="screen-widths-and-actions">Screen Widths and Actions</h4>
<p>Depending on the screen width, you can configure how the button should behave. Screen width is divided into three classes:</p>
<ul>
<li><strong>s</strong>: (controlled by the <code>onwidths</code> parameter) mobile layout where the menu sidebar is hidden</li>
<li><strong>m</strong>: (controlled by the <code>onwidthm</code> parameter) desktop layout with visible sidebar while the content area width still resizes</li>
<li><strong>l</strong>: (controlled by the <code>onwidthl</code> parameter) desktop layout with visible sidebar once the content area reached its maximum width</li>
</ul>
<p>For each width class, you can configure one of the following actions:</p>
<ul>
<li><code>show</code>: the button is displayed in its given area</li>
<li><code>hide</code>: the button is removed</li>
<li><code>area-XXX</code>: the button is moved from its given area into the area <code>XXX</code>; for example, this is used to move buttons to the <em>more</em> area overlay in the mobile layout</li>
</ul>
<h4id="hiding-and-disabling-stuff">Hiding and Disabling Stuff</h4>
<p>While hiding a button depending on the screen size can be configured with the above-described <em>hide</em> action, you may want to hide the button on certain other conditions as well.</p>
<p>For example, the <em>print</em> button in its default configuration should only be displayed if print support was configured. This is done in your button template by checking the conditions first before displaying the button (see <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html"rel="external"target="_self"><code>layouts/partials/topbar/button/print.html</code></a>).</p>
<p>Another preferred condition for hiding a button is if the displayed overlay is empty. This is the case for the <em>toc</em> (see <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html"rel="external"target="_self"><code>layouts/partials/topbar/button/toc.html</code></a>) as well as the <em>more</em> button (see <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html"rel="external"target="_self"><code>layouts/partials/topbar/button/more.html</code></a>) and controlled by the parameter <code>onempty</code>.</p>
<p>This parameter can have one of the following values:</p>
<ul>
<li><code>disable</code>: the button is displayed in a disabled state if the overlay is empty</li>
<li><code>hide</code>: the button is removed if the overlay is empty</li>
</ul>
<p>If you want to disable a button containing <em>no overlay</em>, this can be achieved by an empty <code>href</code> parameter. An example can be seen in the <em>prev</em> button (see <code>layouts/partials/topbar/button/prev.html</code>) where the URL for the previous site may be empty.</p>
<h2id="reference">Reference</h2>
<h3id="button">Button</h3>
<p>Contains the basic button functionality and is used as a base implementation for all other buttons (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/button.html"rel="external"target="_self"><code>layouts/partials/topbar/func/button.html</code></a>).</p>
<p>Call this from your own button templates if you want to implement a button without an overlay like the <em>print</em> button (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html"rel="external"target="_self"><code>layouts/partials/topbar/button/print.html</code></a>) or with an overlay containing arbitrary content like the <em>toc</em> button (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html"rel="external"target="_self"><code>layouts/partials/topbar/button/toc.html</code></a>).</p>
<p>For displaying an area in the button’s overlay, see <ahref="/hugo-theme-relearn/configuration/customization/topbar/index.html#area-button">Area-Button</a>.</p>
<tdstyle="text-align: left">Mandatory unique class name for this button. Displaying two buttons with the same value for <strong>class</strong> is undefined.</td>
<tdstyle="text-align: left">Either the destination URL for the button or JavaScript code to be executed on click.<br><br>- If starting with <code>javascript:</code> all following text will be executed in your browser<br>- Every other string will be interpreted as URL<br>- If empty, the button will be displayed in a disabled state regardless of its <strong>content</strong></td>
<tdstyle="text-align: left">Defines what to do with the button if the content parameter was set but ends up empty:<br><br>- <code>disable</code>: The button is displayed in a disabled state.<br>- <code>hide</code>: The button is removed.</td>
<tdstyle="text-align: left">The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
<tdstyle="text-align: left">Arbitrary HTML to put into the content overlay. This parameter may be empty. In this case, no overlay will be generated.</td>
</tr>
</tbody>
</table>
<h3id="area-button">Area-Button</h3>
<p>Contains the basic functionality to display area overlay buttons (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/area-button.html"rel="external"target="_self"><code>layouts/partials/topbar/func/area-button.html</code></a>).</p>
<p>Call this from your own button templates if you want to implement a button with an area overlay like the <em>more</em> button (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html"rel="external"target="_self"><code>layouts/partials/topbar/button/more.html</code></a>).</p>
<tdstyle="text-align: left">Mandatory unique area name for this area. Displaying two areas with the same value for <strong>area</strong> is undefined.</td>
<tdstyle="text-align: left">Defines what to do with the button if the content overlay is empty:<br><br>- <code>disable</code>: The button is displayed in a disabled state.<br>- <code>hide</code>: The button is removed.</td>
<tdstyle="text-align: left">The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
<p>The predefined buttons by the theme (all other buttons besides the <em>more</em> and <em>toc</em> button in <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button"rel="external"target="_self"><code>layouts/partials/topbar/button</code></a>).</p>
<p>Call these from your own redefined area templates if you want to use default button behavior.</p>
<p>The <em><varying></em> parameter values are different for each button and configured for standard behavior as seen on this page.</p>
<tdstyle="text-align: left">The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
<p>The predefined buttons by the theme that open an overlay (the <em>more</em> and <em>toc</em> button in <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button"rel="external"target="_self"><code>layouts/partials/topbar/button</code></a>).</p>
<p>Call these from your own redefined area templates if you want to use default button behavior utilizing overlay functionality.</p>
<p>The <em><varying></em> parameter values are different for each button and configured for standard behavior as seen on this page.</p>
<tdstyle="text-align: left">Defines what to do with the button if the content overlay is empty:<br><br>- <code>disable</code>: The button is displayed in a disabled state.<br>- <code>hide</code>: The button is removed.</td>
<tdstyle="text-align: left">The action that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
<p>A page is displayed by exactly one page design. The Relearn theme offers the page designs <code>home</code>, <code>chapter</code>, and <code>default</code>.</p>
<p>A page design usually consists of</p>
<ul>
<li><ahref="https://gohugo.io/content-management/archetypes/"rel="external"target="_self">an archetype file</a>: a template for creating new Markdown files with this design</li>
<li><ahref="https://gohugo.io/templates/types/#content-view"rel="external"target="_self">content view files</a>: represented by <ahref="https://gohugo.io/content-management/front-matter/#type"rel="external"target="_self">Hugo’s reserved <code>type</code> front matter</a> and backed by matching partials</li>
<li>CSS styles</li>
</ul>
<p>If no <code>type</code> is set in your front matter, the page is treated as if <code>type='default'</code> was set.</p>
<p>Don’t use the <code>type</code> option in your modifications for other functionality!</p>
</div>
</div>
<p>All shipped designs use the theme’s framework from <code>themes/hugo-theme-learn/layouts/_default/baseof.html</code>, containing of the same topbar and sidebar but can change how content appears in the center of the page.</p>
<h2id="using-a-page-design">Using a Page Design</h2>
<p>Regardless of shipped or custom page design, you are <ahref="/hugo-theme-relearn/authoring/frontmatter/designs/index.html">using them</a> in the same way.</p>
<h2id="creating-a-page-designs">Creating a Page Designs</h2>
<p>To make a custom page design:</p>
<ol>
<li>
<p>Choose a name (for example, <code>mydesign</code>)</p>
</li>
<li>
<p>Create a content view file at <code>layouts/mydesign/views/article.html</code></p>
<p>The above example uses <code>layouts/mydesign/views/article.html</code> but you have some others</p>
<ul>
<li><code>layouts/mydesign/baseof.html</code>: Completely redefine the whole HTML structure, none of the other listed partials will be used</li>
<li><code>layouts/mydesign/views/menu.html</code>: Defines the sidebar menu layout</li>
<li><code>layouts/mydesign/views/body.html</code>: Determines what to contain in the content area (for example a single page, a list of pages, a tree of sub pages)</li>
<li><code>layouts/mydesign/views/article.html</code>: Controls how one page’s content and title are displayed</li>
<p>In addition to the <ahref="/hugo-theme-relearn/configuration/sitemanagement/outputformats/index.html">output formats coming with the theme</a>, you can create your own <ahref="https://gohugo.io/templates/output-formats/"rel="external"target="_self">output formats</a>.</p>
<h2id="starting-from-scratch">Starting from Scratch</h2>
<p>If you want to add a new output format called <code>myformat</code> that outputs HTML and you want to build everything yourself without using the theme’s components:</p>
<ol>
<li>Create a file <code>layouts/_default/baseof.myformat.html</code></li>
<li>Implement all the necessary code in this file</li>
</ol>
<h2id="using-the-themes-structure">Using the Theme’s Structure</h2>
<p>If you want to keep the general framework and only change specific parts, you can override these files:</p>
<ul>
<li><code>layouts/_default/views/article.html</code>: Controls how a page’s content and title are displayed</li>
<li><code>layouts/_default/views/body.html</code>: Determines the page body structure</li>
<li><code>layouts/_default/views/menu.html</code>: Defines the sidebar menu layout</li>
<li><code>layouts/_default/views/storeOutputFormat.html</code>: Stores the output format name for use in the framework</li>
</ul>
<p>For a real-world example, check out the <code>print</code> output format implementations</p>
<p>This page explains how to show custom taxonomies on your pages.</p>
<p>For more details, check the official docs on <ahref="https://gohugo.io/content-management/taxonomies/#configure-taxonomies"rel="external"target="_self">setting up custom taxonomies</a> and <ahref="https://gohugo.io/content-management/taxonomies/#assign-terms-to-content"rel="external"target="_self">using them in your content</a>.</p>
<h2id="default-behavior">Default Behavior</h2>
<p>The Relearn theme automatically shows Hugo’s <ahref="https://gohugo.io/content-management/taxonomies/#default-taxonomies"rel="external"target="_self">default taxonomies</a><em>tags</em> and <em>categories</em> out of the box.</p>
<ul>
<li>Tags appear at the top of the page in alphabetical order in form of baggage tags.</li>
<li>Categories appear at the bottom of the page in alphabetical order as a list prefixed with an icon.</li>
</ul>
<p>Each item links to a page showing all articles with that term.</p>
<h2id="setting-up-custom-taxonomies">Setting Up Custom Taxonomies</h2>
<p>To add custom taxonomies, update your <code>hugo.toml</code> file. You also have to add the default taxonomies if you want to use them.</p>
<tdstyle="text-align: left">Additional CSS classes set on the outermost generated HTML element.<br><br>If set to <code>tags</code> you will get the visuals for displaying the <em>tags</em> taxonomy, otherwise it will be a simple list of links as for the <em>categories</em> taxonomy.</td>
<tdstyle="text-align: left">The style scheme used if <strong>class</strong> is <code>tags</code>.<br><br>- by severity: <code>caution</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></td>
<tdstyle="text-align: left">The <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"rel="external"target="_self">CSS color value</a> to be used if <strong>class</strong> is <code>tags</code>. If not set, the chosen color depends on the <strong>style</strong>. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color</td>
<tdstyle="text-align: left">An optional <ahref="/hugo-theme-relearn/shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a> set to the left of the list.</td>
