hugo-theme-relearn/cont/taxonomy/index.print.html
2023-11-16 21:19:49 +00:00

193 lines
14 KiB
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.120.4">
<meta name="generator" content="Relearn 5.23.2+tip">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
<meta name="twitter:title" content="Taxonomy :: Hugo Relearn Theme">
<meta name="twitter:description" content="The Relearn theme supports Hugo&rsquo;s default taxonomies tag and category out of the box.
Configuration Just add tags and/or categories to any page. They can be given as a single string or an array of strings.
&#43;&#43;&#43; categories = [&#34;taxonomy&#34;, &#34;content&#34;] tags = &#34;tutorial&#34; title = &#34;Taxonomy&#34; &#43;&#43;&#43;Behavior The tags are displayed at the top of the page in alphabetical order.
The categories are displayed at the bottom of the page in alphabetical order in the default implementation of the theme but can be customized by providing your own content-footer.">
<meta property="og:title" content="Taxonomy :: Hugo Relearn Theme">
<meta property="og:description" content="The Relearn theme supports Hugo&rsquo;s default taxonomies tag and category out of the box.
Configuration Just add tags and/or categories to any page. They can be given as a single string or an array of strings.
&#43;&#43;&#43; categories = [&#34;taxonomy&#34;, &#34;content&#34;] tags = &#34;tutorial&#34; title = &#34;Taxonomy&#34; &#43;&#43;&#43;Behavior The tags are displayed at the top of the page in alphabetical order.
The categories are displayed at the bottom of the page in alphabetical order in the default implementation of the theme but can be customized by providing your own content-footer.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://McShelby.github.io/hugo-theme-relearn/cont/taxonomy/index.html">
<meta property="og:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
<meta property="article:section" content="Content :: Hugo Relearn Theme">
<meta property="og:site_name" content="Hugo Relearn Theme">
<title>Taxonomy :: Hugo Relearn Theme</title>
<link href="https://McShelby.github.io/hugo-theme-relearn/cont/taxonomy/index.html" rel="alternate" hreflang="x-default">
<link href="https://McShelby.github.io/hugo-theme-relearn/cont/taxonomy/index.html" rel="alternate" hreflang="en">
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
<link href="https://McShelby.github.io/hugo-theme-relearn/cont/taxonomy/index.html" rel="canonical" type="text/html" title="Taxonomy :: Hugo Relearn Theme">
<link href="../../cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Hugo Relearn Theme">
<link href="../../images/logo.svg?1700169583" rel="icon" type="image/svg+xml">
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
<link href="../../css/fontawesome-all.min.css?1700169584" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700169584" rel="stylesheet"></noscript>
<link href="../../css/nucleus.css?1700169584" rel="stylesheet">
<link href="../../css/auto-complete.css?1700169584" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700169584" rel="stylesheet"></noscript>
<link href="../../css/perfect-scrollbar.min.css?1700169584" rel="stylesheet">
<link href="../../css/fonts.css?1700169584" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700169584" rel="stylesheet"></noscript>
<link href="../../css/theme.css?1700169584" rel="stylesheet">
<link href="../../css/theme-auto.css?1700169584" rel="stylesheet" id="R-variant-style">
<link href="../../css/variant.css?1700169584" rel="stylesheet">
<link href="../../css/print.css?1700169584" rel="stylesheet" media="print">
<link href="../../css/format-print.css?1700169584" rel="stylesheet">
<link href="../../css/ie.css?1700169584" rel="stylesheet">
<script src="../../js/url.js?1700169584"></script>
<script src="../../js/variant.js?1700169584"></script>
<script>
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
window.index_js_url="../../index.search.js";
var root_url="../../";
var baseUri=root_url.replace(/\/$/, '');
// 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 \u0022{0}\u0022';
window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
// some further base stuff
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../cont/taxonomy/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>
<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="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Taxonomy</span><meta itemprop="position" content="2"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable default" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
<div class=" taxonomy-tags term-list cstyle tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<ul>
<li><a class="term-link" href="../../tags/tutorial/index.html">tutorial</a></li>
</ul>
</div>
</header>
<h1 id="taxonomy">Taxonomy</h1>
<p>The Relearn theme supports Hugo&rsquo;s default taxonomies <em>tag</em> and <em>category</em> out of the box.</p>
<h2 id="configuration">Configuration</h2>
<p>Just add tags and/or categories to any page. They can be given as a single string or an array of strings.</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">categories</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;taxonomy&#34;</span><span class="p">,</span> <span class="s2">&#34;content&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">tags</span> <span class="p">=</span> <span class="s2">&#34;tutorial&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Taxonomy&#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><h2 id="behavior">Behavior</h2>
<p>The tags are displayed at the top of the page in alphabetical order.</p>
<p>The categories are displayed at the bottom of the page in alphabetical order in the default implementation of the theme but can be customized by providing your own <code>content-footer.html</code> partial.</p>
<p>Each item is a link to a taxonomy page displaying all the articles with the given term.</p>
<h2 id="list-all-the-tags">List all the tags</h2>
<p>In the <code>config.toml</code> file you can add a shortcut to display all the tags and categories</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-tags&#39;&gt;&lt;/i&gt; Tags&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/tags&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">shortcuts</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-layer-group&#39;&gt;&lt;/i&gt; Categories&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/categories&#34;</span></span></span></code></pre></div><h2 id="customization">Customization</h2>
<p>If you define <a href="https://gohugo.io/content-management/taxonomies/#configure-taxonomies" target="_blank">custom taxonomies</a> and want to display a list of them somewhere on your page (often in the <code>layouts/partials/content-footer.html</code>) you can call a partial that does the job for you:</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{- partial &#34;term-list.html&#34; (dict
</span></span><span class="line"><span class="cl"> &#34;page&#34; .
</span></span><span class="line"><span class="cl"> &#34;taxonomy&#34; &#34;categories&#34;
</span></span><span class="line"><span class="cl"> &#34;icon&#34; &#34;layer-group&#34;
</span></span><span class="line"><span class="cl">) }}</span></span></code></pre></div><h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>page</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory reference to the page.</td>
</tr>
<tr>
<td><strong>taxonomy</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>The plural name of the taxonomy to display as used in your frontmatter.</td>
</tr>
<tr>
<td><strong>class</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Additional CSS classes set on the outermost generated HTML element.<br><br>If set to <code>tags</code> you will get the visuals for displaying the <em>tags</em> taxonomy, otherwise it will be a simple list of links as for the <em>categories</em> taxonomy.</td>
</tr>
<tr>
<td><strong>style</strong></td>
<td><code>primary</code></td>
<td>The style scheme used if <strong>class</strong> is <code>tags</code>.<br><br>- by severity: <code>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>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code></td>
</tr>
<tr>
<td><strong>color</strong></td>
<td>see notes</td>
<td>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">CSS color value</a> to be used if <strong>class</strong> is <code>tags</code>. If not set, the chosen color depends on the <strong>style</strong>. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color</td>
</tr>
<tr>
<td><strong>icon</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>An optional <a href="../../shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a> set to the left of the list.</td>
</tr>
</tbody>
</table>
<footer class="footline">
<div class=" taxonomy-categories term-list cstyle " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="../../categories/content/index.html">content</a></li>
<li><a class="term-link" href="../../categories/taxonomy/index.html">taxonomy</a></li>
</ul>
</div>
</footer>
</article>
</div>
</main>
</div>
<script src="../../js/clipboard.min.js?1700169584" defer></script>
<script src="../../js/perfect-scrollbar.min.js?1700169584" defer></script>
<script src="../../js/theme.js?1700169584" defer></script>
</body>
</html>