2024-10-13 14:26:50 +00:00
<!DOCTYPE html>
2024-12-07 23:18:07 +00:00
< html lang = "art-x-pir" dir = "rtl" itemscope itemtype = "http://schema.org/Article" data-r-output-format = "print" >
2024-10-13 14:26:50 +00:00
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0" >
2024-12-30 19:05:25 +00:00
< meta name = "generator" content = "Hugo 0.140.2" >
2025-01-01 19:12:57 +00:00
< meta name = "generator" content = "Relearn 7.2.1+6747b8862e1ea7331662a6376ef02a48126816ae" >
2024-10-13 14:26:50 +00:00
< meta name = "description" content = "Customize files for advanced usage" >
< meta name = "author" content = "Sören Weber" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
< meta name = "twitter:title" content = "Customization :: Cap'n Hugo Relearrrn Theme" >
< meta name = "twitter:description" content = "Customize files for advanced usage" >
< meta property = "og:url" content = "https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/index.html" >
< meta property = "og:site_name" content = "Cap'n Hugo Relearrrn Theme" >
< meta property = "og:title" content = "Customization :: Cap'n Hugo Relearrrn Theme" >
< meta property = "og:description" content = "Customize files for advanced usage" >
< 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 = "Customization :: Cap'n Hugo Relearrrn Theme" >
< meta itemprop = "description" content = "Customize files for advanced usage" >
< meta itemprop = "wordCount" content = "40" >
< meta itemprop = "image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
< meta itemprop = "keywords" content = "Reference" >
< title > Customization :: Cap' n Hugo Relearrrn Theme< / title >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/index.html" rel = "alternate" hreflang = "x-default" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/index.html" rel = "alternate" hreflang = "en" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/index.html" rel = "alternate" hreflang = "art-x-pir" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/index.html" rel = "canonical" type = "text/html" title = "Customization :: Cap'n Hugo Relearrrn Theme" >
< link href = "/hugo-theme-relearn/pir/configuration/customization/index.xml" rel = "alternate" type = "application/rss+xml" title = "Customization :: Cap'n Hugo Relearrrn Theme" >
2025-01-01 19:12:57 +00:00
< link href = "/hugo-theme-relearn/images/logo.svg?1735758767" rel = "icon" type = "image/svg+xml" >
< link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1735758767" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1735758767" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/auto-complete.css?1735758767" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/auto-complete.css?1735758767" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/perfect-scrollbar.min.css?1735758767" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/theme.min.css?1735758767" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/format-print.min.css?1735758767" rel = "stylesheet" id = "R-format-style" >
2024-10-13 14:26:50 +00:00
< script >
window.relearn = window.relearn || {};
window.relearn.relBasePath='..\/..\/..';
window.relearn.relBaseUri='..\/..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
2024-12-07 23:18:07 +00:00
window.relearn.min = `.min`;
2024-10-13 14:26:50 +00:00
window.relearn.disableAnchorCopy=false;
window.relearn.disableAnchorScrolling=false;
// variant stuff
2024-12-07 23:18:07 +00:00
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();
2024-10-13 14:26:50 +00:00
// 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 >
2025-01-01 19:12:57 +00:00
< script src = "/hugo-theme-relearn/js/variant.js?1735758767" > < / script >
2024-10-13 14:26:50 +00:00
< 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/index.html" >
< div id = "R-body" class = "default-animation" >
< div id = "R-body-overlay" > < / div >
< nav id = "R-topbar" >
< div class = "topbar-wrapper" >
< div class = "topbar-sidebar-divider" > < / div >
< div class = "topbar-area topbar-area-start" data-area = "start" >
< div class = "topbar-button topbar-button-sidebar" data-content-empty = "disable" data-width-s = "show" data-width-m = "hide" data-width-l = "hide" > < button class = "topbar-control" onclick = "toggleNav()" type = "button" title = "Menu (CTRL+ALT+n)" > < i class = "fa-fw fas fa-bars" > < / i > < / button >
< / div >
< div class = "topbar-button topbar-button-toc" data-content-empty = "hide" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < button class = "topbar-control" onclick = "toggleTopbarFlyout(this)" type = "button" title = "Table o' Contents (CTRL+ALT+t)" > < i class = "fa-fw fas fa-list-alt" > < / i > < / button >
< div class = "topbar-content" >
< div class = "topbar-content-wrapper" >
< / div >
< / div >
< / div >
< / div >
< ol class = "topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype = "http://schema.org/BreadcrumbList" > < li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< a itemprop = "item" href = "/hugo-theme-relearn/pir/configuration/index.html" > < span itemprop = "name" > Configurrrat' n< / span > < / a > < meta itemprop = "position" content = "1" > > < / li > < li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< span itemprop = "name" > Customization< / span > < meta itemprop = "position" content = "2" > < / li >
< / ol >
< div class = "topbar-area topbar-area-end" data-area = "end" >
< div class = "topbar-button topbar-button-edit" data-content-empty = "disable" data-width-s = "area-more" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/configuration/customization/_index.pir.md" target = "_self" title = "Edit (CTRL+ALT+w)" > < i class = "fa-fw fas fa-pen" > < / i > < / a >
< / div >
< div class = "topbar-button topbar-button-print" data-content-empty = "disable" data-width-s = "area-more" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "/hugo-theme-relearn/pir/configuration/customization/index.print.html" title = "Prrrint whole chapterrr (CTRL+ALT+p)" > < i class = "fa-fw fas fa-print" > < / i > < / a >
< / div >
< div class = "topbar-button topbar-button-prev" data-content-empty = "disable" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "/hugo-theme-relearn/pir/configuration/content/hidden/index.html" title = "Hidden Pages (🡒)" > < i class = "fa-fw fas fa-chevron-left" > < / i > < / a >
< / div >
< div class = "topbar-button topbar-button-next" data-content-empty = "disable" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "/hugo-theme-relearn/pir/configuration/customization/partials/index.html" title = "Partials (🡐)" > < i class = "fa-fw fas fa-chevron-right" > < / i > < / a >
< / div >
< div class = "topbar-button topbar-button-more" data-content-empty = "hide" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < button class = "topbar-control" onclick = "toggleTopbarFlyout(this)" type = "button" title = "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 = "customization" > Customization< / h1 >
< div class = "children children-h2 children-sort-" >
< h2 > < a href = "/hugo-theme-relearn/pir/configuration/customization/partials/index.html" > Partials< / a > < / h2 > < p > Modify'n partials t' yer needs< / p >
< h2 > < a href = "/hugo-theme-relearn/pir/configuration/customization/dependencies/index.html" > Extend'n Scripts< / a > < / h2 > < p > Add further code t' yer ship< / p >
< h2 > < a href = "/hugo-theme-relearn/pir/configuration/customization/imageeffects/index.html" > Image Effects< / a > < / h2 > < p > How t' extend image effects< / p >
< h2 > < a href = "/hugo-theme-relearn/pir/configuration/customization/topbar/index.html" > Topbar< / a > < / h2 > < p > How t' extend th' topbar< / p >
< h2 > < a href = "/hugo-theme-relearn/pir/configuration/customization/designs/index.html" > Plank Designs< / a > < / h2 > < p > Extend'n plank designs< / p >
< h2 > < a href = "/hugo-theme-relearn/pir/configuration/customization/outputformats/index.html" > Output Formats< / a > < / h2 > < p > Add'n Custom Output Formats< / p >
< h2 > < a href = "/hugo-theme-relearn/pir/configuration/customization/taxonomy/index.html" > Taxonomies< / a > < / h2 > < p > How t' display custom taxonomies on yer planks< / p >
< / div >
< 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/reference/index.html" > Reference< / a > < / li >
< / ul >
< / div >
< / footer >
< / article >
< section >
< h1 class = "a11y-only" > Subsct' ns o' Customization< / h1 >
< article class = "default" >
< header class = "headline" >
< / header >
< h1 id = "partials" > Partials< / h1 >
< h2 id = "usable-partials" > Us'ble Partials< / h2 >
< p > Ye can call other partials from < code > themes/hugo-relearn-themes/< / code > besides those 'n < code > themes/hugo-relearn-themes/layouts/partials/_relearn< / code > . However, us'n partials not mentioned as customiz'ble below might make future updates more challeng'n.< / p >
< h2 id = "customizable-partials" > Customiz'ble Partials< / h2 >
< p > Th' Relearrrn theme allows ye t' cust'mize various parts o' th' theme by overrid'n partials. This makes th' theme highly configur'ble.< / p >
< p > A bloody rule t' follow: Th' less code a partial contains, th' easier it will be t' update th' theme 'n th' future.< / p >
< p > Here’ s a list o' partials ye can safely override:< / p >
< ul >
< li >
< p > < code > layouts/partials/content.html< / code > : Th' main rrrambl'n o' a plank. Override this t' display additonal plank metadata.< / p >
< / li >
< li >
< p > < code > layouts/partials/content-header.html< / code > : Th' header above th' title. By default, it shows tags, but ye can change this.< / p >
< / li >
< li >
< p > < code > layouts/partials/content-footer.html< / code > : Th' footer below th' rrrambl'n. By default, it shows author info, modificat'n dates, an' categories. Ye can cust'mize this.< / p >
< / li >
< li >
< p > < code > layouts/partials/custom-header.html< / code > : For add'n custom CSS. Remember t' include th' < code > style< / code > HTML tag.< / p >
< / li >
< li >
< p > < code > layouts/partials/custom-footer.html< / code > : For add'n custom JavaScript. Remember t' include th' < code > script< / code > HTML tag.< / p >
< / li >
< li >
< p > < code > layouts/partials/favicon.html< / code > : Th' favicon. Ye should definitely cust'mize this.< / p >
< / li >
< li >
< p > < code > layouts/partials/head'n.html< / code > : th' page’ s title head'ns< / p >
< / li >
< li >
< p > < code > layouts/partials/heading-pre.html< / code > : Add rrrambl'n before th' page’ s title head'ns. Remember t' consider th' < code > headingPre< / code > front matter.< / p >
< / li >
< li >
< p > < code > layouts/partials/heading-post.html< / code > : Add rrrambl'n after th' page’ s title head'ns. Remember t' consider th' < code > headingPost< / code > front matter.< / p >
< / li >
< li >
< p > < code > layouts/partials/logo.html< / code > : Th' logo 'n th' top left corner. Ye should cust'mize this.< / p >
< / li >
< li >
< p > < code > layouts/partials/menu-pre.html< / code > : Add rrrambl'n before menu items. Remember t' consider th' < code > menuPre< / code > front matter.< / p >
< / li >
< li >
< p > < code > layouts/partials/menu-post.html< / code > : Add rrrambl'n after menu items. Remember t' consider th' < code > menuPost< / code > front matter.< / p >
< / li >
< li >
< p > < code > layouts/partials/menu-footer.html< / code > : Th' footer o' th' left menu.< / p >
< / li >
< / ul >
< p > Ye can override other partials from < code > themes/hugo-relearn-themes/< / code > , but be careful as this might make future updates more difficult.< / p >
< footer class = "footline" >
< div class = "R-taxonomy taxonomy-categories cstyle" title = "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 >
< / ul >
< / div >
< / footer >
< / article >
< article class = "default" >
< header class = "headline" >
< / header >
< h1 id = "extending-scripts" > Extending Scripts< / h1 >
< p > A common quest'n be how t' add extra CSS styles or JavaScript t' yer ship. This depends on what ye need.< / p >
< h2 id = "adding-javascript-or-stylesheets-to-all-pages" > Add'n JavaScript or Stylesheets t' All Planks< / h2 >
< p > T' add JavaScript files or CSS stylesheets t' every plank, ye can include them 'n < code > layouts/partials/custom-header.html< / code > or < code > layouts/partials/custom-footer.html< / code > .< / p >
< p > However, this can make yer ship larger than necessary if these files be only needed on a few planks. Th' next section explains how t' add dependencies only when needed.< / p >
< h2 id = "custom-shortcodes-with-dependencies" > Custom Shorrrtcodes wit' Dependencies< / h2 >
< p > Some shorrrtcodes need extra JavaScript an' CSS files. Th' theme only loads these when th' shortcode be used. Ye can use this fer yer own shorrrtcodes too.< / p >
< p > For example, t' create a shortcode called < code > myshortcode< / code > that needs th' < code > jquery< / code > library:< / p >
< ol >
< li >
< p > Create th' shortcode file < code > layouts/shortcodes/myshortcode.html< / code > an' add th' follog'n line somewhere:< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "6108ee6adaec6cd3360e5234a2fa7454" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutsshortcodesmyshortcodehtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('6108ee6adaec6cd3360e5234a2fa7454','layoutsshortcodesmyshortcodehtml')"
2024-10-13 14:26:50 +00:00
>
< span class = "tab-nav-text" > layouts/shortcodes/myshortcode.html< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="layoutsshortcodesmyshortcodehtml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-go" data-lang = "go" > < span class = "line" > < span class = "cl" > < span class = "o" > ...< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > {{< / span > < span class = "o" > -< / span > < span class = "p" > .< / span > < span class = "nx" > Plank< / span > < span class = "p" > .< / span > < span class = "nx" > Store< / span > < span class = "p" > .< / span > < span class = "nx" > Set< / span > < span class = "s" > " hasMyShortcode" < / span > < span class = "kc" > true< / span > < span class = "p" > }}< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "o" > ...< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < / li >
< li >
< p > < span class = "badge cstyle cyan badge-with-title" > < span class = "badge-title" > < i class = "fa-fw fas fa-gears" > < / i > < / span > < span class = "badge-content" > Opt'n< / span > < / span > Add this 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" > params< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > relearn< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > relearn< / span > < span class = "p" > .< / span > < span class = "nx" > dependencies< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > relearn< / span > < span class = "p" > .< / span > < span class = "nx" > dependencies< / span > < span class = "p" > .< / span > < span class = "nx" > myshortcode< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > name< / span > < span class = "p" > =< / span > < span class = "s1" > ' MyShortcode' < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > relearn< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > dependencies< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > myshortcode< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > name< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > MyShortcode< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " relearn" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " dependencies" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " myshortcode" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " name" < / span > < span class = "p" > :< / span > < span class = "s2" > " MyShortcode" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div >
< / li >
< li >
< p > Create loader file < code > layouts/partials/dependencies/myshortcode.html< / code > :< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "7c4e3689e3b161cc2977e69a5f198203" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialsdependenciesmyshortcodehtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('7c4e3689e3b161cc2977e69a5f198203','layoutspartialsdependenciesmyshortcodehtml')"
2024-10-13 14:26:50 +00:00
>
< span class = "tab-nav-text" > layouts/partials/dependencies/myshortcode.html< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="layoutspartialsdependenciesmyshortcodehtml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-go" data-lang = "go" > < span class = "line" > < span class = "cl" > < span class = "p" > {{< / span > < span class = "o" > -< / span > < span class = "k" > if< / span > < span class = "nx" > eq< / span > < span class = "p" > .< / span > < span class = "nx" > locat'n< / span > < span class = "s" > " footer" < / span > < span class = "p" > }}< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nx" > script< / span > < span class = "nx" > src< / span > < span class = "p" > =< / span > < span class = "s" > " https://www.unpkg.com/jquery/dist/jquery.js" < / span > < span class = "p" > > < < / span > < span class = "o" > /< / span > < span class = "nx" > script< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > {{< / span > < span class = "o" > -< / span > < span class = "nx" > end< / span > < span class = "p" > }}< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < / li >
< / ol >
< p > Important notes:< / p >
< ul >
< li > Character cas'n be relevant!< / li >
< li > Th' < code > name< / code > 'n < code > hugo.toml< / code > must match th' < code > Store< / code > key used 'n th' shortcode file, prefixed wit' a < code > has< / code > .< / li >
< li > Th' key o' < code > relearn.dependencies< / code > must match th' loader file name.< / li >
< / ul >
< p > See th' < code > math< / code > , < code > mermaid< / code > , an' < code > openapi< / code > shorrrtcodes fer examples.< / p >
2024-12-01 21:17:58 +00:00
< details open class = " box cstyle notices note" >
2024-12-29 19:15:31 +00:00
< summary class = "box-label" tabindex = "-1" >
2024-11-30 18:11:32 +00:00
< i class = "fa-fw fas fa-exclamation-circle" > < / i >
Avast
< / summary >
2024-10-13 14:26:50 +00:00
< div class = "box-content" >
< p > For advanced customizat'n, ye can use th' dependency loader 'n yer own partials:< / p >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-go" data-lang = "go" > < span class = "line" > < span class = "cl" > < span class = "p" > {{< / span > < span class = "o" > -< / span > < span class = "nx" > partial< / span > < span class = "s" > " dependencies.gotmpl" < / span > < span class = "p" > (< / span > < span class = "nx" > dict< / span > < span class = "s" > " page" < / span > < span class = "p" > .< / span > < span class = "s" > " location" < / span > < span class = "s" > " mylocation" < / span > < span class = "p" > )< / span > < span class = "p" > }}< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
2024-11-30 18:11:32 +00:00
< / details >
2024-10-13 14:26:50 +00:00
< p > Give a unique name fer th' < code > locat'n< / code > parameter when ye call it, so ye can distinguish yer loaders behavior depend'n on th' locat'n it was called from.< / p >
< 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 >
< article class = "default" >
< header class = "headline" >
< / header >
< h1 id = "image-effects" > Image Effects< / h1 >
< p > This plank shows ye, how t' configure custom < a href = "/hugo-theme-relearn/pir/authoring/markdown/index.html#image-effects" > image effects< / a > on top o' exist'n ones.< / p >
< p > This sett'n can also < a href = "/hugo-theme-relearn/pir/authoring/imageeffects/index.html" > be overridden by yer front matter< / a > .< / p >
< p > If ye don’ t configure anyth'n 'n yer < code > hugo.toml< / code > , th' image effects default t'< / p >
< h2 id = "default-values" > Default Values< / h2 >
< div class = "tab-panel" data-tab-group = "config-code" >
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > imageEffects< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > border< / span > < span class = "p" > =< / span > < span class = "kc" > false< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > lazy< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > lightbox< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > shadow< / span > < span class = "p" > =< / span > < span class = "kc" > false< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > imageEffects< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > border< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > false< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > lazy< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > lightbox< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > shadow< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > false< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " imageEffects" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " border" < / span > < span class = "p" > :< / span > < span class = "kc" > false< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " lazy" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " lightbox" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " shadow" < / span > < span class = "p" > :< / span > < span class = "kc" > false< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div >
< h2 id = "configuration" > Configurat'n< / h2 >
< p > < span class = "badge cstyle cyan badge-with-title" > < span class = "badge-title" > < i class = "fa-fw fas fa-gears" > < / i > < / span > < span class = "badge-content" > Opt'n< / span > < / span > Ye can change these sett'ns 'n yer < code > hugo.toml< / code > an' add arbitrary custom effects as boolean values (like < code > bg-white< / code > 'n th' below snippet).< / p >
< div class = "tab-panel" data-tab-group = "config-code" >
< div class = "tab-nav" >
< div class = "tab-nav-title" > hugo.< / div >
< button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > imageEffects< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > bg-white< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > border< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > lazy< / span > < span class = "p" > =< / span > < span class = "kc" > false< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > imageEffects< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > bg-white< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > border< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > lazy< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > false< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " imageEffects" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " bg-white" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " border" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " lazy" < / span > < span class = "p" > :< / span > < span class = "kc" > false< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div >
< p > This would result 'n< / p >
< div class = "tab-panel" data-tab-group = "config-code" >
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > imageEffects< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > bg-white< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > border< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > lazy< / span > < span class = "p" > =< / span > < span class = "kc" > false< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > lightbox< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > shadow< / span > < span class = "p" > =< / span > < span class = "kc" > false< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > imageEffects< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > bg-white< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > border< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > lazy< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > false< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > lightbox< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > shadow< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > false< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " imageEffects" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " bg-white" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " border" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " lazy" < / span > < span class = "p" > :< / span > < span class = "kc" > false< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " lightbox" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " shadow" < / span > < span class = "p" > :< / span > < span class = "kc" > false< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div >
< h3 id = "example" > Example< / h3 >
< p > Wit' this configurat'n 'n effect, th' follow'n URL< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "eb0d10bd056895a5f2e59fff9bf03a57" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="markdown"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('eb0d10bd056895a5f2e59fff9bf03a57','markdown')"
2024-10-13 14:26:50 +00:00
>
< span class = "tab-nav-text" > Marrrkdown< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="markdown"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-markdown" data-lang = "markdown" > < span class = "line" > < span class = "cl" > ![< span class = "nt" > Minion< / span > ](< span class = "na" > https://octodex.github.com/images/minion.png< / span > )< / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < p > would result 'n< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "5c9d13afd9c7218d03f20ba42fb9ab02" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="html"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('5c9d13afd9c7218d03f20ba42fb9ab02','html')"
2024-10-13 14:26:50 +00:00
>
< span class = "tab-nav-text" > HTML< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="html"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-html" data-lang = "html" > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > img< / span > < span class = "na" > src< / span > < span class = "o" > =< / span > < span class = "s" > " https://octodex.github.com/images/minion.png" < / span > < span class = "na" > load'n< / span > < span class = "o" > =< / span > < span class = "s" > " lazy" < / span > < span class = "na" > alt< / span > < span class = "o" > =< / span > < span class = "s" > " Minion" < / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " bg-white border nolazy lightbox noshadow" < / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < h2 id = "styling-effects" > Styl'n Effects< / h2 >
< p > If th' result'n effect value be< / p >
< ul >
< li > < code > true< / code > : add a class wit' th' effect’ s name< / li >
< li > < code > false< / code > : add a class wit' th' effect’ s name an' a “ no” prefix< / li >
< / ul >
< p > Styles fer default effects be contained 'n th' theme. Add styles fer yer custom effects t' < code > layouts/partials/content-header.html< / code > .< / p >
< p > For th' above example ye could add styles fer both boolean cases:< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "0769523604d308fc4fb18db9a305622e" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialscontent-headerhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('0769523604d308fc4fb18db9a305622e','layoutspartialscontent-headerhtml')"
2024-10-13 14:26:50 +00:00
>
< span class = "tab-nav-text" > layouts/partials/content-header.html< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="layoutspartialscontent-headerhtml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-html" data-lang = "html" > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > img< / span > < span class = "p" > .< / span > < span class = "nc" > bg-white< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "k" > background-color< / span > < span class = "p" > :< / span > < span class = "kc" > white< / span > < span class = "p" > ;< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > img< / span > < span class = "p" > .< / span > < span class = "nc" > nobg-white< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "k" > background-color< / span > < span class = "p" > :< / span > < span class = "kc" > transparent< / span > < span class = "p" > ;< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div >
< footer class = "footline" >
< div class = "R-taxonomy taxonomy-categories cstyle" title = "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 >
< article class = "default" >
< header class = "headline" >
< / header >
< h1 id = "topbarrr" > Topbarrr< / h1 >
< p > Th' theme comes wit' a reasonably configured topbar. Ye can learn how t' < a href = "/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html" > configure th' defaults 'n this section< / a > .< / p >
2025-01-01 19:12:57 +00:00
< p > < a href = "#R-image-cff010c8271dc8629a542c953d9107a5" class = "lightbox-link" > < img alt = "topbar on mobile devices" class = "bg-white border lazy lightbox noshadow figure-image" loading = "lazy" src = "/hugo-theme-relearn/configuration/customization/topbar/topbar-closed.png" style = " height: auto; width: auto;" > < / a >
< a href = "javascript:history.back();" class = "lightbox-back" id = "R-image-cff010c8271dc8629a542c953d9107a5" > < img alt = "topbar on mobile devices" class = "bg-white border lazy lightbox noshadow lightbox-image" loading = "lazy" src = "/hugo-theme-relearn/configuration/customization/topbar/topbar-closed.png" > < / a > < / p >
2024-10-13 14:26:50 +00:00
< p > Nevertheless, yer requirements may differ from this configurat'n. Luckily, th' theme has ye covered as th' topbar, its buttons, an' th' functionality behind these buttons be fully configur'ble by ye.< / p >
2024-12-01 21:17:58 +00:00
< details open class = " box cstyle notices tip" >
2024-12-29 19:15:31 +00:00
< summary class = "box-label" tabindex = "-1" >
2024-11-30 18:11:32 +00:00
< i class = "fa-fw fas fa-lightbulb" > < / i >
Smarrrt Arrrse
< / summary >
2024-10-13 14:26:50 +00:00
< div class = "box-content" >
< p > All mentioned file names below can be clicked an' show ye th' implementat'n fer a better understand'n.< / p >
< / div >
2024-11-30 18:11:32 +00:00
< / details >
2024-10-13 14:26:50 +00:00
< h2 id = "areas" > Areas< / h2 >
< p > Th' default configurat'n comes wit' three predefined areas that may contain an arbitrary set o' buttons.< / p >
2025-01-01 19:12:57 +00:00
< p > < a href = "#R-image-0f799801af404d8e88d4a06f512bb6fa" class = "lightbox-link" > < img alt = "topbar wit' default areas marked" class = "bg-white border lazy lightbox noshadow figure-image" loading = "lazy" src = "/hugo-theme-relearn/configuration/customization/topbar/topbar-areas.png" style = " height: auto; width: auto;" > < / a >
< a href = "javascript:history.back();" class = "lightbox-back" id = "R-image-0f799801af404d8e88d4a06f512bb6fa" > < img alt = "topbar wit' 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 >
2024-10-13 14:26:50 +00:00
< ul >
< li > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" rel = "external" target = "_self" > < strong > start< / strong > < / a > : shown between menu an' breadcrumb< / li >
< li > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" rel = "external" target = "_self" > < strong > end< / strong > < / a > : shown on th' opposite breadcrumb side 'n comparison t' th' < em > start< / em > area< / li >
< li > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/more.html" rel = "external" target = "_self" > < strong > more< / strong > < / a > : shown when press'n th' < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-ellipsis-v" > < / i > < / span > < / span > < em > more< / em > button 'n th' topbar< / li >
< / ul >
< p > While ye cannot add additional areas 'n th' topbar, ye be free t' configure additional buttons that behave like th' < em > more< / em > button, provid'n further user-defined areas.< / p >
< h2 id = "buttons" > Buttons< / h2 >
< p > Th' theme ships wit' th' follow'n predefined buttons (from left t' right 'n th' screenshot):< / p >
< ul >
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-bars" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/sidebar.html" rel = "external" target = "_self" > < strong > sidebar< / strong > < / a > : opens th' sidebar flyout if 'n mobile layout< / li >
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-list-alt" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" rel = "external" target = "_self" > < strong > toc< / strong > < / a > : < a href = "/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#table-of-contents" > opens th' t'ble o' contents 'n an overlay< / a > < / li >
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-pen" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" rel = "external" target = "_self" > < strong > edit< / strong > < / a > : browses t' th' edit'ble plank if th' < code > editURL< / code > < a href = "/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#edit-button" > parameter be set< / a > < / li >
2024-12-31 13:33:32 +00:00
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fab fa-markdown" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/markdown.html" rel = "external" target = "_self" > < strong > markdown< / strong > < / a > : browses t' th' chapter’ s markdown source if < a href = "/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#markdown-support" > markdown support< / a > was activated< / li >
2024-10-13 14:26:50 +00:00
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-print" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" rel = "external" target = "_self" > < strong > print< / strong > < / a > : browses t' th' chapter’ s print'ble plank if < a href = "/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html#print-support" > print support< / a > was activated< / li >
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-chevron-left" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/prev.html" rel = "external" target = "_self" > < strong > prev< / strong > < / a > : browses t' th' < a href = "/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html#arrow-navigation" > previous plank< / a > if there be one< / li >
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-chevron-right" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/next.html" rel = "external" target = "_self" > < strong > next< / strong > < / a > : browses t' th' [next page]authoring/frontmatter/topbar(#arrow-navigation) if there be one< / li >
< li > < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-ellipsis-v" > < / i > < / span > < / span > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" rel = "external" target = "_self" > < strong > more< / strong > < / a > : opens th' overlay fer th' < em > more< / em > area< / li >
< / ul >
< p > Not all buttons be displayed at every given time. This be configur'ble (see below if interested).< / p >
< h2 id = "redefining-areas" > Redefin'n Areas< / h2 >
< p > Each predefined area an' button comes 'n its own file. By that, it be easy fer ye t' overwrite an area file 'n yer installat'n, reus'n only th' buttons ye like.< / p >
< p > E.g., ye can redefine th' predefined < em > end< / em > area by add'n th' file < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/area/end.html< / code > < / a > 'n yer installat'n (not 'n th' theme itself) t' remove all but th' < em > more< / em > button.< / p >
< p > Th' below example sets an explicit value fer th' < code > onempty< / code > parameter, overrid'n th' specific default value fer this button (these defaults vary depend'n on th' button). Th' parameter causes th' < em > more< / em > button t' always be displayed instead o' hid'n once its rrrambl'n be empty.< / p >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-go" data-lang = "go" > < span class = "line" > < span class = "cl" > < span class = "p" > {{< / span > < span class = "nx" > partial< / span > < span class = "s" > " topbar/button/more.html" < / span > < span class = "p" > (< / span > < span class = "nx" > dict< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s" > " page" < / span > < span class = "p" > .< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s" > " onempty" < / span > < span class = "s" > " disable" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > )}}< / span > < / span > < / span > < / code > < / pre > < / div >
< h2 id = "defining-own-buttons" > Defin'n Own Buttons< / h2 >
< h3 id = "button-types" > Button Types< / h3 >
< p > Th' theme distinguishes between two types o' buttons:< / p >
< ul >
< li > < a href = "/hugo-theme-relearn/pir/configuration/customization/topbar/index.html#button" > < strong > button< / strong > < / a > : a click'ble button that either browses t' another ship, triggers a user-defined script or opens an overlay contain'n user-defined rrrambl'n< / li >
< li > < a href = "/hugo-theme-relearn/pir/configuration/customization/topbar/index.html#area-button" > < strong > area-button< / strong > < / a > : th' template fer th' < span class = "btn cstyle transparent" > < span > < i class = "fa-fw fas fa-ellipsis-v" > < / i > < / span > < / span > < em > more< / em > button, t' define yer own area overlay buttons< / li >
< / ul >
< h3 id = "button-parameter" > Button Parameter< / h3 >
< h4 id = "screen-widths-and-actions" > Screen Widths an' Act'ns< / h4 >
< p > Depend'n on th' screen width, ye can configure how th' button should behave. Screen width be divided into three classes:< / p >
< ul >
< li > < strong > s< / strong > : (controlled by th' < code > onwidths< / code > parameter) mobile layout whar' th' menu sidebar be hidden< / li >
< li > < strong > m< / strong > : (controlled by th' < code > onwidthm< / code > parameter) desktop layout wit' vis'ble sidebar while th' rrrambl'n area width still resizes< / li >
< li > < strong > l< / strong > : (controlled by th' < code > onwidthl< / code > parameter) desktop layout wit' vis'ble sidebar once th' rrrambl'n area reached its maximum width< / li >
< / ul >
< p > For each width class, ye can configure one o' th' follow'n act'ns:< / p >
< ul >
< li > < code > show< / code > : th' button be displayed 'n its given area< / li >
< li > < code > hide< / code > : th' button be removed< / li >
< li > < code > area-XXX< / code > : th' button be moved from its given area into th' area < code > XXX< / code > ; fer example, this be used t' move buttons t' th' < em > more< / em > area overlay 'n th' mobile layout< / li >
< / ul >
< h4 id = "hiding-and-disabling-stuff" > Hid'n an' Disabl'n Stuff< / h4 >
< p > While hid'n a button depend'n on th' screen size can be configured wit' th' above-described < em > hide< / em > act'n, ye may want t' hide th' button on certain other condit'ns as well.< / p >
< p > For example, th' < em > print< / em > button 'n its default configurat'n should only be displayed if print support was configured. This be done 'n yer button template by check'n th' condit'ns first before display'n th' button (see < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/button/print.html< / code > < / a > ).< / p >
< p > Another preferred condit'n fer hid'n a button be if th' displayed overlay be empty. This be th' case fer th' < em > toc< / em > (see < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/button/toc.html< / code > < / a > ) as well as th' < em > more< / em > button (see < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/button/more.html< / code > < / a > ) an' controlled by th' parameter < code > onempty< / code > .< / p >
< p > This parameter can have one o' th' follow'n values:< / p >
< ul >
< li > < code > dis'ble< / code > : th' button be displayed 'n a disabled state if th' overlay be empty< / li >
< li > < code > hide< / code > : th' button be removed if th' overlay be empty< / li >
< / ul >
< p > If ye want t' dis'ble a button contain'n < em > no overlay< / em > , this can be achieved by an empty < code > href< / code > parameter. An example can be seen 'n th' < em > prev< / em > button (see < code > layouts/partials/topbar/button/prev.html< / code > ) whar' th' URL fer th' previous ship may be empty.< / p >
< h2 id = "reference" > Reference< / h2 >
< h3 id = "button" > Button< / h3 >
< p > Contains th' basic button functionality an' be used as a base implementat'n fer all other buttons (< a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/button.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/func/button.html< / code > < / a > ).< / p >
< p > Call this from yer own button templates if ye want t' implement a button without an overlay like th' < em > print< / em > button (< a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/button/print.html< / code > < / a > ) or wit' an overlay contain'n arbitrary rrrambl'n like th' < em > toc< / em > button (< a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/button/toc.html< / code > < / a > ).< / p >
< p > For display'n an area 'n th' button’ s overlay, see < a href = "/hugo-theme-relearn/pir/configuration/customization/topbar/index.html#area-button" > Area-Button< / a > .< / p >
< h4 id = "parameter" > Parameter< / h4 >
< table >
< thead >
< tr >
2024-10-24 14:30:52 +00:00
< th > Name< / th >
< th > Default< / th >
< th > Notes< / th >
2024-10-13 14:26:50 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > plank< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Mandatory reference t' th' plank.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > class< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Mandatory unique class name fer this button. Display'n two buttons wit' th' same value fer < strong > class< / strong > be undefined.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > href< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Either th' destinat'n URL fer th' button or JavaScript code t' be executed on click.< br > < br > - If start'n wit' < code > javascript:< / code > all follow'n text will be executed 'n yer browser< br > - Every other str'n will be interpreted as URL< br > - If empty, th' button will be displayed 'n a disabled state regardless o' its < strong > rrrambl'n< / strong > < / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > ay'con< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > < a href = "/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon" > Font Awesome ay'con name< / a > .< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onempty< / strong > < / td >
< td > < code > dis'ble< / code > < / td >
< td > Defines what t' do wit' th' button if th' rrrambl'n parameter was set but ends up empty:< br > < br > - < code > dis'ble< / code > : Th' button be displayed 'n a disabled state.< br > - < code > hide< / code > : Th' button be removed.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidths< / strong > < / td >
< td > < code > show< / code > < / td >
< td > Th' act'n that should be executed if th' ship be displayed 'n th' given width:< br > < br > - < code > show< / code > : Th' button be displayed 'n its given area< br > - < code > hide< / code > : Th' button be removed.< br > - < code > area-XXX< / code > : Th' button be moved from its given area into th' area < code > XXX< / code > .< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthm< / strong > < / td >
< td > < code > show< / code > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthl< / strong > < / td >
< td > < code > show< / code > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > hint< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Arbitrary text displayed 'n th' tooltip.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > title< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Arbitrary text fer th' button.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > rrrambl'n< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Arbitrary HTML t' put into th' rrrambl'n overlay. This parameter may be empty. In this case, no overlay will be generated.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< / tbody >
< / table >
< h3 id = "area-button" > Area-Button< / h3 >
< p > Contains th' basic functionality t' display area overlay buttons (< a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/area-button.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/func/area-button.html< / code > < / a > ).< / p >
< p > Call this from yer own button templates if ye want t' implement a button wit' an area overlay like th' < em > more< / em > button (< a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" rel = "external" target = "_self" > < code > layouts/partials/topbar/button/more.html< / code > < / a > ).< / p >
< h4 id = "parameter-1" > Parameter< / h4 >
< table >
< thead >
< tr >
2024-10-24 14:30:52 +00:00
< th > Name< / th >
< th > Default< / th >
< th > Notes< / th >
2024-10-13 14:26:50 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > plank< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Mandatory reference t' th' plank.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > area< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Mandatory unique area name fer this area. Display'n two areas wit' th' same value fer < strong > area< / strong > be undefined.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > ay'con< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > < a href = "/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon" > Font Awesome ay'con name< / a > .< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onempty< / strong > < / td >
< td > < code > dis'ble< / code > < / td >
< td > Defines what t' do wit' th' button if th' rrrambl'n overlay be empty:< br > < br > - < code > dis'ble< / code > : Th' button be displayed 'n a disabled state.< br > - < code > hide< / code > : Th' button be removed.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidths< / strong > < / td >
< td > < code > show< / code > < / td >
< td > Th' act'n that should be executed if th' ship be displayed 'n th' given width:< br > < br > - < code > show< / code > : Th' button be displayed 'n its given area< br > - < code > hide< / code > : Th' button be removed.< br > - < code > area-XXX< / code > : Th' button be moved from its given area into th' area < code > XXX< / code > .< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthm< / strong > < / td >
< td > < code > show< / code > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthl< / strong > < / td >
< td > < code > show< / code > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > hint< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Arbitrary text displayed 'n th' tooltip.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > title< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Arbitrary text fer th' button.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< / tbody >
< / table >
< h3 id = "predefined-buttons" > Predefined Buttons< / h3 >
< p > Th' predefined buttons by th' theme (all other buttons besides th' < em > more< / em > an' < em > toc< / em > button 'n < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button" rel = "external" target = "_self" > < code > layouts/partials/topbar/button< / code > < / a > ).< / p >
< p > Call these from yer own redefined area templates if ye want t' use default button behavior.< / p >
< p > Th' < em > < varying> < / em > parameter values be different fer each button an' configured fer standard behavior as seen on this plank.< / p >
< h4 id = "parameter-2" > Parameter< / h4 >
< table >
< thead >
< tr >
2024-10-24 14:30:52 +00:00
< th > Name< / th >
< th > Default< / th >
< th > Notes< / th >
2024-10-13 14:26:50 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > plank< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Mandatory reference t' th' plank.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidths< / strong > < / td >
< td > < em > < varying> < / em > < / td >
< td > Th' act'n that should be executed if th' ship be displayed 'n th' given width:< br > < br > - < code > show< / code > : Th' button be displayed 'n its given area< br > - < code > hide< / code > : Th' button be removed.< br > - < code > area-XXX< / code > : Th' button be moved from its given area into th' area < code > XXX< / code > .< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthm< / strong > < / td >
< td > < em > < varying> < / em > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthl< / strong > < / td >
< td > < em > < varying> < / em > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< / tbody >
< / table >
< h3 id = "predefined-overlay-buttons" > Predefined Overlay-Buttons< / h3 >
< p > Th' predefined buttons by th' theme that open an overlay (the < em > more< / em > an' < em > toc< / em > button 'n < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button" rel = "external" target = "_self" > < code > layouts/partials/topbar/button< / code > < / a > ).< / p >
< p > Call these from yer own redefined area templates if ye want t' use default button behavior utiliz'n overlay functionality.< / p >
< p > Th' < em > < varying> < / em > parameter values be different fer each button an' configured fer standard behavior as seen on this plank.< / p >
< h4 id = "parameter-3" > Parameter< / h4 >
< table >
< thead >
< tr >
2024-10-24 14:30:52 +00:00
< th > Name< / th >
< th > Default< / th >
< th > Notes< / th >
2024-10-13 14:26:50 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > plank< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Mandatory reference t' th' plank.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onempty< / strong > < / td >
< td > < code > dis'ble< / code > < / td >
< td > Defines what t' do wit' th' button if th' rrrambl'n overlay be empty:< br > < br > - < code > dis'ble< / code > : Th' button be displayed 'n a disabled state.< br > - < code > hide< / code > : Th' button be removed.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidths< / strong > < / td >
< td > < em > < varying> < / em > < / td >
< td > Th' act'n that should be executed if th' ship be displayed 'n th' given width:< br > < br > - < code > show< / code > : Th' button be displayed 'n its given area< br > - < code > hide< / code > : Th' button be removed.< br > - < code > area-XXX< / code > : Th' button be moved from its given area into th' area < code > XXX< / code > .< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthm< / strong > < / td >
< td > < em > < varying> < / em > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > onwidthl< / strong > < / td >
< td > < em > < varying> < / em > < / td >
< td > See above.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< / tbody >
< / table >
< 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/reference/index.html" > Reference< / a > < / li >
< / ul >
< / div >
< / footer >
< / article >
< article class = "default" >
< header class = "headline" >
< / header >
< h1 id = "page-designs" > Page Designs< / h1 >
2024-12-31 17:03:38 +00:00
< p > Plank designs be used t' provide different layouts fer a given output format. If ye instead want t' < a href = "/hugo-theme-relearn/pir/configuration/customization/outputformats/index.html" > provide a new output format< / a > , th' theme got ye covered as well.< / p >
< p > A plank be displayed by exactly one plank design < em > fer each output format< / em > , be represented by < a href = "https://gohugo.io/content-management/front-matter/#type" rel = "external" target = "_self" > Hugo’ s reserved < code > type< / code > front matter< / a > an' uses < a href = "https://gohugo.io/templates/types/#content-view" rel = "external" target = "_self" > Hugo’ s rrrambl'n view mechanism< / a > .< / p >
2024-10-13 14:26:50 +00:00
< p > A plank design usually consists o'< / p >
< ul >
2024-12-31 17:03:38 +00:00
< li > < a href = "https://gohugo.io/templates/types/#content-view" rel = "external" target = "_self" > one or more rrrambl'n view files< / a > : depend'n on th' output format taken from < a href = "/hugo-theme-relearn/pir/configuration/customization/designs/index.html#partials" > th' list below< / a > < / li >
< li > < a href = "https://gohugo.io/content-management/archetypes/" rel = "external" target = "_self" > an optional archetype file< / a > : a template fer creat'n new Marrrkdown files wit' th' correct sett'n fer th' < code > type< / code > front matter an' any furhter parameter< / li >
< li > optional CSS styles< / li >
2024-10-13 14:26:50 +00:00
< / ul >
2024-12-01 21:17:58 +00:00
< details open class = " box cstyle notices warning" >
2024-12-29 19:15:31 +00:00
< summary class = "box-label" tabindex = "-1" >
2024-11-30 18:11:32 +00:00
< i class = "fa-fw fas fa-exclamation-triangle" > < / i >
Arrr
< / summary >
2024-10-13 14:26:50 +00:00
< div class = "box-content" >
2024-12-31 17:03:38 +00:00
< p > Don’ t use Hugo’ s reserved < code > type< / code > opt'n 'n yer modificat'ns fer other functionality!< / p >
2024-10-13 14:26:50 +00:00
< / div >
2024-11-30 18:11:32 +00:00
< / details >
2024-10-13 14:26:50 +00:00
< h2 id = "using-a-page-design" > Us'n a Plank Design< / h2 >
2024-12-31 17:03:38 +00:00
< p > Regardless o' shipped or custom plank designs, ye be < a href = "/hugo-theme-relearn/pir/authoring/frontmatter/designs/index.html" > us'n them 'n th' same way< / a > . Either by manually sett'n th' < code > type< / code > front matter t' th' value o' th' plank design or by us'n an archetype dur'n creat'n o' a new plank.< / p >
< p > If no < code > type< / code > be set 'n yer front matter or th' plank design doesn’ t exist fer a given output format, th' plank be treated as if < code > type='default'< / code > was set.< / p >
< p > Th' Relearrrn theme ships wit' th' plank designs < code > home< / code > , < code > chapter< / code > , an' < code > default< / code > fer th' HTML output format.< / p >
< p > Th' shipped < code > print< / code > an' < code > markdown< / code > output formats only display us'n th' < code > default< / code > plank design.< / p >
< h2 id = "creating-a-page-design" > Creat'n a Plank Design< / h2 >
< p > Suppose ye be writ'n a documentat'n ship fer some software. Each time a new release be created, ye be add'n a new releasenotes plank t' yer ship. Those planks should contain a common disclaimer at th' top. Ye neither want t' copy th' text into each new file nor want ye t' use a shortcode but create a plank design called < code > releasenotes< / code > .< / p >
2024-10-13 14:26:50 +00:00
< ol >
< li >
2024-12-31 17:03:38 +00:00
< p > Choose a name (here, < code > releasenotes< / code > )< / p >
2024-10-13 14:26:50 +00:00
< / li >
< li >
2024-12-31 17:03:38 +00:00
< p > Create a rrrambl'n view file at < code > layouts/releasenotes/views/article.html< / code > < / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "172fdaeabba697ac423fd7cc587c85da" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
2024-12-31 17:03:38 +00:00
data-tab-item="layoutsreleasenotesviewsarticlehtml"
2024-10-13 14:26:50 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('172fdaeabba697ac423fd7cc587c85da','layoutsreleasenotesviewsarticlehtml')"
2024-10-13 14:26:50 +00:00
>
2024-12-31 17:03:38 +00:00
< span class = "tab-nav-text" > layouts/releasenotes/views/article.html< / span >
2024-10-13 14:26:50 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-12-31 17:03:38 +00:00
data-tab-item="layoutsreleasenotesviewsarticlehtml"
2024-10-13 14:26:50 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-12-31 17:03:38 +00:00
< div class = "highlight wrap-code" hl_Lines = "6-8" > < pre tabindex = "0" class = "chroma" > < code class = "language-html" data-lang = "html" > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > article< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " releasenotes" < / span > < span class = "p" > > < / span >
2024-10-13 14:26:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > header< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " headline" < / span > < span class = "p" > > < / span >
2024-12-31 17:03:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " content-header.html" .}}
2024-10-13 14:26:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > header< / span > < span class = "p" > > < / span >
2024-12-31 17:03:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " heading-pre.html" .}}{{partial " head'n.html" .}}{{partial " heading-post.html" .}}
< / span > < / span > < span class = "line hl" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > p< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " disclaimer" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line hl" > < span class = "cl" > This software release comes without any warranty!
< / span > < / span > < span class = "line hl" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > p< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " article-content.html" .}}
2024-10-13 14:26:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > footer< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " footline" < / span > < span class = "p" > > < / span >
2024-12-31 17:03:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " content-footer.html" .}}
2024-10-13 14:26:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > footer< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > article< / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
2024-12-31 17:03:38 +00:00
< / div > < p > Th' marked lines be yer customizat'ns, th' rest o' th' file was copied over from th' default implementat'n o' < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/_default/views/article.html" rel = "external" target = "_self" > < code > layouts/_default/views/article.html< / code > < / a > < / p >
< p > In this file, ye can cust'mize th' plank structure as needed. For HTML based output formats, typically you’ ll want t':< / p >
2024-10-13 14:26:50 +00:00
< ul >
< li > Set a < code > class< / code > at th' < code > article< / code > element fer custom CSS styles< / li >
2024-12-31 17:03:38 +00:00
< li > Call < code > {{ partial " article-content.html" . }}< / code > t' show yer plank rrrambl'n< / li >
2024-10-13 14:26:50 +00:00
< / ul >
< / li >
< li >
2024-12-31 17:03:38 +00:00
< p > < em > Optional< / em > : create an archetype file at < code > archetypes/releasenotes.md< / code > < / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "88b1890a7c35b2076c5d27d67cacb6f3" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
2024-12-31 17:03:38 +00:00
data-tab-item="archetypesreleasenotesmd"
2024-10-13 14:26:50 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('88b1890a7c35b2076c5d27d67cacb6f3','archetypesreleasenotesmd')"
2024-10-13 14:26:50 +00:00
>
2024-12-31 17:03:38 +00:00
< span class = "tab-nav-text" > archetypes/releasenotes.md< / span >
2024-10-13 14:26:50 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-12-31 17:03:38 +00:00
data-tab-item="archetypesreleasenotesmd"
2024-10-13 14:26:50 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-12-31 17:03:38 +00:00
< 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 = "err" > +++< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > title< / span > < span class = "p" > =< / span > < span class = "s2" > " {{ replace .Name " < / span > < span class = "nx" > -< / span > < span class = "s2" > " " < / span > < span class = "s2" > " | title }}" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > type< / span > < span class = "p" > =< / span > < span class = "s2" > " releasenotes" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "err" > +++< / span >
2024-10-13 14:26:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" >
2024-12-31 17:03:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > This< / span > < span class = "nx" > be< / span > < span class = "nx" > a< / span > < span class = "nx" > new< / span > < span class = "nx" > releasenote< / span > < span class = "p" > .< / span > < / span > < / span > < / code > < / pre > < / div >
2024-10-13 14:26:50 +00:00
< / div >
< / div >
< / div >
< / div > < / li >
< li >
2024-12-31 17:03:38 +00:00
< p > < em > Optional< / em > : add CSS 'n th' file < code > layouts/partials/custom-header.html< / code > < / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "c1649f0b5258cd9b50350db239254cc3" >
2024-10-13 14:26:50 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialscustom-headerhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('c1649f0b5258cd9b50350db239254cc3','layoutspartialscustom-headerhtml')"
2024-10-13 14:26:50 +00:00
>
< span class = "tab-nav-text" > layouts/partials/custom-header.html< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="layoutspartialscustom-headerhtml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-html" data-lang = "html" > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
2024-12-31 17:03:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > .< / span > < span class = "nc" > releasenotes< / span > < span class = "p" > .< / span > < span class = "nc" > disclaimer< / span > < span class = "p" > {< / span >
2024-10-13 14:26:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "k" > background-color< / span > < span class = "p" > :< / span > < span class = "kc" > pink< / span > < span class = "p" > ;< / span >
2024-12-31 17:03:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "k" > font-size< / span > < span class = "p" > :< / span > < span class = "mi" > 72< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span >
2024-10-13 14:26:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < / li >
< / ol >
2024-12-31 17:03:38 +00:00
< h2 id = "partials" > Partials< / h2 >
< h3 id = "for-any-output-format" > For any Output Format< / h3 >
< p > These files be common fer all output formats.< / p >
< ul >
< li > < code > layouts/< DESIGN> /baseof.< FORMAT> < / code > : < em > Optional< / em > : Th' top most file ye could provide t' completely redefine th' whole design. No further partials will be called if ye don’ call them yourself< / li >
< / ul >
< 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 th' plank desingn fer th' HTML output format independently o' one another.< / p >
< ul >
< li > < code > layouts/< DESIGN> /views/article.html< / code > : < em > Optional< / em > : Controls how one page’ s rrrambl'n an' title be displayed< / li >
< li > < code > layouts/< DESIGN> /views/body.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/< DESIGN> /views/menu.html< / code > : < em > Optional< / em > : Defines th' sidebar menu layout< / li >
< / ul >
< p > For a real-world example, check out th' < code > changelog< / code > plank design implementat'n< / p >
2024-10-13 14:26:50 +00:00
< ul >
2024-12-31 17:03:38 +00:00
< li > < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/layouts/changelog/views/article.html" rel = "external" target = "_self" > < code > exampleSite/layouts/changelog/views/article.html< / code > < / a > < / li >
2024-12-31 19:57:26 +00:00
< / ul >
< h2 id = "migration-to-relearn-7-or-higher" > Migrat'n t' Relearrrn 7 or higher< / h2 >
< p > Previous t' Relearrrn 7, plank designs were defined by a proprietary solut'n unique t' th' theme. Depend'n on yer modificat'ns ye may have t' change some or all o' th' follow'n t' migrate t' Relearrrn 7’ s plank designs.< / p >
< ul >
< li >
< p > In all yer < code > *.md< / code > files, replace th' < code > archetype< / code > front matter wit' < code > type< / code > ; th' value stays th' same; don’ t forget yer archetype files if ye have some< / p >
< / li >
< li >
< p > Move yer files < code > layouts/partials/archetypes/< DESIGN> /article.html< / code > t' < code > layouts/< DESIGN> /views/article.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 >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "2cf64fee127acd5dce0e9a7627efe88b" >
2024-12-31 19:57:26 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialsarchetypesltdesigngtarticlehtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('2cf64fee127acd5dce0e9a7627efe88b','layoutspartialsarchetypesltdesigngtarticlehtml')"
2024-12-31 19:57:26 +00:00
>
< span class = "tab-nav-text" > layouts/partials/archetypes/< DESIGN> /article.html< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="layoutspartialsarchetypesltdesigngtarticlehtml"
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" > < < / span > < span class = "nt" > article< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " default" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > header< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " headline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-header.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > header< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " heading-pre.html" .}}{{partial " head'n.html" .}}{{partial " heading-post.html" .}}
< / 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" > < < / span > < span class = "nt" > footer< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " footline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-footer.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > footer< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > article< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line hl" > < span class = "cl" > {{- end }}< / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < p > < strong > New< / strong > :< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "80eeb57daa9ba1330261b764cfff08a4" >
2024-12-31 19:57:26 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutsltdesigngtviewsarticlehtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('80eeb57daa9ba1330261b764cfff08a4','layoutsltdesigngtviewsarticlehtml')"
2024-12-31 19:57:26 +00:00
>
< span class = "tab-nav-text" > layouts/< DESIGN> /views/article.html< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="layoutsltdesigngtviewsarticlehtml"
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" > < < / span > < span class = "nt" > article< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " default" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > header< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " headline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-header.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > header< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " heading-pre.html" .}}{{partial " head'n.html" .}}{{partial " heading-post.html" .}}
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line hl" > < span class = "cl" > {{ partial " article-content.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > footer< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " footline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-footer.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > footer< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > article< / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < / li >
2024-10-13 14:26:50 +00:00
< / 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 >
< article class = "default" >
< header class = "headline" >
< / header >
< h1 id = "output-formats" > Output Formats< / h1 >
2024-12-31 17:03:38 +00:00
< 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 >
2024-10-13 14:26:50 +00:00
< ol >
2024-12-31 17:03:38 +00:00
< 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" > ' index.email' < / 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" > ' text/html' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > name< / span > < span class = "p" > =< / span > < span class = "s1" > ' email' < / 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" > ' html' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' rss' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' email' < / 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" > ' html' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' rss' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' email' < / 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" > ' html' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' rss' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' email' < / 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" > " outputFormats" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " email" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " baseName" < / span > < span class = "p" > :< / span > < span class = "s2" > " index.email" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " isHTML" < / 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" > " mediaType" < / span > < span class = "p" > :< / span > < span class = "s2" > " text/html" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " name" < / span > < span class = "p" > :< / span > < span class = "s2" > " email" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " noUgly" < / 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" > " permalinkable" < / 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" > " outputs" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " home" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " html" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " rss" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " email" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > ],< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " page" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " html" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " rss" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " email" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > ],< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " section" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " html" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " rss" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " email" < / 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 >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "3947550f0262fe3d02b984ae92ee75b3" >
2024-12-31 17:03:38 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layouts_defaultbaseofemailhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('3947550f0262fe3d02b984ae92ee75b3','layouts_defaultbaseofemailhtml')"
2024-12-31 17:03:38 +00:00
>
< 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" > < !DOCTYPE html> < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > html< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > head< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > title< / span > < span class = "p" > > < / span > {{ .Title }}< span class = "p" > < /< / span > < span class = "nt" > title< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "na" > type< / span > < span class = "o" > =< / span > < span class = "s" > " text/css" < / span > < span class = "p" > > < / 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" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "na" > type< / span > < span class = "o" > =< / span > < span class = "s" > " text/css" < / span > < span class = "p" > > < / 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" > " /assets/css/chroma-relearn-light.css" < / 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" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > head< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > body< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > main< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line hl" > < span class = "cl" > {{- block " body" . }}{{ end }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > main< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > body< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > html< / span > < span class = "p" > > < / 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 >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "35092dc2bdfdb6cc108da9eb8dd2c3df" >
2024-12-31 17:03:38 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layouts_defaultviewsarticleemailhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('35092dc2bdfdb6cc108da9eb8dd2c3df','layouts_defaultviewsarticleemailhtml')"
2024-12-31 17:03:38 +00:00
>
< 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" > < < / span > < span class = "nt" > article< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " email" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > blockquote< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > View this article on < span class = "p" > < < / span > < span class = "nt" > a< / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " http://example.com{{ .RelPermalink }}" < / span > < span class = "p" > > < / span > our website< span class = "p" > < /< / span > < span class = "nt" > a< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > blockquote< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{ partial " article-content.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > article< / span > < span class = "p" > > < / 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 >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "e2552bca6a435338fa45c13274272221" >
2024-12-31 17:03:38 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layouts_defaultmarkuprender-imageemailhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('e2552bca6a435338fa45c13274272221','layouts_defaultmarkuprender-imageemailhtml')"
2024-12-31 17:03:38 +00:00
>
< 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 " 600x webp q75" }}
< / span > < / span > < span class = "line" > < span class = "cl" > {{- end }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > img< / span > < span class = "na" > src< / span > < span class = "o" > =< / span > < span class = "s" > " data:{{ $img.MediaType }};base64,{{ $img.Content | base64Encode }}" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- end }}< / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < / li >
2024-10-13 14:26:50 +00:00
< / ol >
2024-12-31 17:03:38 +00:00
< 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 >
2024-10-13 14:26:50 +00:00
< ul >
2024-12-31 17:03:38 +00:00
< li > < code > layouts/_default/views/article.< FORMAT> .html< / code > : < em > Optional< / em > : Controls how a page’ s rrrambl'n an' title be displayed< / li >
2024-12-31 19:57:26 +00:00
< li > < code > layouts/_default/views/body.< FORMAT> .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 >
2024-12-31 17:03:38 +00:00
< li > < code > layouts/_default/views/menu.< FORMAT> .html< / code > : < em > Optional< / em > : Defines th' sidebar menu layout< / li >
< li > < code > layouts/_default/views/storeOutputFormat.< FORMAT> .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 >
2024-10-13 14:26:50 +00:00
< / ul >
2024-12-31 17:03:38 +00:00
< p > For a real-world example, check out th' < code > print< / code > output format implementat'n< / p >
2024-10-13 14:26:50 +00:00
< 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 >
2024-12-31 17:03:38 +00:00
< / ul >
< h3 id = "for-non-html-output-formats" > For Non-HTML Output Formats< / h3 >
< ul >
< li > < code > layouts/_default/list.< FORMAT> < / code > : < em > Mandatory< / em > : Controls how sections be displayed< / li >
< li > < code > layouts/_default/single.< FORMAT> < / code > : < em > Mandatory< / em > : Controls how planks be displayed< / li >
< li > < code > layouts/_default/baseof.< FORMAT> < / code > : < em > Optional< / em > : Controls how sections an' planks be displayed. If not provided, ye have t' provide yer implementat'n 'n < code > list.< FORMAT> < / code > an' < code > single.< FORMAT> < / 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 >
2024-12-31 19:57:26 +00:00
< / 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.< FORMAT> .html< / code > t' < code > layouts/_default/views/article.< FORMAT> .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 >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "3d00011fe6ad622971c1525d635e68b0" >
2024-12-31 19:57:26 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialsarticleltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('3d00011fe6ad622971c1525d635e68b0','layoutspartialsarticleltformatgthtml')"
2024-12-31 19:57:26 +00:00
>
< span class = "tab-nav-text" > layouts/partials/article.< FORMAT> .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" > < < / span > < span class = "nt" > article< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " default" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > header< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " headline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-header.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > header< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " heading-pre.html" .}}{{partial " head'n.html" .}}{{partial " heading-post.html" .}}
< / 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" > < < / span > < span class = "nt" > footer< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " footline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-footer.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > footer< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > article< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line hl" > < span class = "cl" > {{- end }}< / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < p > < strong > New< / strong > :< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "a36828bd2db47e8e661f88aa1bb01f16" >
2024-12-31 19:57:26 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layouts_defaultviewsarticleltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('a36828bd2db47e8e661f88aa1bb01f16','layouts_defaultviewsarticleltformatgthtml')"
2024-12-31 19:57:26 +00:00
>
< span class = "tab-nav-text" > layouts/_default/views/article.< FORMAT> .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" > < < / span > < span class = "nt" > article< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " default" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > header< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " headline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-header.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > header< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{partial " heading-pre.html" .}}{{partial " head'n.html" .}}{{partial " heading-post.html" .}}
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line hl" > < span class = "cl" > {{ partial " article-content.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > footer< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " footline" < / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > {{- partial " content-footer.html" . }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > footer< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > article< / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < / 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.< FORMAT> .html< / code > , < code > layouts/partials/footer.< FORMAT> .html< / code > t' < code > layouts/_default/baseof.< FORMAT> .html< / code > < / p >
< p > < strong > Old< / strong > :< / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "a7e2c2bc9f8d74c5c44c4da3b5634546" >
2024-12-31 19:57:26 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialsheaderltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('a7e2c2bc9f8d74c5c44c4da3b5634546','layoutspartialsheaderltformatgthtml')"
2024-12-31 19:57:26 +00:00
>
< span class = "tab-nav-text" > layouts/partials/header.< FORMAT> .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" > < !DOCTYPE html> < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > html< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > head< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > title< / span > < span class = "p" > > < / span > {{ .Title }}< span class = "p" > < /< / span > < span class = "nt" > title< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "na" > type< / span > < span class = "o" > =< / span > < span class = "s" > " text/css" < / span > < span class = "p" > > < / 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" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "na" > type< / span > < span class = "o" > =< / span > < span class = "s" > " text/css" < / span > < span class = "p" > > < / 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" > " /assets/css/chroma-relearn-light.css" < / 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" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > head< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > body< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > main< / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
2025-01-01 19:12:57 +00:00
< / div > < div class = "tab-panel" data-tab-group = "f17e4ea55d678dd2c98f06b6b51416e1" >
2024-12-31 19:57:26 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialsfooterltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('f17e4ea55d678dd2c98f06b6b51416e1','layoutspartialsfooterltformatgthtml')"
2024-12-31 19:57:26 +00:00
>
< span class = "tab-nav-text" > layouts/partials/footer.< FORMAT> .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" > < /< / span > < span class = "nt" > main< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > body< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > html< / span > < span class = "p" > > < / 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.< FORMAT> .html< / code > an' th' lower part be from yer < code > footer.< FORMAT> .html< / code > .< / p >
< p > Th' marked line needs t' be added, so yer output format uses a potential < code > layouts/_default/views/article.< FORMAT> .html< / code > < / p >
2025-01-01 19:12:57 +00:00
< div class = "tab-panel" data-tab-group = "1cb83865a2755b6eef80906bc7ba4fbf" >
2024-12-31 19:57:26 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layouts_defaultbaseofltformatgthtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2025-01-01 19:12:57 +00:00
onclick="switchTab('1cb83865a2755b6eef80906bc7ba4fbf','layouts_defaultbaseofltformatgthtml')"
2024-12-31 19:57:26 +00:00
>
< span class = "tab-nav-text" > layouts/_default/baseof.< FORMAT> .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" > < !DOCTYPE html> < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > html< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > head< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > title< / span > < span class = "p" > > < / span > {{ .Title }}< span class = "p" > < /< / span > < span class = "nt" > title< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "na" > type< / span > < span class = "o" > =< / span > < span class = "s" > " text/css" < / span > < span class = "p" > > < / 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" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > style< / span > < span class = "na" > type< / span > < span class = "o" > =< / span > < span class = "s" > " text/css" < / span > < span class = "p" > > < / 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" > " /assets/css/chroma-relearn-light.css" < / 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" > < /< / span > < span class = "nt" > style< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > head< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > body< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > main< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line hl" > < span class = "cl" > {{- block " body" . }}{{ end }}
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > main< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > body< / span > < span class = "p" > > < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > < /< / span > < span class = "nt" > html< / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div > < / li >
2024-10-13 14:26:50 +00:00
< / 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 >
< article class = "default" >
< header class = "headline" >
< div class = "R-taxonomy taxonomy-tags cstyle tags" title = "Tag-a-taggs" style = "--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);" >
< ul >
< li > < a class = "term-link" href = "/hugo-theme-relearn/pir/tags/taxonomy/index.html" > Taxonomy< / a > < / li >
< / ul >
< / div >
< / header >
< h1 id = "taxonomies" > Taxonomies< / h1 >
< p > This plank explains how t' show custom taxonomies on yer planks.< / p >
< p > For more details, check th' official docs on < a href = "https://gohugo.io/content-management/taxonomies/#configure-taxonomies" rel = "external" target = "_self" > sett'n up custom taxonomies< / a > an' < a href = "https://gohugo.io/content-management/taxonomies/#assign-terms-to-content" rel = "external" target = "_self" > us'n them 'n yer rrrambl'n< / a > .< / p >
< h2 id = "default-behavior" > Default Behavior< / h2 >
< p > Th' Relearrrn theme automatically shows Hugo’ s < a href = "https://gohugo.io/content-management/taxonomies/#default-taxonomies" rel = "external" target = "_self" > default taxonomies< / a > < em > tags< / em > an' < em > categories< / em > out o' th' box.< / p >
< ul >
< li > Tags appear at th' top o' th' plank 'n alphabetical order 'n form o' baggage tags.< / li >
< li > Categories appear at th' bottom o' th' plank 'n alphabetical order as a list prefixed wit' an ay'con.< / li >
< / ul >
< p > Each item links t' a plank show'n all articles wit' that term.< / p >
< h2 id = "setting-up-custom-taxonomies" > Sett'n Up Custom Taxonomies< / h2 >
< p > T' add custom taxonomies, update yer < code > hugo.toml< / code > file. Ye also have t' add th' default taxonomies if ye want t' use them.< / p >
< div class = "tab-panel" data-tab-group = "config-code" >
< div class = "tab-nav" >
< div class = "tab-nav-title" > hugo.< / div >
< button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > taxonomies< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > category< / span > < span class = "p" > =< / span > < span class = "s1" > ' categories' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > mycustomtag< / span > < span class = "p" > =< / span > < span class = "s1" > ' mycustomtags' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > tag< / span > < span class = "p" > =< / span > < span class = "s1" > ' tags' < / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > taxonomies< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > category< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > categories< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > mycustomtag< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > mycustomtags< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > tag< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > tags< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " taxonomies" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " category" < / span > < span class = "p" > :< / span > < span class = "s2" > " categories" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " mycustomtag" < / span > < span class = "p" > :< / span > < span class = "s2" > " mycustomtags" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " tag" < / span > < span class = "p" > :< / span > < span class = "s2" > " tags" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div >
< / div >
< / div >
< / div >
< / div >
< h2 id = "showing-custom-taxonomies" > Show'n Custom Taxonomies< / h2 >
< p > T' display yer custom taxonomy terms, add this t' yer plank (usually 'n < code > layouts/partials/content-footer.html< / code > ):< / p >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-go" data-lang = "go" > < span class = "line" > < span class = "cl" > < span class = "p" > {{< / span > < span class = "nx" > partial< / span > < span class = "s" > " term-list.html" < / span > < span class = "p" > (< / span > < span class = "nx" > dict< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s" > " page" < / span > < span class = "p" > .< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s" > " taxonomy" < / span > < span class = "s" > " mycustomtags" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s" > " icon" < / span > < span class = "s" > " layer-group" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > )< / span > < span class = "p" > }}< / span > < / span > < / span > < / code > < / pre > < / div >
< h3 id = "parameter" > Parameter< / h3 >
< table >
< thead >
< tr >
2024-10-24 14:30:52 +00:00
< th > Name< / th >
< th > Default< / th >
< th > Notes< / th >
2024-10-13 14:26:50 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > plank< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Mandatory reference t' th' plank.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > taxonomy< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Th' plural name o' th' taxonomy t' display as used 'n yer front matter.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > class< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > Additional CSS classes set on th' outermost generated HTML element.< br > < br > If set t' < code > tags< / code > ye will get th' visuals fer display'n th' < em > tags< / em > taxonomy, otherwise it will be a simple list o' links as fer th' < em > categories< / em > taxonomy.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > style< / strong > < / td >
< td > < code > primary< / code > < / td >
< td > Th' style scheme used if < strong > class< / strong > be < code > tags< / code > .< br > < br > - by severity: < code > caut'n< / 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 >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > color< / strong > < / td >
< td > see notes< / td >
< td > Th' < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel = "external" target = "_self" > CSS color value< / a > t' be used if < strong > class< / strong > be < code > tags< / code > . If not set, th' chosen color depends on th' < strong > style< / strong > . Any given value will overwrite th' default.< br > < br > - fer severity styles: a nice match'n color fer th' severity< br > - fer all other styles: th' correspond'n color< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< tr >
2024-10-24 14:30:52 +00:00
< td > < strong > ay'con< / strong > < / td >
< td > < em > < empty> < / em > < / td >
< td > An optional < a href = "/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon" > Font Awesome ay'con name< / a > set t' th' left o' th' list.< / td >
2024-10-13 14:26:50 +00:00
< / tr >
< / tbody >
< / table >
< 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 >
< li > < a class = "term-link" href = "/hugo-theme-relearn/pir/categories/reference/index.html" > Reference< / a > < / li >
< / ul >
< / div >
< / footer >
< / article >
< / section >
< / div >
< / main >
< / div >
2025-01-01 19:12:57 +00:00
< script src = "/hugo-theme-relearn/js/clipboard.min.js?1735758767" defer > < / script >
< script src = "/hugo-theme-relearn/js/perfect-scrollbar.min.js?1735758767" defer > < / script >
< script src = "/hugo-theme-relearn/js/theme.js?1735758767" defer > < / script >
2024-10-13 14:26:50 +00:00
< / body >
< / html >
