2023-03-31 20:06:39 +02:00
<!DOCTYPE html>
< html lang = "en" >
< 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' >
< link rel = "icon" href = "/favicon.ico" >
2023-04-11 22:01:49 +02:00
< 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 .
2023-01-03 22:03:38 +01:00
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:
2023-04-03 18:51:28 +02:00
layouts
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest."/>
2023-03-31 20:06:39 +02:00
< 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 >
< body >
< main >
< header > < h1 id = "tag_Multiple Index Pages in Hugo" > Multiple Index Pages in Hugo< / h1 > < / header >
< article >
2023-04-01 15:46:42 +02:00
Table Of Contents:< nav id = "TableOfContents" >
2023-04-01 14:39:34 +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 >
2023-04-11 22:01:49 +02:00
< / 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’ s easier for the reader to start at the correct page.< / p >
2023-04-18 18:19:10 +02:00
< 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 >
2023-04-03 18:51:28 +02:00
< pre tabindex = "0" > < code > layouts
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest.html**
|-------baseof.html
|-------index.html
|-------list.html
2023-01-03 22:03:38 +01:00
|-------single.html
2023-03-31 20:06:39 +02:00
< / code > < / pre >
< figure > < img src = "/img/custom-index-directory.PNG" alt = "Picture of the directory" > < / figure >
2023-01-03 22:03:38 +01:00
< 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 >
2023-04-03 18:51:28 +02:00
< pre tabindex = "0" > < code > {{ define " title" -}}
{{ .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>
2023-01-03 22:03:38 +01:00
{{- end }}
2023-04-18 18:19:10 +02:00
< / code > < / pre > < 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’ 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 >
2023-04-11 22:01:49 +02:00
< 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 >
2023-01-03 22:03:38 +01:00
< ol >
< li > Create an _index.md file in your desired directory< / li >
2023-04-18 18:19:10 +02:00
< 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 >
2023-01-03 22:03:38 +01:00
< / ol >
2023-03-31 20:06:39 +02:00
< figure > < img src = "/img/layout-custom-index.PNG" alt = "Picture of the layout in the preamble" > < / figure >
2023-01-03 22:03:38 +01:00
< 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 >
2023-04-03 18:51:28 +02:00
< pre tabindex = "0" > < code > Content structure:
content
├── better
│ └── _index.md
├── post
│ ├── post-1.md
│ ├── post-2.md
│ └── post-3.md
└── _index.md
content/better/_index.md
+++
title = " Better"
date = 2021-03-04T17:02:42-08:00
draft = false
type = " post"
layout = " posts-by-lastmod"
+++
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)
2023-01-03 22:03:38 +01:00
enableGitInfo = true
2023-03-31 20:06:39 +02:00
< / code > < / pre >
2023-04-11 22:01:49 +02:00
< / div >
2023-03-31 20:06:39 +02:00
< div id = "nextprev" >
2023-04-05 15:53:18 +02:00
< a href = "/updates/yoinked-css/" > < div id = "prevart" > Previous:< br > Yoinked some Css and updated the site< / div > < / a >
2023-03-31 20:06:39 +02:00
< a href = "/blog/meta-description-in-hugo/" > < div id = "nextart" > Next:< br > Meta Description in Hugo< / div > < / a >
< / div >
2023-04-15 18:30:38 +02:00
< div style = "padding-top: 1.5em" >
2023-03-31 20:06:39 +02:00
< div style = "clear:both" class = taglist >
Tags: [< a id = "tag_blog" href = "https://vodoraslo.xyz/tags/blog" > Blog< / a > ]
< / div >
2023-04-15 08:18:42 +02:00
< / div >
2023-03-31 20:06:39 +02:00
< / article >
< / main >
2023-04-15 08:18:42 +02:00
< footer class = "rssSvg" >
2023-04-15 18:30:38 +02:00
< div style = "padding-bottom: 0.5em;" > < a href = "https://vodoraslo.xyz/" > Homepage< / a > < / div > < div > < a href = "/index.xml" > < img src = "/rss.svg" style = "max-height:1.5em" alt = "RSS Feed" title = "Subscribe via RSS for updates." > < / a > < / div >
2023-03-31 20:06:39 +02:00
< / footer >
< / body >
< / html >