64 lines
No EOL
31 KiB
HTML
64 lines
No EOL
31 KiB
HTML
<!DOCTYPE html> <html lang=en style><!--
|
||
Page saved with SingleFile
|
||
url: https://moonbooth.com/hugo/sections/
|
||
saved date: Fri Sep 01 2023 08:01:37 GMT+0200 (Central European Summer Time)
|
||
--><meta charset=utf-8><meta name=generator content="Hugo 0.112.5"><meta name=viewport content="width=device-width,initial-scale=1"><title>Hugo sections tutorial: How to customise section pages</title><meta name=description content="Do you want to supercharge your Hugo sections? There are several great tips here for you."><meta name=robots content=noarchive><link rel=canonical href=https://moonbooth.com/hugo/sections/><meta property=og:title content="How to customise Hugo sections"><meta property=og:description content="Do you want to supercharge your Hugo sections? There are several great tips here for you."><meta property=og:type content=article><meta name=twitter:card content=summary_large_image><meta property=og:site_name content=MoonBooth><meta property=og:url content=https://moonbooth.com/hugo/sections/><meta property=og:image content=https://moonbooth.com/opengraph.png><meta property=og:image:secure_url content=https://moonbooth.com/opengraph.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta property=og:image:alt content="MoonBooth logo"><link rel=alternate type=application/rss+xml title="Hugo SEO Tutorials | MoonBooth" href=https://moonbooth.com/hugo/index.xml><meta name=theme-color content=#fad73d><style>html,body,h1,h2,h3,p,a,div,span,blockquote,img,svg,ul,pre,form,input,label{margin:0;padding:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif}h1,label{font-size:60px;margin:20px 0 10px}h2{font-size:45px}h3{font-size:30px}p,a,div,span,blockquote,ul,code,pre,input,button{font-size:20px}body,a:link{color:#fff;background-color:#202020}#overflow{overflow-x:hidden}#wrapper{margin:0 180px 60px;max-width:700px}header{margin:0-500%;padding:0 500%}#logo,footer{margin-top:60px}a:visited{color:rgba(255,255,255,.12)}a:hover{color:#fad73d}img{max-width:100%;height:auto;display:block}p,li,#byline,pre{line-height:1.5;margin-bottom:20px}aside{border:10px solid #fad73d;border-radius:25px;padding:40px 40px 20px;margin-bottom:20px}#toc h2{margin-bottom:20px}#description{font-style:italic}ul{list-style:none}ul li:before{content:"";display:inline-block;height:14px;width:7px;transform:rotate(45deg);border-bottom:3px solid #fad73d;border-right:3px solid #fad73d;margin-right:13px}#TableOfContents ol{padding-inline-start:0;list-style-type:none}#TableOfContents ol ol{padding-inline-start:20px}#TableOfContents li{margin-top:20px}#TableOfContents ol ol li:before{content:"";display:inline-block;height:14px;width:7px;transform:rotate(45deg);border-bottom:3px solid #fad73d;border-right:3px solid #fad73d;margin-right:13px}footer li:before{margin:0;width:0;height:0;border:0}code{color:#fad73d;font-weight:700}pre{-moz-tab-size:2;-o-tab-size:2;tab-size:2;overflow:auto}blockquote{border-left:10px solid #fad73d;padding-left:20px}label{font-weight:700;display:block}input,button{height:40px;border:1px solid #fad73d;outline:none;box-sizing:border-box;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;margin:0 0 10px}input{color:#202020;background-color:#fad73d;padding:0 10px;width:290px}::placeholder{color:#202020;font-style:italic}button{color:#fad73d;background-color:#202020;padding:0 20px;transition:all .6s ease-in-out 0s}button:hover,select{background-color:rgba(255,255,255,.12);cursor:pointer}@media (max-width:1060px){#wrapper{margin:0 40px 80px}#logo,footer{margin:30px 0 10px}input{width:100%;margin-bottom:10px}button{width:100%;margin:0 0 10px}}@media (max-width:530px){#wrapper{margin:0 20px 40px}h1,label{font-size:42px;margin-top:10px}h2{font-size:38px}h3{font-size:26px}h2,h3{margin-top:20px}aside h3,#toc h2{margin-top:0}aside{padding:20px}}p svg{margin-left:10px}sup{color:#fad73d}</style><link rel=icon href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmYWQ3M2QiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj4KICAgIDxjaXJjbGUgY3g9IjM1MS44ODIiIGN5PSIxNDkuNTQzIiByPSIyNy41MTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01OTAuOTA2IC0xNzIuNDI0KSBzY2FsZSgxLjgyMTcxKSIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTIwMC4wMDMgNzQuOTRjMC0xMy44MzItMTEuMjMtMjUuMDYyLTI1LjA2Mi0yNS4wNjJIMTI0LjgyYy0xMy44MzIgMC0yNS4wNjEgMTEuMjMtMjUuMDYxIDI1LjA2MnY1MC4xMjJjMCAxMy44MzEgMTEuMjMgMjUuMDYxIDI1LjA2IDI1LjA2MWg1MC4xMjNjMTMuODMyIDAgMjUuMDYyLTExLjIzIDI1LjA2Mi0yNS4wNlY3NC45NHoiIC8+Cjwvc3ZnPgo="><meta http-equiv=content-security-policy content="default-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'unsafe-inline'; media-src 'self' data:; script-src 'unsafe-inline' data:; object-src 'self' data:; frame-src 'self' data:;"><style>img[src="data:,"],source[src="data:,"]{display:none!important}</style><body><div id=overflow><div id=wrapper><header><a href=https://moonbooth.com/><img id=logo src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmFkNzNkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDAgNDkiPgogICAgPGNpcmNsZSBjeD0iMjQuNDgiIGN5PSIyNC40OCIgcj0iMjQuNDgiIC8+CiAgICA8cGF0aAogICAgICAgIGQ9Ik05Ny42ODIgMTIuMjRDOTcuNjgyIDUuNDg1IDkyLjE5OCAwIDg1LjQ0MiAwaC0yNC40OGMtNi43NTYgMC0xMi4yNCA1LjQ4NS0xMi4yNCAxMi4yNHYyNC40OGMwIDYuNzU2IDUuNDg0IDEyLjI0IDEyLjI0IDEyLjI0aDI0LjQ4YzYuNzU2IDAgMTIuMjQtNS40ODQgMTIuMjQtMTIuMjRWMTIuMjR6IiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNMTgwLjExOSAxLjI4OGgtMjUuMTI1bC0xMi42MjYgMjcuNjM3LTEyLjYyNy0yNy42MzdoLTI1LjEyNHY0Ni4zODRoMTYuMTA1VjE2Ljc1bDE0LjE3MyAzMC45MjJoMTQuOTQ2bDE0LjE3Mi0zMC45MjJ2MzAuOTIyaDE2LjEwNlYxLjI4OHpNMjE2LjgzOSA0OC45NmMxOS4xMzMgMCAzMC4yNzgtOC44OSAzMC4yNzgtMjQuNTQ0QzI0Ny4xMTcgOC44MjYgMjM1Ljk3MiAwIDIxNi44MzkgMGMtMTkuMTk4IDAtMzAuMjc4IDguNzYxLTMwLjI3OCAyNC40MTYgMCAxNS43MTkgMTEuMDggMjQuNTQ0IDMwLjI3OCAyNC41NDR6bTAtMTMuNTI4Yy0xMC41MDEgMC0xMy41MjktNC44OTYtMTMuNTI5LTExLjAxNiAwLTYuMDU2IDIuOTY0LTEwLjg4NyAxMy41MjktMTAuODg3czEzLjUyOCA0Ljg5NiAxMy41MjggMTAuODg3YzAgNi4wNTUtMy4wMjcgMTEuMDE2LTEzLjUyOCAxMS4wMTZ6TTI4My4xOTMgNDguOTZjMTkuMTMzIDAgMzAuMjc4LTguODkgMzAuMjc4LTI0LjU0NEMzMTMuNDcxIDguODI2IDMwMi4zMjYgMCAyODMuMTkzIDBjLTE5LjE5OCAwLTMwLjI3OCA4Ljc2MS0zMC4yNzggMjQuNDE2IDAgMTUuNzE5IDExLjA4IDI0LjU0NCAzMC4yNzggMjQuNTQ0em0wLTEzLjUyOGMtMTAuNTAxIDAtMTMuNTI4LTQuODk2LTEzLjUyOC0xMS4wMTYgMC02LjA1NiAyLjk2My0xMC44ODcgMTMuNTI4LTEwLjg4NyAxMC41NjUgMCAxMy41MjkgNC44OTYgMTMuNTI5IDEwLjg4NyAwIDYuMDU1LTMuMDI4IDExLjAxNi0xMy41MjkgMTEuMDE2ek0zNjUuNzgxIDMxLjk1M0wzNDMuNzQ5IDEuMjg4aC0yMy44MzZ2NDYuMzg0aDE2LjEwNlYxNy4wMDdsMjIuMDMyIDMwLjY2NWgyMy44MzZWMS4yODhoLTE2LjEwNnYzMC42NjV6TTQzMy42ODIgMjMuMzg1YzQuNzAyLTEuNzM5IDcuOTg4LTUuMTU0IDcuOTg4LTEwLjc1OCAwLTYuNy0zLjgwMS0xMS4zMzktMTUuOTc3LTExLjMzOWgtMzYuMDc2djQ2LjM4NGgzOC42NTNjMTEuNTMyIDAgMTUuOTc3LTUuMjgzIDE1Ljk3Ny0xMi44MiAwLTYuNzY0LTQuNzY3LTkuOTg1LTEwLjU2NS0xMS40Njd6TTQyMC41NCAxMi44ODRjMi45NjMgMCA1LjAyNSAwIDUuMDI1IDMuMzVzLTIuMDYyIDMuMzUtNS4wMjUgMy4zNWgtMTQuODE3di02LjdoMTQuODE3em0tMTQuODE3IDIzLjE5MnYtNi43aDE3LjM5NGMyLjMxOSAwIDQuMzggMCA0LjM4IDMuMzVzLTIuMDYxIDMuMzUtNC4zOCAzLjM1aC0xNy4zOTR6TTQ3OC4zOSA0OC45NmMxOS4xMzMgMCAzMC4yNzgtOC44OSAzMC4yNzgtMjQuNTQ0QzUwOC42NjggOC44MjYgNDk3LjUyMyAwIDQ3OC4zOSAwYy0xOS4xOTcgMC0zMC4yNzggOC43NjEtMzAuMjc4IDI0LjQxNiAwIDE1LjcxOSAxMS4wODEgMjQuNTQ0IDMwLjI3OCAyNC41NDR6bTAtMTMuNTI4Yy0xMC41MDEgMC0xMy41MjgtNC44OTYtMTMuNTI4LTExLjAxNiAwLTYuMDU2IDIuOTYzLTEwLjg4NyAxMy41MjgtMTAuODg3IDEwLjU2NSAwIDEzLjUyOSA0Ljg5NiAxMy41MjkgMTAuODg3IDAgNi4wNTUtMy4wMjggMTEuMDE2LTEzLjUyOSAxMS4wMTZ6TTU0NC43NDQgNDguOTZjMTkuMTMzIDAgMzAuMjc4LTguODkgMzAuMjc4LTI0LjU0NEM1NzUuMDIyIDguODI2IDU2My44NzcgMCA1NDQuNzQ0IDBjLTE5LjE5NyAwLTMwLjI3OCA4Ljc2MS0zMC4yNzggMjQuNDE2IDAgMTUuNzE5IDExLjA4MSAyNC41NDQgMzAuMjc4IDI0LjU0NHptMC0xMy41MjhjLTEwLjUgMC0xMy41MjgtNC44OTYtMTMuNTI4LTExLjAxNiAwLTYuMDU2IDIuOTYzLTEwLjg4NyAxMy41MjgtMTAuODg3IDEwLjU2NSAwIDEzLjUyOSA0Ljg5NiAxMy41MjkgMTAuODg3IDAgNi4wNTUtMy4wMjggMTEuMDE2LTEzLjUyOSAxMS4wMTZ6TTYzNC45MzQgMS4yODhoLTU1LjQwMnYxMy41MjloMTkuNjQ4djMyLjg1NWgxNi4xMDZWMTQuODE3aDE5LjY0OFYxLjI4OHpNNjgzLjg5NSAxNy43MTZoLTI2LjQxM1YxLjI4OGgtMTYuMTA2djQ2LjM4NGgxNi4xMDZWMzEuMjQ0aDI2LjQxM3YxNi40MjhINzAwVjEuMjg4aC0xNi4xMDV2MTYuNDI4eiIgLz4KPC9zdmc+Cg==" alt="MoonBooth logo"></a></header><main><h1>How to customise Hugo sections</h1><p id=description>Do you want to supercharge your Hugo sections? There are several great tips here for you.<div id=byline>Ron Erdos<br>Updated
|
||
March 9, 2020<br>Tested with Hugo version 0.74.3</div><aside id=toc><h2>On this page</h2><nav id=TableOfContents><ol><li><a href=#hugo-sections-overview>Hugo sections overview</a><ol><li><a href=#hugo-automatically-generates-sections-if-you-have-subfolders-in-your-content-folder>Hugo automatically generates sections if you have subfolders in your content folder</a><li><a href=#sections-appear-in-hugo-blog-post-urls-by-default>Sections appear in Hugo blog post urls by default</a><li><a href=#you-can-eliminate-the-section-subfolder-from-hugo-blog-post-urls>You can eliminate the section subfolder from Hugo blog post urls</a><li><a href=#hugo-also-generates-section-index-pages-by-default>Hugo also generates section index pages by default</a></ol><li><a href=#how-to-customise-section-indexes-to-make-them-more-interesting>How to customise section indexes to make them more interesting</a><ol><li><a href=#part-1-store-custom-headings-descriptions-and-images-in-an-_indexmd-file>Part 1: Store custom headings, descriptions, and images in an _index.md file</a><li><a href=#code-for-playing-along>Code for playing along</a><li><a href=#part-2-create-a-custom-layout-named-sectionhtml>Part 2: Create a custom layout named section.html</a><li><a href=#code-for-playing-along-1>Code for playing along</a><li><a href=#html-output>HTML output</a><li><a href=#example-of-a-customised-hugo-section-homepage>Example of a customised Hugo section homepage</a></ol><li><a href=#how-to-get-different-email-signup-forms-on-posts-from-different-sections>How to get different email signup forms on posts from different sections</a><ol><li><a href=#what-are-partials-in-hugo>What are partials in Hugo?</a><li><a href=#where-are-partials-kept-in-your-hugo-files>Where are partials kept in your Hugo files?</a><li><a href=#what-file-extension-do-partials-have>What file extension do partials have?</a><li><a href=#what-is-an-example-of-a-hugo-partial>What is an example of a Hugo partial?</a><li><a href=#code-for-playing-along-2>Code for playing along</a><li><a href=#code-for-playing-along-3>Code for playing along</a><li><a href=#nested-partials-hugo-partials-inside-partials>Nested partials (Hugo partials inside partials)</a></ol><li><a href=#how-to-get-different-rss-feeds-in-different-hugo-sections>How to get different RSS feeds in different Hugo sections</a><ol><li><a href=#how-does-rss-work-in-hugo-by-default>How does RSS work in Hugo by default?</a><li><a href=#how-to-eliminate-the-top-level-rss-feed-and-just-use-the-section-specific-rss-feeds>How to eliminate the top-level RSS feed and just use the section-specific RSS feeds</a><li><a href=#where-on-a-website-do-rss-readers-look-for-rss-feeds>Where on a website do RSS readers look for RSS feeds?</a><li><a href=#code-for-playing-along-4>Code for playing along</a><li><a href=#html-output-1>HTML output</a></ol></ol></nav></aside><h2 id=hugo-sections-overview>Hugo sections overview</h2><p>Let’s go over how Hugo sections work before customising them.<h3 id=hugo-automatically-generates-sections-if-you-have-subfolders-in-your-content-folder>Hugo automatically generates sections if you have subfolders in your content folder</h3><p>If you use subfolders to organise your posts, Hugo will automatically create sections for this content for you.<p>For example, let’s say you have content on Mars, as well as content on Venus.<p>And let’s say you organise your Hugo content like this:<p>📁 <code>content</code><br> 📁 <code>mars</code><br> <svg height=12 width=28 xmlns=http://www.w3.org/2000/svg><path d="M0 12V0h3.53l3.529 4.412L10.589 0h3.529v12h-3.53V5.118l-3.53 4.411L3.53 5.118V12H0zm22.059 0l-5.294-5.823h3.53V0h3.529v6.177h3.529L22.059 12z" fill=#42a5f5></path></svg>
|
||
<code>is-there-life-on-mars.md</code><br> <svg height=12 width=28 xmlns=http://www.w3.org/2000/svg><path d="M0 12V0h3.53l3.529 4.412L10.589 0h3.529v12h-3.53V5.118l-3.53 4.411L3.53 5.118V12H0zm22.059 0l-5.294-5.823h3.53V0h3.529v6.177h3.529L22.059 12z" fill=#42a5f5></path></svg>
|
||
<code>red-planet.md</code><br> 📁 <code>venus</code><br> <svg height=12 width=28 xmlns=http://www.w3.org/2000/svg><path d="M0 12V0h3.53l3.529 4.412L10.589 0h3.529v12h-3.53V5.118l-3.53 4.411L3.53 5.118V12H0zm22.059 0l-5.294-5.823h3.53V0h3.529v6.177h3.529L22.059 12z" fill=#42a5f5></path></svg>
|
||
<code>second-brightest.md</code><br><p>Given the above, you’d end up with the following URIs:<pre tabindex=0><code>/mars/
|
||
/mars/is-there-life-on-mars/
|
||
/mars/red-planet/
|
||
|
||
/venus/
|
||
/venus/second-brightest/
|
||
</code></pre><p>The first two URIs in each group above—<code>/mars/</code> and <code>/venus/</code>—are our section indexes; the rest of the URIs are blog posts.<h3 id=sections-appear-in-hugo-blog-post-urls-by-default>Sections appear in Hugo blog post urls by default</h3><p>As you can see above, whatever you name your section folder will appear in blog post URLs from that section.<p>For example, the blog post <code>/venus/second-brightest/</code> contains the <code>/venus/</code> subfolder.<h3 id=you-can-eliminate-the-section-subfolder-from-hugo-blog-post-urls>You can eliminate the section subfolder from Hugo blog post urls</h3><p>In Hugo, you can <a href=https://moonbooth.com/hugo/urls/>overwrite the url to eliminate the subfolder</a>.<p>However, in this tutorial we’ll be using the default URL setting we’ve been exploring, i.e. where section subfolder names appear in blog post URLs.<h3 id=hugo-also-generates-section-index-pages-by-default>Hugo also generates section index pages by default</h3><p>Hugo also automatically generates index pages for each section. These are the <code>/mars/</code> and <code>/venus/</code> pages we discussed above.<p>However, if your theme doesn’t have a customised layout file for sections, then it will likely look quite boring.<p>I’ll now show you how to make these section index pages more interesting.<h2 id=how-to-customise-section-indexes-to-make-them-more-interesting>How to customise section indexes to make them more interesting</h2><p>What if we wanted a custom <code>h1</code> heading of “Destination Mars”? And what if we wanted some custom intro text before the list of Mars blog posts?<p>The way to do that is below. There are two parts.<h3 id=part-1-store-custom-headings-descriptions-and-images-in-an-_indexmd-file>Part 1: Store custom headings, descriptions, and images in an _index.md file</h3><p>We’ll need to keep our custom <code>h1</code> heading (“Destination Mars”) and our custom intro text in a special file named <code>_index.md</code>, which we’ll need to store in the root (top level) of our Mars section.<p>In other words, the file will need to live at <code>/content/mars/_index.md</code>.<h3 id=code-for-playing-along>Code for playing along</h3><p>First, create a (blank) new file under <code>/content/mars/</code> and name it <code>_index.md</code>. Don’t forget the leading underscore in the filename.<p>Secondly, copy and paste in the following text into your <code>_index.md</code> file and save it:<pre tabindex=0><code>title: "Destination Mars"
|
||
summary: "When will we land on the Red Planet?"
|
||
</code></pre><h3 id=part-2-create-a-custom-layout-named-sectionhtml>Part 2: Create a custom layout named section.html</h3><p>OK, so we’ve stored our custom text in the right place, now we need to create a layout file to call that custom text.<h3 id=code-for-playing-along-1>Code for playing along</h3><p>Create a blank new file named <code>section.html</code> in the <code>/layouts/_default/</code> subfolder that’s included automatically in each Hugo site.<p>Inside this <code>/layouts/_default/section.html</code> file, copy and paste the below:<pre tabindex=0><code><h1>{{ .Title }}</h1>
|
||
<p>{{ .Summary }}</p>
|
||
<div>
|
||
{{ range .Pages }}
|
||
{{ .Render "li" }}
|
||
{{ end }}
|
||
</div>
|
||
</code></pre><p>Note that you’ll also need to include any header or footer partials that you use elsewhere on your site. You can learn more about partials by scrolling down about a screen’s worth.<h3 id=html-output>HTML output</h3><p>So now our rendered <code>/mars/</code> section homepage will contain this HTML:<pre tabindex=0><code><h1>Destination Mars</h1>
|
||
<p>When will we land on the Red Planet?</p>
|
||
<!-- Blog posts below -->
|
||
</code></pre><p>Pretty cool right?<h3 id=example-of-a-customised-hugo-section-homepage>Example of a customised Hugo section homepage</h3><p>You can see a live example of a customised section homepage <a href=https://moonbooth.com/hugo/>right here on this site</a>.<h2 id=how-to-get-different-email-signup-forms-on-posts-from-different-sections>How to get different email signup forms on posts from different sections</h2><p>What if you want to allow people to sign up for email updates <em>just</em> for Mars posts, or <em>just</em> for Venus posts?<p>You’d need a custom email signup form for each section. I do that on this site, by the way.<p>I’ll show you how to do that, but first, you need to know about a Hugo feature called “partials”.<aside><h3 id=what-are-partials-in-hugo>What are partials in Hugo?</h3><p>Hugo partials are where you keep recurring bits of code, such as headers, footers, email signup forms and more. You can use these partials in your template files to keep your code DRY.<p>DRY, if you’re not familiar, stands for “Don’t Repeat Yourself”. It’s a principle that makes your code better: if you’re going to use code more than once, put it in a partial, if possible.<h3 id=where-are-partials-kept-in-your-hugo-files>Where are partials kept in your Hugo files?</h3><p>Partials are stored in the <code>/layouts/partials/</code> folder in your Hugo site.<h3 id=what-file-extension-do-partials-have>What file extension do partials have?</h3><p>Partials have a <code>.html</code> extension.<h3 id=what-is-an-example-of-a-hugo-partial>What is an example of a Hugo partial?</h3><p>My footer partial lives at <code>/layouts/partials/footer.html</code>. In my case, its contents are just <code></body></html></code>, but yours might include your email signup form, a copyright notice, and so on.<p>I keep my email signup forms in separate partials, as I want to use them in places other than the footer.</p></aside><p>OK, so let’s say we have a <code>subscribe</code> partial in our <code>single</code> blog post template. In this <code>subscribe</code> partial we’ll put our email signup forms.<h3 id=code-for-playing-along-2>Code for playing along</h3><p>Our <code>single</code> blog post template, <code>/layouts/_default/single.html</code>, might look like this:<pre tabindex=0><code>{{ partial "header.html" . }}
|
||
|
||
<h1>{{ .Title }}</h1>
|
||
{{ .Content }}
|
||
|
||
{{ partial "subscribe.html" . }}
|
||
{{ partial "footer.html" . }}
|
||
</code></pre><p>So there are three partials in there: the header, the footer, and the email signup forms.<p>All pretty straightforward.<p>However, what if you want a <em>different</em> signup form for each section? One for Venus, one for Mars?<p>You do it in the <code>subscribe</code> partial itself, using Hugo’s <code>if</code> and <code>else if</code> statements:<h3 id=code-for-playing-along-3>Code for playing along</h3><p>In our <code>subscribe</code> partial, <code>/layouts/partials/subscribe.html</code>, we see:<pre tabindex=0><code>{{ if eq .Section "mars" }}
|
||
<!-- Mars signup form goes here -->
|
||
{{ else if eq .Section "venus" }}
|
||
<!-- Venus signup form goes here-->
|
||
{{ end }}
|
||
</code></pre><h3 id=nested-partials-hugo-partials-inside-partials>Nested partials (Hugo partials inside partials)</h3><p>You can also use nested partials (partials inside other partials) in Hugo.<p>So rather than putting the two sets of email signup forms (one for Mars, one for Venus) directly in the <code>subscribe</code> partial like we did above … (draws breath) … you could first put each form in its own partial, <em>then</em> use them in the conditional logic:<pre tabindex=0><code>{{ if eq .Section "mars" }}
|
||
{{ partial "subscribe-mars.html" . }}
|
||
{{ else if eq .Section "venus" }}
|
||
{{ partial "subscribe-venus.html" . }}
|
||
{{ end }}
|
||
</code></pre><p>That way, you’d be free to use just the Mars email signup form elsewhere on the site, by calling <code>{{ partial "subscribe-mars.html" . }}</code><h2 id=how-to-get-different-rss-feeds-in-different-hugo-sections>How to get different RSS feeds in different Hugo sections</h2><p>In a similar way to the section-specific email signup form work we did above, what if you wanted a different RSS feed for each section?<p>Hugo does most of the work for us, but not all. Read on to find out how to do this.<h3 id=how-does-rss-work-in-hugo-by-default>How does RSS work in Hugo by default?</h3><p>Even if you don’t alter any RSS-related code, Hugo will create a bunch of different RSS feeds for you, right out of the box.<p>To start, there’ll be one for each section; that is, one for each folder in the root of your Hugo <code>/content</code> folder.<p>So let’s say we had the same file structure as we saw earlier in this tutorial:<p>📁 <code>content</code><br> 📁 <code>mars</code><br> <svg height=12 width=28 xmlns=http://www.w3.org/2000/svg><path d="M0 12V0h3.53l3.529 4.412L10.589 0h3.529v12h-3.53V5.118l-3.53 4.411L3.53 5.118V12H0zm22.059 0l-5.294-5.823h3.53V0h3.529v6.177h3.529L22.059 12z" fill=#42a5f5></path></svg>
|
||
<code>is-there-life-on-mars.md</code><br> <svg height=12 width=28 xmlns=http://www.w3.org/2000/svg><path d="M0 12V0h3.53l3.529 4.412L10.589 0h3.529v12h-3.53V5.118l-3.53 4.411L3.53 5.118V12H0zm22.059 0l-5.294-5.823h3.53V0h3.529v6.177h3.529L22.059 12z" fill=#42a5f5></path></svg>
|
||
<code>red-planet.md</code><br> 📁 <code>venus</code><br> <svg height=12 width=28 xmlns=http://www.w3.org/2000/svg><path d="M0 12V0h3.53l3.529 4.412L10.589 0h3.529v12h-3.53V5.118l-3.53 4.411L3.53 5.118V12H0zm22.059 0l-5.294-5.823h3.53V0h3.529v6.177h3.529L22.059 12z" fill=#42a5f5></path></svg>
|
||
<code>second-brightest.md</code><br><p>You can see that we have two sections, one for Mars, the other for Venus.<p>Hugo will automatically generate RSS feeds at:<p><code>/mars/index.xml</code><p><code>/venus/index.xml</code><p>It will <em>also</em> generate a top-level RSS feed at:<p><code>/index.xml</code><p>which will contain content on <em>both</em> Mars and Venus.<h3 id=how-to-eliminate-the-top-level-rss-feed-and-just-use-the-section-specific-rss-feeds>How to eliminate the top-level RSS feed and just use the section-specific RSS feeds</h3><p>I’m not sure if there’s an easy way to suppress publication of the top-level RSS feed (i.e. <code>/index.xml</code>), but I <em>can</em> show you how to encourage feed readers to only present your section-specific RSS feeds to readers.<aside><h3 id=where-on-a-website-do-rss-readers-look-for-rss-feeds>Where on a website do RSS readers look for RSS feeds?</h3><p>Your homepage <code><head></code> source code is where RSS readers like Feedly generally look to find any RSS feed(s). So it’s important to only link to the ones you want people to use.</p></aside><p>OK, here’s how to do that:<h3 id=code-for-playing-along-4>Code for playing along</h3><p>In the <code><head></code> section of your homepage, include this code:<pre tabindex=0><code>{{ range .Site.Sections }}
|
||
<link rel="alternate" type="application/rss+xml"
|
||
title="{{ .Site.Title }} {{ title .Section }} Articles"
|
||
href="{{ .Site.BaseURL }}{{ .Section }}/index.xml">
|
||
{{ end }}
|
||
</code></pre><p>As usual, I’ve broken up the code over a few lines so you can read this tutorial more easily on your mobile device. However, your production code should keep the <code>link</code> element all on one line.<p>Now let’s go through the code, line by line.<blockquote><p><code>{{ range .Site.Sections }}</code> starts a loop over each site section. In our case, that’s <code>mars</code> and <code>venus</code>.</p></blockquote><blockquote><p><code><link rel="alternate" type="application/rss+xml"</code> starts our RSS link. This is all standard, nothing to customise here.</p></blockquote><blockquote><p><code>title="{{ .Site.Title }} {{ title .Section }} Articles"</code> generates the title of the RSS link. We’re using two variables here.<p>The first variable is <code>{{ .Site.Title }}</code>. This is the name of your site, and it’s pulled from your <code>config.toml</code> file, specifically the <code>title</code> field.<p>The second variable is <code>{{ title .Section }}</code>. The <code>.Section</code> part pulls the name of section subfolders (e.g. <code>mars</code> or <code>venus</code>), while <code>title</code> turns them into Title Case (<code>Mars</code> and <code>Venus</code>).<p>Note that I’ve also hardcoded <code>Articles</code> to the end of the link title, so it will read, for example, “MoonBooth Mars Articles”.</p></blockquote><blockquote><p><code>href="{{ .Site.BaseURL }}{{ .Section }}/index.xml"></code> generates the actual link itself. There are two variables in here, one that we saw a second ago.<p>The first variable is <code>{{ .Site.BaseURL }}</code>, and this also looks in your <code>config.toml</code> file, but this time, it’s looking for the <code>baseURL</code> field. For example: <code>baseURL = "https://example.com/"</code>.<p>And the second variable we saw a second ago, it’s <code>{{ .Section }}</code>, and it will fetch <code>mars</code> and <code>venus</code> as the names of the subfolders under your Hugo <code>/content/</code> folder.<p>I’ve hardcoded <code>/index.xml</code> to the end of the link, so we’ll end up with, for example, <code>https://example.com/mars/index.xml</code> as the value of <code>href</code>.</p></blockquote><blockquote><p><code>{{ end }}</code> closes the loop we opened a few lines above.</p></blockquote><p>OK, let’s see how it looks!<h3 id=html-output-1>HTML output</h3><p>Putting that together, you end up with this output in your rendered homepage’s HTML:<pre tabindex=0><code><link rel="alternate"
|
||
type="application/rss+xml"
|
||
title="MoonBooth Mars Articles"
|
||
href="https://example.com/mars/index.xml">
|
||
|
||
<link rel="alternate"
|
||
type="application/rss+xml"
|
||
title="MoonBooth Venus Articles"
|
||
href="https://example.com/venus/index.xml">
|
||
</code></pre><p>Note that Hugo pulls the sections in alphabetical order, which is why we see Mars before Venus.</p></main><form action=https://buttondown.email/api/emails/embed-subscribe/moonbooth method=post target=popupwindow class=embeddable-buttondown-form><label for=email>Subscribe for SEO-friendly tutorials for Hugo developers</label><p><em>"Thanks so much for your work ... I'm migrating my WordPress blog to Hugo and it's been really helpful."</em> — Francisco S., engineer and blogger<p><em>"I love your content. The information that you provide have been very useful in the development of my personal website."</em> — Mattia C., engineer and researcher</p><input type=email name=email id=email placeholder="Enter your best email address" value>
|
||
<button type=submit value=Subscribe>Subscribe</button>
|
||
</form><img id=planets src="data:image/svg+xml;base64,PHN2ZyBpZD0icGxhbmV0cyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiNmYWQ3M2QiIHZpZXdCb3g9IjAgMCA3MzEgMTI3Ij4KICAgIDxjaXJjbGUgY3g9IjE1MSIgY3k9IjIxODkiIHI9IjEwOSIgc3Ryb2tlLXdpZHRoPSIzLjA0IgogICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC4zMjg1NTUgLjAwMjQxODQ0IC0uMDAyNDE4NSAuMzI4NTQ4IC04LjAwNDI1MSAtNjMwLjEyMzc0KSIgLz4KICAgIDxjaXJjbGUgY3g9IjQ3NyIgY3k9IjIyMjUiIHI9IjEwIiBzdHJva2Utd2lkdGg9IjMuMDMiCiAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLjMyOTg3NyAuMDAyNDI4MTcgLS4wMDI0MjgyMiAuMzI5ODY4IC05LjE4MjUwMSAtNjMyLjkzNzc0KSIgLz4KICAgIDxjaXJjbGUgY3g9IjcwMCIgY3k9IjIyMjQiIHI9IjEwIiBzdHJva2Utd2lkdGg9IjMuMDMiCiAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLjMyOTg3NyAuMDAyNDI4MTcgLS4wMDI0MjgyMiAuMzI5ODY4IC05LjQ4NzkwMSAtNjMyLjM3NDc0KSIgLz4KICAgIDxjaXJjbGUgY3g9IjkyNCIgY3k9IjIyMjIiIHI9IjEwIiBzdHJva2Utd2lkdGg9IjMuMDMiCiAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLjMyOTg3NyAuMDAyNDI4MTcgLS4wMDI0MjgyMiAuMzI5ODY4IC05Ljg5NDg5MSAtNjMyLjI3MDc0KSIgLz4KICAgIDxjaXJjbGUgY3g9IjExNDgiIGN5PSIyMjIxIiByPSIxMCIgc3Ryb2tlLXdpZHRoPSIzLjAzIgogICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC4zMjk4NzcgLjAwMjQyODE3IC0uMDAyNDI4MjIgLjMyOTg2OCAtMTAuODQ0ODcxIC02MzEuOTU3NzQpIiAvPgogICAgPGNpcmNsZSBjeD0iMTM1MyIgY3k9IjIyMTkiIHI9IjM1IiBzdHJva2Utd2lkdGg9IjMuMDMiCiAgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoLjMyOTg3NyAuMDAyNDI4MTcgLS4wMDI0MjgyMiAuMzI5ODY4IC0xMC42NjY4ODEgLTYzMS4yODA3NCkiIC8+CiAgICA8Y2lyY2xlIGN4PSIxNTc4IiBjeT0iMjIxOCIgcj0iMzUiIHN0cm9rZS13aWR0aD0iMy4wNyIKICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCguMzIxNjUyIC4wMDI0MjgxNyAtLjAwMjM2NzY4IC4zMjk4NjggMS45MzA1MzkgLTYzMS4yNzA3NCkiIC8+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjMuMDMiPgogICAgICAgIDxwYXRoIGQ9Im0xNTAwLjc5IDIyNTYuNjIgMTE4LjM0LS4xMyIgdHJhbnNmb3JtPSJtYXRyaXgoLjMzMDQyMSAwIDAgLjMzMDQyMSAtMTEuMTEwNjcxIC02NDEuMjQxNzQpIiAvPgogICAgICAgIDxjaXJjbGUgY3g9IjE4MDEiIGN5PSIyMjE1IiByPSIyMCIgdHJhbnNmb3JtPSJtYXRyaXgoLjMyOTg3NyAuMDAyNDI4MTcgLS4wMDI0MjgyMiAuMzI5ODY4IC0xMC4xOTcyNjEgLTYzMC45OTk3NCkiIC8+CiAgICAgICAgPGNpcmNsZSBjeD0iMjAyNCIgY3k9IjIyMTIiIHI9IjIwIiB0cmFuc2Zvcm09Im1hdHJpeCguMzI5ODc3IC4wMDI0MjgxNyAtLjAwMjQyODIyIC4zMjk4NjggLTkuNDM1NDkxIC02MzAuMjkwNzQpIiAvPgogICAgICAgIDxjaXJjbGUgY3g9IjIyNDYiIGN5PSIyMjEwIiByPSI5IiB0cmFuc2Zvcm09Im1hdHJpeCguMzI5ODc3IC4wMDI0MjgxNyAtLjAwMjQyODIyIC4zMjk4NjggLTguNjMxNTExIC02MjkuNzY5NzQpIiAvPgogICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Im05MjYuMDQgMjI3MC4xYzU4LjkyMSA0MC4yMyA3NC45OCA1MC40IDE1Mi40OSA1MS45MiA0NS45Ny45IDExNS40OS0uNzcgMjE5LjUxIDAgMTA0LjM2IDAgMTY5LjktNDQuNDEgMjA2LjM5LTEwNS41MSAzNi4xMi02MC41IDQxLjk5LTEzNS43NyA0Ny40Mi0xNTUuOTkiCiAgICAgICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC4zMzA0MjEgMCAwIC4zMzA0MjEgLTExLjExMDY3MSAtNjQxLjI0MTc0KSIgLz4KICAgICAgICA8cGF0aCBkPSJtMTUyNC4xMyAyMDgyLjE0IDI3LjcyLTIxLjYyIDExLjI1IDM1LjM2IiB0cmFuc2Zvcm09Im1hdHJpeCguMzMwNDIxIDAgMCAuMzMwNDIxIC0xMS4xMTA2NzEgLTY0MS4yNDE3NCkiIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgICAgZD0ibTE1NDQuMDkgMTk0NSAxOC43OCAzMy44MyAxOS45NyAzNS45OGMxMC44LTM0LjczIDEuMzgtNTYuNTItMzguNzUtNjkuODF6bS0yOS45MyA2MC44NyA0OC43MS0yNy4wNG0xNS4zIDI3LjU2LTY0LjAxLS41MiAzNC43NS01Mi4xOG0zMS4xMi05LjQ2IDEwLjk1LTUuOTNjMS40Ny0uOCAzLjMxLS4yNCA0LjEyIDEuMjZsMTcuMDMgMzEuNGMuODEgMS40OS4yOCAzLjM0LTEuMiA0LjE0bC0xMC45NCA1LjkzYy0xLjQ4LjgtMy4zMi4yNC00LjEzLTEuMjZsLTE3LjAzLTMxLjRjLS44MS0xLjUtLjI3LTMuMzQgMS4yLTQuMTR6IgogICAgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCguMTk3NDA1IC4yNjQ5NyAtLjI2NDk3IC4xOTc0MDUgNzIwLjUxNjQyOSAtNzkyLjU4OTc0KSIgLz4KICAgIDwvZz4KPC9zdmc+Cg==" alt="The planets in our solar system"><footer><ul><li><a href=https://moonbooth.com/hugo/>Hugo SEO Tutorials</a><li><a href=https://moonbooth.com/hugo/seo-course/>Hugo SEO Course</a>
|
||
<sup>NEW</sup><li><a href=https://moonbooth.com/hugo/seo-theme/>SEO Theme for Hugo</a><li><a href=https://moonbooth.com/about/>About</a></ul></footer></div></div> |