hugo-theme-relearn/pir/configuration/customization/outputformats/index.print.html
2025-01-02 21:41:58 +00:00

611 lines
50 KiB
HTML

<!DOCTYPE html>
<html lang="art-x-pir" dir="rtl" itemscope itemtype="http://schema.org/Article" data-r-output-format="print">
<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.0+4f9b02f2e43556319e73b38edde19e1d262757c1">
<meta name="description" content="Adding Custom Output Formats">
<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="Output Formats :: Cap&#39;n Hugo Relearrrn Theme">
<meta name="twitter:description" content="Adding Custom Output Formats">
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/outputformats/index.html">
<meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:title" content="Output Formats :: Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:description" content="Adding Custom Output Formats">
<meta property="og:locale" content="art_x_pir">
<meta property="og:type" content="website">
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="name" content="Output Formats :: Cap&#39;n Hugo Relearrrn Theme">
<meta itemprop="description" content="Adding Custom Output Formats">
<meta itemprop="wordCount" content="991">
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="keywords" content="Explanation,Howto">
<title>Output Formats :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/outputformats/index.html" rel="alternate" hreflang="x-default">
<link href="https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/outputformats/index.html" rel="alternate" hreflang="en">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/outputformats/index.html" rel="alternate" hreflang="art-x-pir">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/outputformats/index.html" rel="canonical" type="text/html" title="Output Formats :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/pir/configuration/customization/outputformats/index.xml" rel="alternate" type="application/rss+xml" title="Output Formats :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/images/logo.svg?1735854108" rel="icon" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1735854108" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1735854108" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/auto-complete.css?1735854108" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1735854108" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1735854108" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme.min.css?1735854108" rel="stylesheet">
<link href="/hugo-theme-relearn/css/format-print.min.css?1735854108" 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 t' clipboard`;
window.T_Copied_to_clipboard = `Copied t' clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link t' clipboard`;
window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`;
window.T_Reset_view = `Rrreset view`;
window.T_View_reset = `View rrreset!`;
window.T_No_results_found = `No rrresults found fer "{0}"`;
window.T_N_results_found = `{1} rrresults found fer "{0}"`;
</script>
<script src="/hugo-theme-relearn/js/variant.js?1735854108"></script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/configuration/customization/outputformats/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 o&#39; 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="#creating-an-output-format">Creat'n an Output Format</a></li>
<li><a href="#partials">Partials</a>
<ul>
<li><a href="#for-html-output-formats">For HTML Output Formats</a></li>
<li><a href="#for-non-html-output-formats">For Non-HTML Output Formats</a></li>
</ul>
</li>
<li><a href="#migration-to-relearn-7-or-higher">Migrat'n t' Relearrrn 7 or higher</a>
<ul>
<li><a href="#for-html-output-formats-1">For HTML Output Formats</a></li>
<li><a href="#for-non-html-output-formats-1">For Non-HTML Output Formats</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/pir/configuration/index.html"><span itemprop="name">Configurrrat&#39;n</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/pir/configuration/customization/index.html"><span itemprop="name">Customization</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Output Formats</span><meta itemprop="position" content="3"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/configuration/customization/outputformats/_index.pir.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/pir/configuration/customization/outputformats/index.print.html" title="Prrrint whole chapterrr (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/pir/configuration/customization/designs/index.html" title="Page Designs (🡒)"><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/pir/configuration/customization/taxonomy/index.html" title="Taxonomies (🡐)"><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="Morrre"><i class="fa-fw fas fa-ellipsis-v"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<div class="topbar-area topbar-area-more" data-area="more">
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable configuration" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="output-formats">Output Formats</h1>
<p>Cap'n Hugo can display yer rrrambl'n 'n different <a href="https://gohugo.io/templates/output-formats/" rel="external" target="_self">formats</a> like HTML, JSON, Google AMP, etc. T' do this, templates must be provided.</p>
<p>Th' Relearrrn theme by default comes wit' templates fer <a href="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html">HTML, HTML fer print, RSS an' Marrrkdown</a>. If this be not enough, this plank describes how ye can create yer own output formats.</p>
<p>If ye instead just want t' <a href="/hugo-theme-relearn/pir/configuration/customization/designs/index.html">cust'mize th' layout o' an exist'n output format</a>, th' theme got ye covered as well.</p>
<h2 id="creating-an-output-format">Creat'n an Output Format</h2>
<p>Suppose ye want t' be able t' send yer articles as HTML formatted emails. Th' planks o' these format need t' be self contained so an email client can display th' rrrambl'n without load'n any further assets.</p>
<p>Therefore we add a new output format called <code>email</code> that outputs HTML an' assembles a completely custom HTML document structure.</p>
<ol>
<li>
<p>Add th' output format t' yer <code>hugo.toml</code></p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">hugo.</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputFormats</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">outputFormats</span><span class="p">.</span><span class="nx">email</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">baseName</span> <span class="p">=</span> <span class="s1">&#39;index.email&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">isHTML</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">mediaType</span> <span class="p">=</span> <span class="s1">&#39;text/html&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">&#39;email&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">noUgly</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">permalink'ble</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s1">&#39;html&#39;</span><span class="p">,</span> <span class="s1">&#39;rss&#39;</span><span class="p">,</span> <span class="s1">&#39;email&#39;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">plank</span> <span class="p">=</span> <span class="p">[</span><span class="s1">&#39;html&#39;</span><span class="p">,</span> <span class="s1">&#39;rss&#39;</span><span class="p">,</span> <span class="s1">&#39;email&#39;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">section</span> <span class="p">=</span> <span class="p">[</span><span class="s1">&#39;html&#39;</span><span class="p">,</span> <span class="s1">&#39;rss&#39;</span><span class="p">,</span> <span class="s1">&#39;email&#39;</span><span class="p">]</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">outputFormats</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">email</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">baseName</span><span class="p">:</span><span class="w"> </span><span class="l">index.email</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">isHTML</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">mediaType</span><span class="p">:</span><span class="w"> </span><span class="l">text/html</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">email</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">noUgly</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">permalink'ble</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">outputs</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">home</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">html</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">rss</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">email</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">plank</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">html</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">rss</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">email</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">section</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">html</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">rss</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">email</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;outputFormats&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;email&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;baseName&#34;</span><span class="p">:</span> <span class="s2">&#34;index.email&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;isHTML&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;mediaType&#34;</span><span class="p">:</span> <span class="s2">&#34;text/html&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;email&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;noUgly&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;permalinkable&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;outputs&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;home&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;html&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;rss&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;email&#34;</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;page&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;html&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;rss&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;email&#34;</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;section&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;html&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;rss&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;email&#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></code></pre></div>
</div>
</div>
</div>
</div>
</li>
<li>
<p>Create a file <code>layouts/_default/baseof.email.html</code></p>
<div class="tab-panel" data-tab-group="8cf06d3ee2931fcdb66f98762c082943">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layouts_defaultbaseofemailhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('8cf06d3ee2931fcdb66f98762c082943','layouts_defaultbaseofemailhtml')"
>
<span class="tab-nav-text">layouts/_default/baseof.email.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layouts_defaultbaseofemailhtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code" hl_Lines="15"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>{{ .Title }}<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="c">/* add some styles here t' make it pretty */</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="c">/* add chroma style fer code highlight'n */</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="err">{-</span> <span class="err">&#34;/assets/css/chroma-relearn-light.css&#34;</span> <span class="err">|</span> <span class="err">readFile</span> <span class="err">|</span> <span class="err">safeCSS</span> <span class="p">}</span><span class="err">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line hl"><span class="cl"> {{- block &#34;body&#34; . }}{{ end }}
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></span></span></code></pre></div>
</div>
</div>
</div>
</div><p>Th' marked <code>block</code> construct above will cause th' display o' th' article wit' a default HTML structure. In case ye want t' keep it really simple, ye could replace this line wit' just <code>{{ .Content }}</code>.</p>
</li>
<li>
<p><em>Optional</em>: create a file <code>layouts/_default/views/article.email.html</code></p>
<p>In our case, we want t' display a disclaimer 'n front o' every article. T' do this we have t' define th' output o' an article ourself an' rely on th' above <code>block</code> statement t' call our template.</p>
<div class="tab-panel" data-tab-group="6f990ed6ed330d7d86ffa4092476b481">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layouts_defaultviewsarticleemailhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('6f990ed6ed330d7d86ffa4092476b481','layouts_defaultviewsarticleemailhtml')"
>
<span class="tab-nav-text">layouts/_default/views/article.email.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layouts_defaultviewsarticleemailhtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">article</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;email&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">blockquote</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> View this article on <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;http://example.com{{ .RelPermalink }}&#34;</span><span class="p">&gt;</span>our website<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">blockquote</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> {{ partial &#34;article-content.html&#34; . }}
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span></span></span></code></pre></div>
</div>
</div>
</div>
</div></li>
<li>
<p><em>Optional</em>: create a file <code>layouts/_default/_markup_/render-image.email.html</code></p>
<p>In our case, we want t' convert each image into a base 64 encoded str'n t' display it inline 'n th' email without load'n external assets.</p>
<div class="tab-panel" data-tab-group="ffcf71836ec91c46f7d884418e173939">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layouts_defaultmarkuprender-imageemailhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('ffcf71836ec91c46f7d884418e173939','layouts_defaultmarkuprender-imageemailhtml')"
>
<span class="tab-nav-text">layouts/_default/<em>marrrkup</em>/render-image.email.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layouts_defaultmarkuprender-imageemailhtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{- $dest_url := urls.Parse .Destinat'n }}
</span></span><span class="line"><span class="cl">{{- $dest_path := path.Clean ($dest_url.Path) }}
</span></span><span class="line"><span class="cl">{{- $img := .Page.Resources.GetMatch $dest_path }}
</span></span><span class="line"><span class="cl">{{- if an' (not $img) .Page.File }}
</span></span><span class="line"><span class="cl"> {{- $path := path.Join .Page.File.Dir $dest_path }}
</span></span><span class="line"><span class="cl"> {{- $img = resources.Get $path }}
</span></span><span class="line"><span class="cl">{{- end }}
</span></span><span class="line"><span class="cl">{{- if $img }}
</span></span><span class="line"><span class="cl"> {{- if (gt (len $img.Content) 1000000000) }}
</span></span><span class="line"><span class="cl"> {{/* currently resiz'n does not work fer animated gifs :-( */}}
</span></span><span class="line"><span class="cl"> {{- $img = $img.Resize &#34;600x webp q75&#34; }}
</span></span><span class="line"><span class="cl"> {{- end }}
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;data:{{ $img.MediaType }};base64,{{ $img.Content | base64Encode }}&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">{{- end }}</span></span></code></pre></div>
</div>
</div>
</div>
</div></li>
</ol>
<h2 id="partials">Partials</h2>
<h3 id="for-html-output-formats">For HTML Output Formats</h3>
<p>If ye want t' keep th' general HTML framework an' only change specific parts, ye can provide these files fer yer output format independently o' one another:</p>
<ul>
<li><code>layouts/_default/views/article.&lt;FORMAT&gt;.html</code>: <em>Optional</em>: Controls how a page&rsquo;s rrrambl'n an' title be displayed</li>
<li><code>layouts/_default/views/body.&lt;FORMAT&gt;.html</code>: <em>Optional</em>: Determines what t' contain 'n th' rrrambl'n area (for example a single plank, a list o' planks, a tree o' sub pages)</li>
<li><code>layouts/_default/views/menu.&lt;FORMAT&gt;.html</code>: <em>Optional</em>: Defines th' sidebar menu layout</li>
<li><code>layouts/_default/views/storeOutputFormat.&lt;FORMAT&gt;.html</code>: <em>Optional</em>: Stores th' output format name fer use 'n th' framework t' let th' body element been marked wit' an output format specific class</li>
</ul>
<p>For a real-world example, check out th' <code>print</code> output format implementat'n</p>
<ul>
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/views/body.print.html" rel="external" target="_self"><code>layouts/_default/views/body.print.html</code></a></li>
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/views/menu.print.html" rel="external" target="_self"><code>layouts/_default/views/menu.print.html</code></a></li>
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/views/storeOutputFormat.print.html" rel="external" target="_self"><code>layouts/_default/views/storeOutputFormat.print.html</code></a></li>
</ul>
<h3 id="for-non-html-output-formats">For Non-HTML Output Formats</h3>
<ul>
<li><code>layouts/_default/list.&lt;FORMAT&gt;</code>: <em>Mandatory</em>: Controls how sections be displayed</li>
<li><code>layouts/_default/single.&lt;FORMAT&gt;</code>: <em>Mandatory</em>: Controls how planks be displayed</li>
<li><code>layouts/_default/baseof.&lt;FORMAT&gt;</code>: <em>Optional</em>: Controls how sections an' planks be displayed. If not provided, ye have t' provide yer implementat'n 'n <code>list.&lt;FORMAT&gt;</code> an' <code>single.&lt;FORMAT&gt;</code></li>
</ul>
<p>For a real-world example, check out th' <code>markdown</code> output format implementat'n</p>
<ul>
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/baseof.md" rel="external" target="_self"><code>layouts/_default/baseof.md</code></a></li>
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/list.md" rel="external" target="_self"><code>layouts/_default/list.md</code></a></li>
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/single.md" rel="external" target="_self"><code>layouts/_default/single.md</code></a></li>
</ul>
<h2 id="migration-to-relearn-7-or-higher">Migrat'n t' Relearrrn 7 or higher</h2>
<p>Previous t' Relearrrn 7, HTML output formats did not use th' <code>baseof.html</code> but now do.</p>
<h3 id="for-html-output-formats-1">For HTML Output Formats</h3>
<ul>
<li>
<p>Move yer files <code>layouts/partials/article.&lt;FORMAT&gt;.html</code> t' <code>layouts/_default/views/article.&lt;FORMAT&gt;.html</code></p>
<p>Th' files will most likely require further modificat'ns as they now receive th' plank as it context (dot <code>.</code>) instead o' th' <code>.page</code> an' <code>.content</code> parameter.</p>
<p><strong>Old</strong>:</p>
<div class="tab-panel" data-tab-group="dd3402aa12819fd976cd07ecc44e17ab">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layoutspartialsarticleltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('dd3402aa12819fd976cd07ecc44e17ab','layoutspartialsarticleltformatgthtml')"
>
<span class="tab-nav-text">layouts/partials/article.&lt;FORMAT&gt;.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layoutspartialsarticleltformatgthtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code" hl_Lines="1-3 10 16"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line hl"><span class="cl">{{- $page := .page }}
</span></span><span class="line hl"><span class="cl">{{- $content := .content }}
</span></span><span class="line hl"><span class="cl">{{- wit' $page }}
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">article</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;default&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;headline&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> {{- partial &#34;content-header.html&#34; . }}
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> {{partial &#34;heading-pre.html&#34; .}}{{partial &#34;head'n.html&#34; .}}{{partial &#34;heading-post.html&#34; .}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line hl"><span class="cl"> {{ $content | safeHTML }}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;footline&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> {{- partial &#34;content-footer.html&#34; . }}
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
</span></span><span class="line hl"><span class="cl">{{- end }}</span></span></code></pre></div>
</div>
</div>
</div>
</div><p><strong>New</strong>:</p>
<div class="tab-panel" data-tab-group="c6cb13c37eb53d217316d9fd9ed367cb">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layouts_defaultviewsarticleltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('c6cb13c37eb53d217316d9fd9ed367cb','layouts_defaultviewsarticleltformatgthtml')"
>
<span class="tab-nav-text">layouts/_default/views/article.&lt;FORMAT&gt;.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layouts_defaultviewsarticleltformatgthtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code" hl_Lines="7"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">article</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;default&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;headline&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> {{- partial &#34;content-header.html&#34; . }}
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> {{partial &#34;heading-pre.html&#34; .}}{{partial &#34;head'n.html&#34; .}}{{partial &#34;heading-post.html&#34; .}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line hl"><span class="cl"> {{ partial &#34;article-content.html&#34; . }}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;footline&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> {{- partial &#34;content-footer.html&#34; . }}
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span></span></span></code></pre></div>
</div>
</div>
</div>
</div></li>
</ul>
<h3 id="for-non-html-output-formats-1">For Non-HTML Output Formats</h3>
<ul>
<li>
<p>Merge yer files <code>layouts/partials/header.&lt;FORMAT&gt;.html</code>, <code>layouts/partials/footer.&lt;FORMAT&gt;.html</code> t' <code>layouts/_default/baseof.&lt;FORMAT&gt;.html</code></p>
<p><strong>Old</strong>:</p>
<div class="tab-panel" data-tab-group="31dd1b191cbb655ecb61b353189c252b">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layoutspartialsheaderltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('31dd1b191cbb655ecb61b353189c252b','layoutspartialsheaderltformatgthtml')"
>
<span class="tab-nav-text">layouts/partials/header.&lt;FORMAT&gt;.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layoutspartialsheaderltformatgthtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>{{ .Title }}<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="c">/* add some styles here t' make it pretty */</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="c">/* add chroma style fer code highlight'n */</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="err">{-</span> <span class="err">&#34;/assets/css/chroma-relearn-light.css&#34;</span> <span class="err">|</span> <span class="err">readFile</span> <span class="err">|</span> <span class="err">safeCSS</span> <span class="p">}</span><span class="err">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span></span></span></code></pre></div>
</div>
</div>
</div>
</div><div class="tab-panel" data-tab-group="8dc315073ef687416d30cd0b867467c3">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layoutspartialsfooterltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('8dc315073ef687416d30cd0b867467c3','layoutspartialsfooterltformatgthtml')"
>
<span class="tab-nav-text">layouts/partials/footer.&lt;FORMAT&gt;.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layoutspartialsfooterltformatgthtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></span></span></code></pre></div>
</div>
</div>
</div>
</div><p><strong>New</strong>:</p>
<p>Th' upper part o' th' file be from yer <code>header.&lt;FORMAT&gt;.html</code> an' th' lower part be from yer <code>footer.&lt;FORMAT&gt;.html</code>.</p>
<p>Th' marked line needs t' be added, so yer output format uses a potential <code>layouts/_default/views/article.&lt;FORMAT&gt;.html</code></p>
<div class="tab-panel" data-tab-group="160359c19f15b39fd8ec3dc1d7c54c3f">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="layouts_defaultbaseofltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('160359c19f15b39fd8ec3dc1d7c54c3f','layouts_defaultbaseofltformatgthtml')"
>
<span class="tab-nav-text">layouts/_default/baseof.&lt;FORMAT&gt;.html</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="layouts_defaultbaseofltformatgthtml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code" hl_Lines="15"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>{{ .Title }}<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="c">/* add some styles here t' make it pretty */</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="c">/* add chroma style fer code highlight'n */</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="err">{-</span> <span class="err">&#34;/assets/css/chroma-relearn-light.css&#34;</span> <span class="err">|</span> <span class="err">readFile</span> <span class="err">|</span> <span class="err">safeCSS</span> <span class="p">}</span><span class="err">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line hl"><span class="cl"> {{- block &#34;body&#34; . }}{{ end }}
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></span></span></code></pre></div>
</div>
</div>
</div>
</div></li>
</ul>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" 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/pir/categories/explanation/index.html">Explanation</a></li>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
</ul>
</div>
</footer>
</article>
</div>
</main>
</div>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1735854108" defer></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1735854108" defer></script>
<script src="/hugo-theme-relearn/js/theme.js?1735854108" defer></script>
</body>
</html>