2022-04-02 13:30:16 +00:00
<!DOCTYPE html>
2022-11-01 01:10:49 +00:00
< html lang = "en" dir = "ltr" >
2022-04-02 13:30:16 +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-03-29 23:34:21 +00:00
< meta name = "generator" content = "Hugo 0.124.1" >
2024-03-18 21:55:42 +00:00
< meta name = "generator" content = "Relearn 5.26.2+tip" >
2022-04-02 13:30:16 +00:00
< meta name = "description" content = "Documentation for Hugo Relearn Theme" >
2023-10-10 21:22:41 +00:00
< meta name = "author" content = "Sören Weber" >
2023-10-11 16:03:03 +00:00
< meta name = "twitter:card" content = "summary_large_image" >
2024-02-24 13:03:50 +00:00
< meta name = "twitter:image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
2023-10-11 16:03:03 +00:00
< meta name = "twitter:title" content = "Customization :: Hugo Relearn Theme" >
< meta name = "twitter:description" content = "Documentation for Hugo Relearn Theme" >
2023-10-11 15:32:39 +00:00
< meta property = "og:title" content = "Customization :: Hugo Relearn Theme" >
< meta property = "og:description" content = "Documentation for Hugo Relearn Theme" >
< meta property = "og:type" content = "website" >
2024-02-24 13:03:50 +00:00
< meta property = "og:url" content = "https://mcshelby.github.io/hugo-theme-relearn/basics/customization/index.html" >
< meta property = "og:image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
2023-10-11 15:32:39 +00:00
< meta property = "og:site_name" content = "Hugo Relearn Theme" >
2022-04-02 13:30:16 +00:00
< title > Customization :: Hugo Relearn Theme< / title >
2024-02-24 13:03:50 +00:00
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel = "alternate" hreflang = "x-default" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel = "alternate" hreflang = "en" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel = "alternate" hreflang = "art-pir" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel = "canonical" type = "text/html" title = "Customization :: Hugo Relearn Theme" >
2024-02-24 12:50:21 +00:00
< link href = "/hugo-theme-relearn/basics/customization/index.xml" rel = "alternate" type = "application/rss+xml" title = "Customization :: Hugo Relearn Theme" >
2024-04-04 21:31:21 +00:00
< link href = "/hugo-theme-relearn/images/logo.svg?1712266275" rel = "icon" type = "image/svg+xml" >
2022-07-15 13:20:02 +00:00
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how - to - use -->
2024-04-04 21:31:21 +00:00
< link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1712266276" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1712266276" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/nucleus.css?1712266276" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/auto-complete.css?1712266276" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/auto-complete.css?1712266276" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/perfect-scrollbar.min.css?1712266276" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/fonts.css?1712266276" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fonts.css?1712266276" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/theme.css?1712266276" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/theme-relearn-auto.css?1712266276" rel = "stylesheet" id = "R-variant-style" >
< link href = "/hugo-theme-relearn/css/chroma-relearn-auto.css?1712266276" rel = "stylesheet" id = "R-variant-chroma-style" >
< link href = "/hugo-theme-relearn/css/variant.css?1712266276" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/print.css?1712266276" rel = "stylesheet" media = "print" >
< link href = "/hugo-theme-relearn/css/format-print.css?1712266276" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/ie.css?1712266276" rel = "stylesheet" >
< script src = "/hugo-theme-relearn/js/url.js?1712266276" > < / script >
< script src = "/hugo-theme-relearn/js/variant.js?1712266276" > < / script >
2024-03-16 13:44:28 +00:00
< script >
2023-11-16 22:53:34 +00:00
window.relearn = window.relearn || {};
2024-03-18 20:59:19 +00:00
window.relearn.relBasePath='..\/..';
window.relearn.relBaseUri='..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
2024-03-16 12:40:13 +00:00
window.index_js_url="/hugo-theme-relearn/index.search.js";
2023-11-16 22:53:34 +00:00
// variant stuff
2023-12-03 14:23:32 +00:00
window.relearn.themeVariantModifier='';
2023-11-23 00:05:57 +00:00
window.variants & & variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
2023-11-16 22:53:34 +00:00
// translations
window.T_Copy_to_clipboard = `Copy to clipboard`;
window.T_Copied_to_clipboard = `Copied to clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
window.T_Reset_view = `Reset view`;
window.T_View_reset = `View reset!`;
window.T_No_results_found = `No results found for "{0}"`;
window.T_N_results_found = `{1} results found for "{0}"`;
2022-04-02 13:30:16 +00:00
< / script >
2022-12-02 15:05:54 +00:00
< style >
2023-09-23 08:19:35 +00:00
#R-body img.bg-white {
2022-12-02 15:05:54 +00:00
background-color: white;
}
< / style >
2022-04-02 13:30:16 +00:00
< / head >
2024-02-24 12:50:21 +00:00
< body class = "mobile-support print disableInlineCopyToClipboard" data-url = "/hugo-theme-relearn/basics/customization/index.html" >
2023-09-23 08:19:35 +00:00
< div id = "R-body" class = "default-animation" >
< div id = "R-body-overlay" > < / div >
< nav id = "R-topbar" >
2023-09-18 18:49:44 +00:00
< div class = "topbar-wrapper" >
2023-09-13 21:30:04 +00:00
< div class = "topbar-sidebar-divider" > < / div >
2023-09-18 18:49:44 +00:00
< div class = "topbar-area topbar-area-start" data-area = "start" >
2023-12-05 07:41:41 +00:00
< 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 >
2023-09-12 21:10:21 +00:00
< / div >
2023-09-13 21:30:04 +00:00
< / div >
2023-09-20 22:28:27 +00:00
< ol class = "topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype = "http://schema.org/BreadcrumbList" > < li
2024-02-24 12:50:21 +00:00
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< a itemprop = "item" href = "/hugo-theme-relearn/basics/index.html" > < span itemprop = "name" > Basics< / span > < / a > < meta itemprop = "position" content = "1" > > < / li > < li
2023-09-23 22:28:49 +00:00
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< span itemprop = "name" > Customization< / span > < meta itemprop = "position" content = "2" > < / li >
2023-09-13 21:30:04 +00:00
< / ol >
2023-09-18 18:49:44 +00:00
< div class = "topbar-area topbar-area-end" data-area = "end" >
2023-09-12 21:19:47 +00:00
< / div >
2022-04-02 13:30:16 +00:00
< / div >
< / nav >
2023-09-23 08:19:35 +00:00
< div id = "R-main-overlay" > < / div >
< main id = "R-body-inner" class = "highlightable default" tabindex = "-1" >
2022-04-02 13:30:16 +00:00
< div class = "flex-block-wrapper" >
2022-11-07 19:58:08 +00:00
< article class = "default" >
2023-05-19 18:46:07 +00:00
< header class = "headline" >
< / header >
2022-11-13 21:34:47 +00:00
< h1 id = "customization" > Customization< / h1 >
2022-07-05 22:16:52 +00:00
2024-02-24 15:53:20 +00:00
< h2 id = "usage-scenarios" > Usage scenarios< / h2 >
< p > The theme is usable in different scenarios, requiring the following mandatory settings in your < code > hugo.toml< / code > . All settings not mentioned can be set to your liking.< / p >
< h3 id = "public-webserver-from-root" > Public Webserver from Root< / h3 >
2024-03-02 10:05:50 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "nx" > baseURL< / span > < span class = "p" > =< / span > < span class = "s1" > ' https://example.com/' < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2024-03-02 10:05:50 +00:00
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< 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" > baseURL< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > https://example.com/< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2024-03-02 10:05:50 +00:00
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " baseURL" < / span > < span class = "p" > :< / span > < span class = "s2" > " https://example.com/" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< / div >
< / div >
< h3 id = "public-webserver-from-subdirectory" > Public Webserver from Subdirectory< / h3 >
< 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" >
2024-03-11 20:44:09 +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 = "nx" > baseURL< / span > < span class = "p" > =< / span > < span class = "s1" > ' https://example.com/mysite/' < / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > relativeURLs< / 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" >
2024-03-11 20:44:09 +00:00
< 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" > baseURL< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > https://example.com/mysite/< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > relativeURLs< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " baseURL" < / span > < span class = "p" > :< / span > < span class = "s2" > " https://example.com/mysite/" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " relativeURLs" < / span > < span class = "p" > :< / span > < span class = "kc" > false< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< / div >
< / div >
< h3 id = "private-webserver-lan" > Private Webserver (LAN)< / h3 >
2024-02-24 15:53:20 +00:00
< p > The same settings as with any of the public webserver usage scenarios or< / p >
2024-03-02 10:05:50 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "nx" > baseURL< / span > < span class = "p" > =< / span > < span class = "s1" > ' /' < / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > relativeURLs< / span > < span class = "p" > =< / span > < span class = "kc" > true< / 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" >
2024-03-11 20:44:09 +00:00
< 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" > baseURL< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > /< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > relativeURLs< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " baseURL" < / span > < span class = "p" > :< / span > < span class = "s2" > " /" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " relativeURLs" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< / div >
< / div >
< h3 id = "file-system" > File System< / h3 >
< 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" >
2024-03-11 20:44:09 +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 = "nx" > baseURL< / span > < span class = "p" > =< / span > < span class = "s1" > ' /' < / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > relativeURLs< / span > < span class = "p" > =< / span > < span class = "kc" > true< / 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" >
2024-03-11 20:44:09 +00:00
< 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" > baseURL< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > /< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > relativeURLs< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " baseURL" < / span > < span class = "p" > :< / span > < span class = "s2" > " /" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " relativeURLs" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< / div >
< / div >
2024-02-24 15:53:20 +00:00
< div class = "box notices cstyle warning" >
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-triangle" > < / i > Warning< / div >
2023-11-20 23:54:13 +00:00
< div class = "box-content" >
2024-02-24 15:53:20 +00:00
< p > Using a < code > baseURL< / code > with a subdirectory and < code > relativeURLs=true< / code > are mutally exclusive due to the fact, that < a href = "https://github.com/gohugoio/hugo/issues/12130" target = "_blank" > Hugo does not apply the < code > baseURL< / code > correctly< / a > .< / p >
< p > If you need both, you have to generate your site twice but with different settings into separate directories.< / p >
2024-02-24 12:50:21 +00:00
< / div >
< / div >
< div class = "box notices cstyle note" >
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-circle" > < / i > Note< / div >
< div class = "box-content" >
2024-02-24 15:53:20 +00:00
< p > Sublemental pages (like < code > sitemap.xml< / code > , < code > rss.xml< / code > ) and generated social media links inside of your pages will always be generated with absolute URLs and will not work if you set < code > relativeURLs=true< / code > .< / p >
2023-11-20 23:54:13 +00:00
< / div >
< / div >
2024-02-24 14:39:53 +00:00
2024-02-24 15:53:20 +00:00
< div class = "box notices cstyle info" >
< div class = "box-label" > < i class = "fa-fw fas fa-info-circle" > < / i > Info< / div >
2024-02-24 14:39:53 +00:00
< div class = "box-content" >
2024-02-24 15:53:20 +00:00
< p > If you are using < code > uglyURLs=false< / code > (Hugo’ s default), the theme will append an additional < code > index.html< / code > to all page links to make your site be servable from the file system. If you don’ t care about the file system and only serve your page via a webserver you can generate the links without this:< / p >
2024-03-02 10:05:50 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-02-24 15:53:20 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > disableExplicitIndexURLs< / span > < span class = "p" > =< / span > < span class = "kc" > true< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2024-03-02 10:05:50 +00:00
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< 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" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > disableExplicitIndexURLs< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > true< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / 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" > " disableExplicitIndexURLs" < / span > < span class = "p" > :< / span > < span class = "kc" > true< / 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 >
< / div >
2024-02-24 14:39:53 +00:00
< / div >
2023-11-20 23:54:13 +00:00
< h2 id = "activate-search" > Activate search< / h2 >
2023-11-29 23:15:02 +00:00
< p > If not already present, add the following lines in your < code > hugo.toml< / code > file.< / p >
2024-03-02 10:05:50 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "p" > [< / span > < span class = "nx" > outputs< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / 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" > ' search' < / 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" >
2024-03-11 20:44:09 +00:00
< 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" > outputs< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / 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" > search< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / 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" > " search" < / 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 will generate a search index file at the root of your public folder ready to be consumed by the Lunr search library. Note that the < code > search< / code > outputformat was named < code > json< / code > in previous releases but was implemented differently. Although < code > json< / code > still works, it is now deprecated.< / p >
2024-02-24 15:53:20 +00:00
< div class = "box notices cstyle note" >
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-circle" > < / i > Note< / div >
< div class = "box-content" >
< p > If you want to use the search feature from the file system, migrating from an older installation of the theme, make sure to change your outputformat for the homepage from the now deprecated < code > json< / code > to < code > search< / code > < a href = "/hugo-theme-relearn/basics/customization/index.html#activate-search" > as seen below< / a > .< / p >
< / div >
< / div >
2023-11-20 23:54:13 +00:00
< h3 id = "activate-dedicated-search-page" > Activate dedicated search page< / h3 >
2024-02-10 22:24:12 +00:00
< p > You can add a dedicated search page for your page by adding the < code > searchpage< / code > outputformat to your home page by adding the following lines in your < code > hugo.toml< / code > file. This will cause Hugo to generate a new file < code > http://example.com/mysite/search.html< / code > .< / p >
2024-03-02 10:05:50 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "p" > [< / span > < span class = "nx" > outputs< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / 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" > ' search' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' searchpage' < / 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" >
2024-03-11 20:44:09 +00:00
< 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" > outputs< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / 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" > search< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > searchpage< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / 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" > " search" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " searchpage" < / 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 > You can access this page by either clicking on the magnifier glass or by typing some search term and pressing < code > ENTER< / code > inside of the menu’ s search box .< / p >
2024-04-04 21:31:21 +00:00
< p > < a href = "#R-image-a182b5e6e020c4ccc54f63495649beb7" class = "lightbox-link" > < img alt = "Screenshot of the dedicated search page" class = "bg-white border lazy lightbox noshadow figure-image" loading = "lazy" src = "/hugo-theme-relearn/basics/customization/search_page.png?&width=60pc" style = " height: auto; width: 60pc;" > < / a >
< a href = "javascript:history.back();" class = "lightbox-back" id = "R-image-a182b5e6e020c4ccc54f63495649beb7" > < img alt = "Screenshot of the dedicated search page" class = "bg-white border lazy lightbox noshadow lightbox-image" loading = "lazy" src = "/hugo-theme-relearn/basics/customization/search_page.png?&width=60pc" > < / a > < / p >
2023-06-03 22:20:43 +00:00
2022-05-29 21:00:53 +00:00
< div class = "box notices cstyle note" >
2022-12-01 00:38:08 +00:00
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-circle" > < / i > Note< / div >
< div class = "box-content" >
2023-06-04 22:25:27 +00:00
2023-11-29 23:15:02 +00:00
< p > To have Hugo create the dedicated search page successfully, you must not generate the URL < code > http://example.com/mysite/search.html< / code > from your own content. This can happen if you set < code > uglyURLs=true< / code > in your < code > hugo.toml< / code > and defining a Markdown file < code > content/search.md< / code > .< / p >
2023-11-20 23:54:13 +00:00
< p > To make sure, there is no duplicate content for any given URL of your project, run < code > hugo --printPathWarnings< / code > .< / p >
2023-06-03 09:12:46 +00:00
< / div >
2022-04-02 13:30:16 +00:00
< / div >
2023-11-20 23:54:13 +00:00
< h2 id = "activate-print-support" > Activate print support< / h2 >
2024-02-10 22:24:12 +00:00
< p > You can activate print support to add the capability to print whole chapters or even the complete site. Just add the < code > print< / code > output format to your home, section and page in your < code > hugo.toml< / code > as seen below:< / p >
2024-03-02 10:05:50 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "p" > [< / span > < span class = "nx" > outputs< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / 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" > ' print' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' search' < / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > page< / 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" > ' print' < / 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" > ' print' < / 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" >
2024-03-11 20:44:09 +00:00
< 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" > outputs< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / 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" > print< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > search< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > page< / 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" > print< / 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" > print< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / 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" > " print" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " search" < / 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" > " print" < / 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" > " print" < / 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 will add a little printer icon in the top bar. It will switch the page to print preview when clicked. You can then send this page to the printer by using your browser’ s usual print functionality.< / p >
2023-06-05 22:38:58 +00:00
2023-11-20 23:54:13 +00:00
< div class = "box notices cstyle note" >
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-circle" > < / i > Note< / div >
2023-06-05 22:38:58 +00:00
< div class = "box-content" >
2023-11-29 23:15:02 +00:00
< p > The resulting URL will not be < a href = "https://gohugo.io/templates/output-formats/#configure-output-formats" target = "_blank" > configured ugly< / a > in terms of < a href = "https://gohugo.io/content-management/urls/#ugly-urls" target = "_blank" > Hugo’ s URL handling< / a > even if you’ ve set < code > uglyURLs=true< / code > in your < code > hugo.toml< / code > . This is due to the fact that for one mime type only one suffix can be configured.< / p >
2024-02-10 22:24:12 +00:00
< p > Nevertheless, if you’ re unhappy with the resulting URLs you can manually redefine < code > outputFormats.print< / code > in your own < code > hugo.toml< / code > to your liking.< / p >
2023-06-05 22:38:58 +00:00
< / div >
< / div >
2023-11-20 23:54:13 +00:00
< h2 id = "home-button-configuration" > Home Button Configuration< / h2 >
< p > If the < code > disableLandingPageButton< / code > option is set to < code > false< / code > , a Home button will appear
on the left menu. It is an alternative for clicking on the logo. To edit the
appearance, you will have to configure the < code > landingPageName< / code > for the defined languages:< / p >
2024-03-02 10:05:50 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "p" > [< / span > < span class = "nx" > languages< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > languages< / span > < span class = "p" > .< / span > < span class = "nx" > en< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > languages< / span > < span class = "p" > .< / span > < span class = "nx" > en< / span > < span class = "p" > .< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-18 16:24:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > landingPageName< / span > < span class = "p" > =< / span > < span class = "s2" > " < i class=' fa-fw fas fa-home' > < /i> Home" < / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > languages< / span > < span class = "p" > .< / span > < span class = "nx" > pir< / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > languages< / span > < span class = "p" > .< / span > < span class = "nx" > pir< / span > < span class = "p" > .< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-18 16:24:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > landingPageName< / span > < span class = "p" > =< / span > < span class = "s2" > " < i class=' fa-fw fas fa-home' > < /i> Arrr! Homme" < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2024-03-02 10:05:50 +00:00
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< 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" > languages< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > en< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-18 16:24:38 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > landingPageName< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > < i class=' fa-fw fas fa-home' > < /i> Home< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > pir< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-18 16:24:38 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > landingPageName< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > < i class=' fa-fw fas fa-home' > < /i> Arrr! Homme< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2024-03-02 10:05:50 +00:00
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " languages" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " en" < / span > < span class = "p" > :< / span > < 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 >
2024-03-18 16:24:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " landingPageName" < / span > < span class = "p" > :< / span > < span class = "s2" > " \u003ci class=' fa-fw fas fa-home' \u003e\u003c/i\u003e Home" < / span >
2024-03-02 10:05: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 > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " pir" < / span > < span class = "p" > :< / span > < 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 >
2024-03-18 16:24:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " landingPageName" < / span > < span class = "p" > :< / span > < span class = "s2" > " \u003ci class=' fa-fw fas fa-home' \u003e\u003c/i\u003e Arrr! Homme" < / span >
2024-03-02 10:05: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 > < / 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 > If this option is not configured for a specific language, they will get their default values:< / 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" >
2024-03-18 16:24: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 = "nx" > landingPageName< / span > < span class = "p" > =< / span > < span class = "s2" > " < i class=' fa-fw fas fa-home' > < /i> Home" < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2024-03-02 10:05:50 +00:00
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-18 16:24:38 +00:00
< 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" > landingPageName< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > < i class=' fa-fw fas fa-home' > < /i> Home< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2024-03-02 10:05:50 +00:00
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-18 16:24:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " landingPageName" < / span > < span class = "p" > :< / span > < span class = "s2" > " \u003ci class=' fa-fw fas fa-home' \u003e\u003c/i\u003e Home" < / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< / div >
< / div >
< p > The home button is going to look like this:< / p >
2024-04-04 21:31:21 +00:00
< p > < a href = "#R-image-d26cfc5420190c181e29a2691634babf" class = "lightbox-link" > < img alt = "Default Home Button" class = "bg-white border lazy lightbox noshadow figure-image" loading = "lazy" src = "/hugo-theme-relearn/basics/customization/home_button_defaults.png?width=18.75rem" style = " height: auto; width: 18.75rem;" > < / a >
< a href = "javascript:history.back();" class = "lightbox-back" id = "R-image-d26cfc5420190c181e29a2691634babf" > < img alt = "Default Home Button" class = "bg-white border lazy lightbox noshadow lightbox-image" loading = "lazy" src = "/hugo-theme-relearn/basics/customization/home_button_defaults.png?width=18.75rem" > < / a > < / p >
2023-11-20 23:54:13 +00:00
< h2 id = "social-media-meta-tags" > Social Media Meta Tags< / h2 >
< p > You can add social media meta tags for the < a href = "https://gohugo.io/templates/internal/#open-graph" target = "_blank" > Open Graph< / a > protocol and < a href = "https://gohugo.io/templates/internal/#twitter-cards" target = "_blank" > Twitter Cards< / a > to your site. These are configured as mentioned in the Hugo docs.< / p >
< h2 id = "change-the-menu-width" > Change the Menu Width< / h2 >
2023-10-05 16:15:09 +00:00
< p > The menu width adjusts automatically for different screen sizes.< / p >
< table >
< thead >
< tr >
< th > Name< / th >
< th > Screen Width< / th >
< th > Menu Width< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > S< / td >
< td > < 48rem< / td >
2024-01-21 13:20:19 +00:00
< td > 14.375rem< / td >
2023-10-05 16:15:09 +00:00
< / tr >
< tr >
< td > M< / td >
< td > 48rem - 60rem< / td >
< td > 14.375rem< / td >
< / tr >
< tr >
< td > L< / td >
< td > > = 60rem< / td >
< td > 18.75rem< / td >
< / tr >
< / tbody >
< / table >
< p > The values for the screen width breakpoints aren’ t configurable.< / p >
2024-01-21 12:39:51 +00:00
< p > If you want to adjust the menu width you can define the following CSS variables in your < code > custom-header.html< / code > . Note that < code > --MENU-WIDTH-S< / code > applies to the menu flyout width in mobile mode for small screen sizes.< / p >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-css" data-lang = "css" > < span class = "line" > < span class = "cl" > < span class = "p" > :< / span > < span class = "nd" > root< / span > < span class = "p" > {< / span >
2024-01-21 12:39:51 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nv" > --MENU-WIDTH-S< / span > < span class = "p" > :< / span > < span class = "mf" > 14.375< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span >
2023-10-05 16:15:09 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nv" > --MENU-WIDTH-M< / span > < span class = "p" > :< / span > < span class = "mf" > 14.375< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nv" > --MENU-WIDTH-L< / span > < span class = "p" > :< / span > < span class = "mf" > 18.75< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span >
2024-03-11 22:52:54 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < h2 id = "change-the-main-areas-max-width" > Change the Main Area’ s Max Width< / h2 >
< p > By default the main area width will only grow to a certain extent if more vertical screen space is available. This is done for readability purposes as long line are usually harder to read.< / p >
< p > If you are unhappy with the default, you can define the following CSS variable in your < code > custom-header.html< / code > and set the value to your liking. If you want to use all available space, select a really big value like < code > 1000rem< / code > ;< / p >
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-css" data-lang = "css" > < span class = "line" > < span class = "cl" > < span class = "p" > :< / span > < span class = "nd" > root< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nv" > --MAIN-WIDTH-MAX< / span > < span class = "p" > :< / span > < span class = "mf" > 80.25< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span >
2023-11-20 23:54:13 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < h2 id = "own-shortcodes-with-javascript-dependencies" > Own Shortcodes with JavaScript Dependencies< / h2 >
2024-04-03 21:31:35 +00:00
< p > Certain shortcodes make use of additional dependencies like JavaScript and CSS files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files.< / p >
2023-11-20 23:54:13 +00:00
< p > You can you use this mechanism in your own shortcodes. Say you want to add a shortcode < code > myshortcode< / code > that also requires the < code > jquery< / code > JavaScript library.< / p >
2023-10-09 15:44:52 +00:00
< ol >
< li >
2023-10-10 17:38:38 +00:00
< p > Write the shortcode file < code > layouts/shortcodes/myshortcode.html< / code > and add the following line< / p >
2024-04-03 21:31:35 +00:00
2024-04-04 21:31:21 +00:00
< div class = "tab-panel" data-tab-group = "97b6651879728f9e7401cf4bbf0d798f" >
2024-04-03 21:31:35 +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"
2024-04-04 21:31:21 +00:00
onclick="switchTab('97b6651879728f9e7401cf4bbf0d798f','layoutsshortcodesmyshortcodehtml')"
2024-04-03 21:31:35 +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 = "p" > {{< / span > < span class = "o" > -< / span > < span class = "p" > .< / span > < span class = "nx" > Page< / 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 > < / code > < / pre > < / div > < / div >
< / div >
< / div >
< / div > < / li >
2023-10-09 15:44:52 +00:00
< li >
2023-11-29 23:15:02 +00:00
< p > Add the following snippet to your < code > hugo.toml< / code > < / p >
2024-03-02 13:20:16 +00:00
< 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" >
2024-03-11 20:44:09 +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 = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 13:20:16 +00:00
< / 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" >
2024-03-11 20:44:09 +00:00
< 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" >
2024-03-02 13:20:16 +00:00
< / 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" >
2024-03-11 20:44:09 +00:00
< 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 >
2024-03-02 13:20:16 +00:00
< / 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 >
2023-10-09 15:44:52 +00:00
< li >
2024-04-03 21:31:35 +00:00
< p > Add the dependency loader file < code > layouts/partials/dependencies/myshortcode.html< / code > . The loader file will be called from multiple locations inside of the theme with the parameter < code > page< / code > containing the current < a href = "https://gohugo.io/methods/page/" target = "_blank" > page< / a > variable and < code > location< / code > with one of the currently defined locations< / p >
< ul >
< li > < code > header< / code > : if called at the end of the HTML < code > head< / code > element< / li >
< li > < code > footer< / code > : if called at the end of the HTML < code > body< / code > element< / li >
< / ul >
2024-04-04 21:31:21 +00:00
< div class = "tab-panel" data-tab-group = "1d76372e88938d5be2bed61c6fb30533" >
2024-04-03 21:31:35 +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"
2024-04-04 21:31:21 +00:00
onclick="switchTab('1d76372e88938d5be2bed61c6fb30533','layoutspartialsdependenciesmyshortcodehtml')"
2024-04-03 21:31:35 +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" > location< / 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 >
2023-10-09 15:44:52 +00:00
< / ol >
< p > Character casing is relevant!< / p >
< ul >
2023-11-29 23:15:02 +00:00
< li > the < code > name< / code > setting in your < code > hugo.toml< / code > must match the key (that needs to be prefixed with a < code > has< / code > ) you used for the store in your < code > layouts/shortcodes/myshortcode.html< / code > .< / li >
< li > the key on < code > params.relearn.dependencies< / code > in your < code > hugo.toml< / code > must match the base file name of your loader file.< / li >
2023-10-09 15:44:52 +00:00
< / ul >
< p > See the < code > math< / code > , < code > mermaid< / code > and < code > openapi< / code > shortcodes for examples.< / p >
2024-04-03 21:31:35 +00:00
< div class = "box notices cstyle note" >
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-circle" > < / i > Note< / div >
< div class = "box-content" >
< p > If you are really into customization of the theme and want to use the dependency loader for your own locations, you can do this by simply calling it from inside of your overriden 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.html" < / 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 >
< / div >
2023-10-09 15:44:52 +00:00
< h2 id = "output-formats" > Output Formats< / h2 >
2023-11-29 23:15:02 +00:00
< p > Certain parts of the theme can be changed for support of your own < a href = "https://gohugo.io/templates/output-formats/" target = "_blank" > output formats< / a > . Eg. if you define a new output format < code > PLAINTEXT< / code > in your < code > hugo.toml< / code > , you can add a file < code > layouts/partials/header.plaintext.html< / code > to change the way, the page header should look like for that output format.< / p >
2023-11-20 23:54:13 +00:00
< h2 id = "react-to-variant-switches-in-javascript" > React to Variant Switches in JavaScript< / h2 >
< p > Once a color variant is fully loaded, either initially or by switching the color variant manually with the variant selector, the custom event < code > themeVariantLoaded< / code > on the < code > document< / code > will be dispatched. You can add an event listener and react to changes.< / p >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-javascript" data-lang = "javascript" > < span class = "line" > < span class = "cl" > < span class = "nb" > document< / span > < span class = "p" > .< / span > < span class = "nx" > addEventListener< / span > < span class = "p" > (< / span > < span class = "s1" > ' themeVariantLoaded' < / span > < span class = "p" > ,< / span > < span class = "kd" > function< / span > < span class = "p" > (< / span > < span class = "nx" > e< / span > < span class = "p" > ){< / span >
2023-11-20 23:54:13 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > console< / span > < span class = "p" > .< / span > < span class = "nx" > log< / span > < span class = "p" > (< / span > < span class = "nx" > e< / span > < span class = "p" > .< / span > < span class = "nx" > detail< / span > < span class = "p" > .< / span > < span class = "nx" > variant< / span > < span class = "p" > );< / span > < span class = "c1" > // `relearn-light`
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "c1" > < / span > < span class = "p" > });< / span > < / span > < / span > < / code > < / pre > < / div > < h2 id = "partials" > Partials< / h2 >
< p > The Relearn theme has been built to be as configurable as possible by defining multiple < a href = "https://gohugo.io/templates/partials/" target = "_blank" > partials< / a > < / p >
< p > In < code > themes/hugo-theme-relearn/layouts/partials/< / code > , you will find all the partials defined for this theme. If you need to overwrite something, don’ t change the code directly. Instead < a href = "https://gohugo.io/themes/customizing/" target = "_blank" > follow this page< / a > . You’ d create a new partial in the < code > layouts/partials< / code > folder of your local project. This partial will have the priority.< / p >
< p > This theme defines the following partials :< / p >
< ul >
2024-02-24 12:50:21 +00:00
< li > < code > header.html< / code > : the header of the page. See < a href = "/hugo-theme-relearn/basics/customization/index.html#output-formats" > output-formats< / a > < / li >
< li > < code > footer.html< / code > : the footer of the page. See < a href = "/hugo-theme-relearn/basics/customization/index.html#output-formats" > output-formats< / a > < / li >
< li > < code > body.html< / code > : the body of the page. The body may contain of one or many articles. See < a href = "/hugo-theme-relearn/basics/customization/index.html#output-formats" > output-formats< / a > < / li >
< li > < code > article.html< / code > : the output for a single article, can contain elements around your content. See < a href = "/hugo-theme-relearn/basics/customization/index.html#output-formats" > output-formats< / a > < / li >
2023-11-20 23:54:13 +00:00
< li > < code > menu.html< / code > : left menu. < em > Not meant to be overwritten< / em > < / li >
< li > < code > search.html< / code > : search box. < em > Not meant to be overwritten< / em > < / li >
< li > < code > custom-header.html< / code > : custom headers in page. Meant to be overwritten when adding CSS imports. Don’ t forget to include < code > style< / code > HTML tag directive in your file.< / li >
< li > < code > custom-footer.html< / code > : custom footer in page. Meant to be overwritten when adding JavaScript. Don’ t forget to include < code > javascript< / code > HTML tag directive in your file.< / li >
< li > < code > favicon.html< / code > : the favicon< / li >
2023-12-02 00:10:22 +00:00
< li > < code > heading.html< / code > : side-wide configuration to change the pages title headings.< / li >
2023-11-20 23:54:13 +00:00
< li > < code > heading-pre.html< / code > : side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’ s < code > headingPre< / code > setting into account.< / li >
< li > < code > heading-post.html< / code > : side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’ s < code > headingPost< / code > setting into account.< / li >
< li > < code > logo.html< / code > : the logo, on top left hand corner< / li >
< li > < code > meta.html< / code > : HTML meta tags, if you want to change default behavior< / li >
< li > < code > menu-pre.html< / code > : side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’ s < code > menuPre< / code > setting into account.< / li >
< li > < code > menu-post.html< / code > : side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’ s < code > menuPost< / code > setting into account.< / li >
< li > < code > menu-footer.html< / code > : footer of the the left menu< / li >
< li > < code > toc.html< / code > : table of contents< / li >
< li > < code > content.html< / code > : the content page itself. This can be overridden if you want to display page’ s meta data above or below the content.< / li >
< li > < code > content-header.html< / code > : header above the title, has a default implementation but you can overwrite it if you don’ t like it.< / li >
< li > < code > content-footer.html< / code > : footer below the content, has a default implementation but you can overwrite it if you don’ t like it.< / li >
< / ul >
2022-04-02 13:30:16 +00:00
< footer class = "footline" >
< / footer >
< / article >
2023-05-17 22:13:41 +00:00
2022-04-02 13:30:16 +00:00
< / div >
< / main >
< / div >
2024-04-04 21:31:21 +00:00
< script src = "/hugo-theme-relearn/js/clipboard.min.js?1712266276" defer > < / script >
< script src = "/hugo-theme-relearn/js/perfect-scrollbar.min.js?1712266276" defer > < / script >
< script src = "/hugo-theme-relearn/js/theme.js?1712266276" defer > < / script >
2022-04-02 13:30:16 +00:00
< / body >
< / html >
