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-02 21:41:58 +00:00
< meta name = "generator" content = "Relearn 7.3.0+4f9b02f2e43556319e73b38edde19e1d262757c1" >
2024-10-13 14:26:50 +00:00
< meta name = "description" content = "Using and extending page designs" >
< 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 = "Page Designs :: Cap'n Hugo Relearrrn Theme" >
< meta name = "twitter:description" content = "Using and extending page designs" >
< meta property = "og:url" content = "https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/designs/index.html" >
< meta property = "og:site_name" content = "Cap'n Hugo Relearrrn Theme" >
< meta property = "og:title" content = "Page Designs :: Cap'n Hugo Relearrrn Theme" >
< meta property = "og:description" content = "Using and extending page designs" >
< meta property = "og:locale" content = "art_x_pir" >
< meta property = "og:type" content = "article" >
< meta property = "article:section" content = "Configurrrat'n" >
< meta property = "og:image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
< meta itemprop = "name" content = "Page Designs :: Cap'n Hugo Relearrrn Theme" >
< meta itemprop = "description" content = "Using and extending page designs" >
2024-12-31 19:57:26 +00:00
< meta itemprop = "wordCount" content = "767" >
2024-10-13 14:26:50 +00:00
< meta itemprop = "image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
< meta itemprop = "keywords" content = "Explanation,Howto" >
< title > Page Designs :: Cap' n Hugo Relearrrn Theme< / title >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/designs/index.html" rel = "alternate" hreflang = "x-default" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/configuration/customization/designs/index.html" rel = "alternate" hreflang = "en" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/designs/index.html" rel = "alternate" hreflang = "art-x-pir" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/customization/designs/index.html" rel = "canonical" type = "text/html" title = "Page Designs :: Cap'n Hugo Relearrrn Theme" >
< link href = "/hugo-theme-relearn/pir/configuration/customization/designs/index.xml" rel = "alternate" type = "application/rss+xml" title = "Page Designs :: Cap'n Hugo Relearrrn Theme" >
2025-01-02 21:41:58 +00:00
< link href = "/hugo-theme-relearn/images/logo.svg?1735854108" rel = "icon" type = "image/svg+xml" >
< link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1735854108" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1735854108" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/auto-complete.css?1735854108" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/auto-complete.css?1735854108" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/perfect-scrollbar.min.css?1735854108" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/theme.min.css?1735854108" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/format-print.min.css?1735854108" rel = "stylesheet" id = "R-format-style" >
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-02 21:41:58 +00:00
< script src = "/hugo-theme-relearn/js/variant.js?1735854108" > < / 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/designs/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" >
< nav class = "TableOfContents" >
< ul >
< li > < a href = "#using-a-page-design" > Us'n a Plank Design< / a > < / li >
2024-12-31 17:03:38 +00:00
< li > < a href = "#creating-a-page-design" > Creat'n a Plank Design< / a > < / li >
< li > < a href = "#partials" > Partials< / a >
2024-10-13 14:26:50 +00:00
< ul >
2024-12-31 17:03:38 +00:00
< li > < a href = "#for-any-output-format" > For any Output Format< / a > < / li >
< li > < a href = "#for-html-output-formats" > For HTML Output Formats< / a > < / li >
2024-10-13 14:26:50 +00:00
< / ul >
< / li >
2024-12-31 19:57:26 +00:00
< li > < a href = "#migration-to-relearn-7-or-higher" > Migrat'n t' Relearrrn 7 or higher< / a > < / li >
2024-10-13 14:26:50 +00:00
< / ul >
< / nav >
< / div >
< / div >
< / div >
< / div >
< ol class = "topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype = "http://schema.org/BreadcrumbList" > < li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< a itemprop = "item" href = "/hugo-theme-relearn/pir/configuration/index.html" > < span itemprop = "name" > Configurrrat' n< / span > < / a > < meta itemprop = "position" content = "1" > > < / li > < li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< a itemprop = "item" href = "/hugo-theme-relearn/pir/configuration/customization/index.html" > < span itemprop = "name" > Customization< / span > < / a > < meta itemprop = "position" content = "2" > > < / li > < li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< span itemprop = "name" > Page Designs< / span > < meta itemprop = "position" content = "3" > < / li >
< / ol >
< div class = "topbar-area topbar-area-end" data-area = "end" >
< div class = "topbar-button topbar-button-edit" data-content-empty = "disable" data-width-s = "area-more" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/configuration/customization/designs/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/designs/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/customization/topbar/index.html" title = "Topbarrr (🡒)" > < 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/outputformats/index.html" title = "Output Formats (🡐)" > < 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 = "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-02 21:41:58 +00:00
< div class = "tab-panel" data-tab-group = "563cc0049c52a825c99988f87d4c8ade" >
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-02 21:41:58 +00:00
onclick="switchTab('563cc0049c52a825c99988f87d4c8ade','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-02 21:41:58 +00:00
< div class = "tab-panel" data-tab-group = "d71193f90aa699519d6cf9a9187060ba" >
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-02 21:41:58 +00:00
onclick="switchTab('d71193f90aa699519d6cf9a9187060ba','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-02 21:41:58 +00:00
< div class = "tab-panel" data-tab-group = "7633f69454d1a09c16d9d7d4137085f3" >
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-02 21:41:58 +00:00
onclick="switchTab('7633f69454d1a09c16d9d7d4137085f3','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-02 21:41:58 +00:00
< div class = "tab-panel" data-tab-group = "7524ffe45f644d28cceac4ebd3e04de8" >
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-02 21:41:58 +00:00
onclick="switchTab('7524ffe45f644d28cceac4ebd3e04de8','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-02 21:41:58 +00:00
< div class = "tab-panel" data-tab-group = "d119eb653c0337245df7dc2e6e8b2ae1" >
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-02 21:41:58 +00:00
onclick="switchTab('d119eb653c0337245df7dc2e6e8b2ae1','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 >
< / div >
< / main >
< / div >
2025-01-02 21:41:58 +00:00
< script src = "/hugo-theme-relearn/js/clipboard.min.js?1735854108" defer > < / script >
< script src = "/hugo-theme-relearn/js/perfect-scrollbar.min.js?1735854108" defer > < / script >
< script src = "/hugo-theme-relearn/js/theme.js?1735854108" defer > < / script >
2024-10-13 14:26:50 +00:00
< / body >
< / html >
