vodoraslo.xyz/public/articles/blog/multiple-index-pages-in-hugo/index.html

<!DOCTYPE html>
<html lang="en" class="main-background-image">
<head>
	<title>Multiple Index Pages in Hugo | vodoraslo</title>
	<link rel="canonical" href="https://vodoraslo.xyz/">
	<link rel='alternate' type='application/rss+xml' title="vodoraslo RSS" href='/index.xml'>
	<link rel='stylesheet' type='text/css' href='/style.css?v=1.0.0.9'>
	<link rel="icon" href="/favicon.ico">
	<meta name="description" content="This is how to create multiple index pages in Hugo I wanted to order Hackbook in reverse (i.e. oldest to newest) so that it&rsquo;s easier for the reader to start at the correct page.
I ran into the following problem - the default list.html does them from newest to oldest.
So I found this forum post and I created a file in the _default directory as follows:
layouts
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest."/>
	<meta name="keywords" content="blog">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="index, follow">
	<meta charset="utf-8">
</head>
<div class="main-background-image">
<body>
<main>
<header><h1 style="margin-top: 0%; padding-top: 0.5em;" id="tag_Multiple Index Pages in Hugo">Multiple Index Pages in Hugo</h1></header>
<hr style="color:var(--strong);background-color: var(--strong);"><article style="padding: 0% 2.5% 0% 2.5%;">
<div class="breadcrumbs">

<nav><a href="/">vodoraslo</a> /&nbsp;<a href="/articles/">Articles</a> /&nbsp;Multiple Index Pages in Hugo</nav>

</div>  

<p style="color: var(--muted_text);">Last updated: <time datetime="2023-05-14T14:33:48&#43;03:00" style="color: var(--muted_text);">2023年5月14日 (日)</time> <a href="/index.xml"><img src="/rss.svg" style="max-height:1.5em; float:right;" alt="RSS Feed" title="Subscribe via RSS for updates."></a> </p>Table Of Contents:<nav id="TableOfContents">
  <ul>
    <li><a href="#this-is-how-to-create-multiple-index-pages-in-hugo">This is how to create multiple index pages in Hugo</a></li>
    <li><a href="#using-your-custom-_indexhtml">Using your custom _index.html</a></li>
  </ul>
</nav>
<div class="post-content"><h2 id="this-is-how-to-create-multiple-index-pages-in-hugo">This is how to create multiple index pages in Hugo<a hidden class="anchor" aria-hidden="true" href="#this-is-how-to-create-multiple-index-pages-in-hugo">#</a></h2>
<p>I wanted to order <a href="/library/hackbook">Hackbook</a> in reverse (i.e. oldest to newest) so that it&rsquo;s easier for the reader to start at the correct page.</p>
<p>I ran into the following problem - the default <code>list.html</code> does them from newest to oldest.</p>
<p>So I found <a href="https://discourse.gohugo.io/t/two-home-pages/31312/9">this forum post</a> and I created a file in the <code>_default</code> directory as follows:</p>

  
  <div class="highlight">
    
    <pre tabindex="0"><code class="language-" data-lang="">layouts
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest.html**
|-------baseof.html
|-------index.html
|-------list.html
|-------single.html           </code></pre>
  </div>

<figure ><img src="/img/custom-index-directory.PNG" alt="Picture of the directory"></figure>

<p>I named my file order by oldest because I plan on reusing it in other places. This is what&rsquo;s contained inside it:</p>

  
  <div class="highlight">
    
    <pre tabindex="0"><code class="language-" data-lang="">{{ define &#34;title&#34; -}}
{{ .Title | title }}
{{- end }}
{{ define &#34;main&#34; -}}
{{ .Content }}
&lt;ul&gt;
{{- range.Pages.Reverse }}
	&lt;li&gt;
		{{- if .Param &#34;datesinlist&#34; }}&lt;time datetime=&#34;{{ .Date.Format &#34;2006-01-02T15:04:05Z07:00&#34; }}&#34;&gt;{{ .Date.Format &#34;2006 Jan 02&#34; }}&lt;/time&gt; &amp;ndash; {{ end -}}
		&lt;a href=&#34;{{ .RelPermalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;
		{{- if .Param &#34;authorsinlist&#34; }}
		{{- range .Param &#34;authors&#34; }} by {{ . }}{{ end -}}
		{{ end -}}
		&lt;/li&gt;
{{- end }}
&lt;/ul&gt;
{{- end }}</code></pre>
  </div>
<p>If you want to display the date on the left of the titles, you have to add <code>datesinlist=true</code> in your config.toml or <code>datesinlist: true</code> in your config.yaml</p>
<p>You probably don&rsquo;t need <code>enableGitInfo = true</code> as that will crash your website, I have no idea what it does, you don&rsquo;t need it.</p>
<h2 id="using-your-custom-_indexhtml">Using your custom _index.html<a hidden class="anchor" aria-hidden="true" href="#using-your-custom-_indexhtml">#</a></h2>
<p>After creating your custom _index.html you&rsquo;d use it as follows:</p>
<ol>
<li>Create an _index.md file in your desired directory</li>
<li>Add <code>layout: &quot;hackbook/order-by-oldest&quot;</code> to your preamble (if you named your folder and or file something else, you have to change it here)</li>
</ol>

<figure ><img src="/img/layout-custom-index.PNG" alt="Picture of the layout in the preamble"></figure>

<p>And now you should have a custom _index.html for your pages! :)</p>
<p>Here is a verbose copy paste of the original hugo forum answer in case it gets deleted:</p>

  
  <div class="highlight">
    
    <pre tabindex="0"><code class="language-" data-lang="">Content structure:

content
├── better
│   └── _index.md
├── post
│   ├── post-1.md
│   ├── post-2.md
│   └── post-3.md
└── _index.md

content/better/_index.md

&#43;&#43;&#43;
title = &#34;Better&#34;
date = 2021-03-04T17:02:42-08:00
draft = false
type = &#34;post&#34;
layout = &#34;posts-by-lastmod&#34;
&#43;&#43;&#43;

Template structure:

layouts
├── _default
│   ├── baseof.html
│   ├── list.html
│   └── single.html
├── post
│   └── posts-by-lastmod.html
└── index.html

layouts/post/posts-by-lastmod.html

{{ define &#34;main&#34; }}
  {{ .Content }}
  {{ range (where .Site.RegularPages &#34;Type&#34; &#34;post&#34;).ByLastmod.Reverse }}
    &lt;h2&gt;&lt;a href=&#34;{{ .RelPermalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
  {{ end }}
{{ end }}

layouts/index.html

{{ define &#34;main&#34; }}
  {{ .Content }}
  {{ range (where .Site.RegularPages &#34;Type&#34; &#34;post&#34;).ByDate.Reverse }}
    &lt;h2&gt;&lt;a href=&#34;{{ .RelPermalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;&lt;/h2&gt;
  {{ end }}
{{ end }}

config.toml (see https://gohugo.io/variables/git/#lastmod)

enableGitInfo = true</code></pre>
  </div>

  <div style="text-align: right;">
<br><a href="mailto:chad@vodoraslo.xyz?subject=Re: Multiple%20Index%20Pages%20in%20Hugo&body=Page in question - https%3a%2f%2fvodoraslo.xyz%2farticles%2fblog%2fmultiple-index-pages-in-hugo%2f"><i>📬 Reply via email!</i></a><br>
</div></div>

<div id="nextprev">
<a href="/articles/updates/yoinked-css/"><div id="prevart"><i>Previous:</i><br>Yoinked some Css and updated the site</div></a>
<a href="/articles/blog/meta-description-in-hugo/"><div id="nextart"><i>Next:</i><br>Meta Description in Hugo</div></a>
</div>
<div ><div style="clear:both" class=taglist>
            Tags: [<a id="tag_blog" href="https://vodoraslo.xyz/tags/blog">Blog</a>]
        </div><br>
</div>
</article>
<hr style="color:var(--strong); margin: 0; background-color: var(--strong);">
</main>

<footer style="padding-top: 0.5em;">
	
	
<div style="padding-bottom: 0.2em; display: inline-block;"><a href="https://vodoraslo.xyz/articles">📜 Articles</a> <strong>&bull;</strong> <a href="https://vodoraslo.xyz/library">📚 Library</a> <strong>&bull;</strong> <a href="https://wiki.vodoraslo.xyz">🌐 Wiki</a>  <strong>&bull;</strong> <a href="https://vodoraslo.xyz/index.xml">📰 RSS</a><hr></div>


<div style="padding-bottom: 0.7em;" class="index-links"><a href="https://vodoraslo.xyz/">🏠 Homepage</a></div>
</footer>

</body>
</div>
</html>
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<!DOCTYPE html>`
add kitty background image 2023-07-12 21:46:08 +02:00			`<html lang="en" class="main-background-image">`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<head>`
			`<title>Multiple Index Pages in Hugo \| vodoraslo</title>`
			`<link rel="canonical" href="https://vodoraslo.xyz/">`
			`<link rel='alternate' type='application/rss+xml' title="vodoraslo RSS" href='/index.xml'>`
update css version 2023-10-18 19:37:44 +02:00			`<link rel='stylesheet' type='text/css' href='/style.css?v=1.0.0.9'>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<link rel="icon" href="/favicon.ico">`
			`<meta name="description" content="This is how to create multiple index pages in Hugo I wanted to order Hackbook in reverse (i.e. oldest to newest) so that it’s easier for the reader to start at the correct page.`
			`I ran into the following problem - the default list.html does them from newest to oldest.`
			`So I found this forum post and I created a file in the _default directory as follows:`
			`layouts \|----_default \|-------hackbook \|-----------**order-by-oldest."/>`
			`<meta name="keywords" content="blog">`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
			`<meta name="robots" content="index, follow">`
			`<meta charset="utf-8">`
			`</head>`
add kitty background image 2023-07-12 21:46:08 +02:00			`<div class="main-background-image">`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<body>`
			`<main>`
. 2023-07-21 17:57:40 +02:00			`<header><h1 style="margin-top: 0%; padding-top: 0.5em;" id="tag_Multiple Index Pages in Hugo">Multiple Index Pages in Hugo</h1></header>`
rework css (again) 2023-10-08 09:57:26 +02:00			`<hr style="color:var(--strong);background-color: var(--strong);"><article style="padding: 0% 2.5% 0% 2.5%;">`
add breadcrumbs 2023-05-18 17:28:55 +02:00			`<div class="breadcrumbs">`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00
add new font - firacode fix breadcrumbs 2023-05-28 08:50:26 +02:00			`<nav><a href="/">vodoraslo</a> / <a href="/articles/">Articles</a> / Multiple Index Pages in Hugo</nav>`
add breadcrumbs 2023-05-18 17:28:55 +02:00
			`</div>`
. 2023-07-20 20:49:09 +02:00
rework css (again) 2023-10-08 09:57:26 +02:00			`<p style="color: var(--muted_text);">Last updated: <time datetime="2023-05-14T14:33:48+03:00" style="color: var(--muted_text);">2023年5月14日 (日)</time> <a href="/index.xml"><img src="/rss.svg" style="max-height:1.5em; float:right;" alt="RSS Feed" title="Subscribe via RSS for updates."></a> </p>Table Of Contents:<nav id="TableOfContents">`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<ul>`
			`<li><a href="#this-is-how-to-create-multiple-index-pages-in-hugo">This is how to create multiple index pages in Hugo</a></li>`
			`<li><a href="#using-your-custom-_indexhtml">Using your custom _index.html</a></li>`
			`</ul>`
			`</nav>`
fix toc and last updated 2023-07-20 20:45:40 +02:00			`<div class="post-content"><h2 id="this-is-how-to-create-multiple-index-pages-in-hugo">This is how to create multiple index pages in Hugo<a hidden class="anchor" aria-hidden="true" href="#this-is-how-to-create-multiple-index-pages-in-hugo">#</a></h2>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<p>I wanted to order <a href="/library/hackbook">Hackbook</a> in reverse (i.e. oldest to newest) so that it’s easier for the reader to start at the correct page.</p>`
			`<p>I ran into the following problem - the default <code>list.html</code> does them from newest to oldest.</p>`
			`<p>So I found <a href="https://discourse.gohugo.io/t/two-home-pages/31312/9">this forum post</a> and I created a file in the <code>_default</code> directory as follows:</p>`
add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00

			`<div class="highlight">`

			`<pre tabindex="0"><code class="language-" data-lang="">layouts`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`\|----_default`
			`\|-------hackbook`
			`\|-----------order-by-oldest.html`
			`\|-------baseof.html`
			`\|-------index.html`
			`\|-------list.html`
add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00			`\|-------single.html </code></pre>`
			`</div>`

update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<figure ><img src="/img/custom-index-directory.PNG" alt="Picture of the directory"></figure>`

			`<p>I named my file order by oldest because I plan on reusing it in other places. This is what’s contained inside it:</p>`
add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00

			`<div class="highlight">`

			`<pre tabindex="0"><code class="language-" data-lang="">{{ define "title" -}}`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`{{ .Title \| title }}`
			`{{- end }}`
			`{{ define "main" -}}`
			`{{ .Content }}`
			`<ul>`
			`{{- range.Pages.Reverse }}`
			`<li>`
			`{{- if .Param "datesinlist" }}<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006 Jan 02" }}</time> &ndash; {{ end -}}`
			`<a href="{{ .RelPermalink }}">{{ .Title }}</a>`
			`{{- if .Param "authorsinlist" }}`
			`{{- range .Param "authors" }} by {{ . }}{{ end -}}`
			`{{ end -}}`
			`</li>`
			`{{- end }}`
			`</ul>`
add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00			`{{- end }}</code></pre>`
			`</div>`
			`<p>If you want to display the date on the left of the titles, you have to add <code>datesinlist=true</code> in your config.toml or <code>datesinlist: true</code> in your config.yaml</p>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`<p>You probably don’t need <code>enableGitInfo = true</code> as that will crash your website, I have no idea what it does, you don’t need it.</p>`
			`<h2 id="using-your-custom-_indexhtml">Using your custom _index.html<a hidden class="anchor" aria-hidden="true" href="#using-your-custom-_indexhtml">#</a></h2>`
			`<p>After creating your custom _index.html you’d use it as follows:</p>`
			`<ol>`
			`<li>Create an _index.md file in your desired directory</li>`
			`<li>Add <code>layout: "hackbook/order-by-oldest"</code> to your preamble (if you named your folder and or file something else, you have to change it here)</li>`
			`</ol>`

			`<figure ><img src="/img/layout-custom-index.PNG" alt="Picture of the layout in the preamble"></figure>`

			`<p>And now you should have a custom _index.html for your pages! :)</p>`
			`<p>Here is a verbose copy paste of the original hugo forum answer in case it gets deleted:</p>`
add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00

			`<div class="highlight">`

			`<pre tabindex="0"><code class="language-" data-lang="">Content structure:`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00
			`content`
			`├── better`
			`│ └── _index.md`
			`├── post`
			`│ ├── post-1.md`
			`│ ├── post-2.md`
			`│ └── post-3.md`
			`└── _index.md`

			`content/better/_index.md`

add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00			`+++`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`title = "Better"`
			`date = 2021-03-04T17:02:42-08:00`
			`draft = false`
			`type = "post"`
			`layout = "posts-by-lastmod"`
add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00			`+++`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00
			`Template structure:`

			`layouts`
			`├── _default`
			`│ ├── baseof.html`
			`│ ├── list.html`
			`│ └── single.html`
			`├── post`
			`│ └── posts-by-lastmod.html`
			`└── index.html`

			`layouts/post/posts-by-lastmod.html`

			`{{ define "main" }}`
			`{{ .Content }}`
			`{{ range (where .Site.RegularPages "Type" "post").ByLastmod.Reverse }}`
			`<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>`
			`{{ end }}`
			`{{ end }}`

			`layouts/index.html`

			`{{ define "main" }}`
			`{{ .Content }}`
			`{{ range (where .Site.RegularPages "Type" "post").ByDate.Reverse }}`
			`<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>`
			`{{ end }}`
			`{{ end }}`

			`config.toml (see https://gohugo.io/variables/git/#lastmod)`

add codeblock title, add css versioning 2023-05-31 17:47:54 +02:00			`enableGitInfo = true</code></pre>`
			`</div>`

add mailto reply, add next prev & parent for hackbook 2023-07-15 13:53:02 +02:00			`<div style="text-align: right;">`
update - reply with email icon 2023-10-11 20:34:21 +02:00			`<br><a href="mailto:chad@vodoraslo.xyz?subject=Re: Multiple%20Index%20Pages%20in%20Hugo&body=Page in question - https%3a%2f%2fvodoraslo.xyz%2farticles%2fblog%2fmultiple-index-pages-in-hugo%2f"><i>📬 Reply via email!</i></a><br>`
add mailto reply, add next prev & parent for hackbook 2023-07-15 13:53:02 +02:00			`</div></div>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00
			`<div id="nextprev">`
rework css (again) 2023-10-08 09:57:26 +02:00			`<a href="/articles/updates/yoinked-css/"><div id="prevart"><i>Previous:</i><br>Yoinked some Css and updated the site</div></a>`
			`<a href="/articles/blog/meta-description-in-hugo/"><div id="nextart"><i>Next:</i><br>Meta Description in Hugo</div></a>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`</div>`
rework css (again) 2023-10-08 09:57:26 +02:00			`<div ><div style="clear:both" class=taglist>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`Tags: [<a id="tag_blog" href="https://vodoraslo.xyz/tags/blog">Blog</a>]`
rework css (again) 2023-10-08 09:57:26 +02:00			`</div><br>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`</div>`
			`</article>`
rework css (again) 2023-10-08 09:57:26 +02:00			`<hr style="color:var(--strong); margin: 0; background-color: var(--strong);">`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`</main>`

rework css (again) 2023-10-08 09:57:26 +02:00			`<footer style="padding-top: 0.5em;">`

add links to the footer 2023-10-13 19:52:35 +02:00

			`<div style="padding-bottom: 0.2em; display: inline-block;"><a href="https://vodoraslo.xyz/articles">📜 Articles</a> <strong>•</strong> <a href="https://vodoraslo.xyz/library">📚 Library</a> <strong>•</strong> <a href="https://wiki.vodoraslo.xyz">🌐 Wiki</a> <strong>•</strong> <a href="https://vodoraslo.xyz/index.xml">📰 RSS</a><hr></div>`



			`<div style="padding-bottom: 0.7em;" class="index-links"><a href="https://vodoraslo.xyz/">🏠 Homepage</a></div>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`</footer>`

			`</body>`
add kitty background image 2023-07-12 21:46:08 +02:00			`</div>`
update blog and updates pages - combined into Articles 2023-05-14 13:33:48 +02:00			`</html>`