2023-05-14 13:33:48 +02:00
<!DOCTYPE html>
2023-07-12 21:46:08 +02:00
< html lang = "en" class = "main-background-image" >
2023-05-14 13:33:48 +02:00
< head >
2024-08-29 21:46:33 +02:00
< title > Multiple Index Pages in Hugo | vodoraslo' s blog< / title >
2023-05-14 13:33:48 +02:00
< link rel = "canonical" href = "https://vodoraslo.xyz/" >
2024-08-29 21:46:33 +02:00
< link rel = 'alternate' type = 'application/rss+xml' title = "vodoraslo's blog RSS" href = '/index.xml' >
< link rel = 'stylesheet' type = 'text/css' href = '/style.css?v=1.0.0.12' >
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 & 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 >
2023-07-12 21:46:08 +02:00
< div class = "main-background-image" >
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 >
2023-11-04 13:03:07 +01:00
< hr style = "color:var(--strong);background-color: var(--strong); border-color: var(--strong);" > < article style = "padding: 0% 2.5% 0% 2.5%;" >
2023-05-18 17:28:55 +02:00
< div class = "breadcrumbs" >
2023-05-14 13:33:48 +02:00
2023-05-28 08:50:26 +02:00
< nav > < a href = "/" > vodoraslo< / a > / < a href = "/articles/" > Articles< / a > / Multiple Index Pages in Hugo< / nav >
2023-05-18 17:28:55 +02:00
< / div >
2023-07-20 20:49:09 +02:00
2024-09-13 16:00:58 +02:00
< small > < em > < p style = "color: var(--muted_text);" > 作成日: < time datetime = "2023-01-03T22:36:03+03:00" style = "color: var(--muted_text);" > 2023年1月3日 (火)< / time > ; 最終更新日: < time datetime = "2024-08-29T22:46:33+03:00" style = "color: var(--muted_text);" > 2024年8月29日 (木)< / time > < / p > < / em > < / small > < details > < summary > < strong > Table Of Contents:< / strong > < / summary > < nav id = "TableOfContents" >
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 >
2024-08-29 21:46:33 +02:00
< / nav > < / details >
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 >
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 >
2023-05-31 17:47:54 +02:00
< div class = "highlight" >
< pre tabindex = "0" > < code class = "language-" data-lang = "" > layouts
2023-05-14 13:33:48 +02:00
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest.html**
|-------baseof.html
|-------index.html
|-------list.html
2023-05-31 17:47:54 +02:00
|-------single.html < / code > < / pre >
< / div >
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 >
2023-05-31 17:47:54 +02:00
< div class = "highlight" >
< pre tabindex = "0" > < code class = "language-" data-lang = "" > {{ define " title" -}}
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>
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 >
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 >
2023-05-31 17:47:54 +02:00
< div class = "highlight" >
< pre tabindex = "0" > < code class = "language-" data-lang = "" > Content structure:
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
2023-05-31 17:47:54 +02:00
+ + +
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"
2023-05-31 17:47:54 +02:00
+ + +
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)
2023-05-31 17:47:54 +02:00
enableGitInfo = true< / code > < / pre >
< / div >
2023-07-15 13:53:02 +02:00
< div style = "text-align: right;" >
2024-08-30 22:27:10 +02:00
2023-07-15 13:53:02 +02:00
< / div > < / div >
2023-05-14 13:33:48 +02:00
2024-02-27 18:59:49 +01:00
< br >
< hr style = "color:var(--strong); margin: 0; background-color: var(--strong); border-color: var(--strong);" >
2023-05-14 13:33:48 +02:00
< div id = "nextprev" >
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 >
2023-05-14 13:33:48 +02:00
< / div >
2023-10-08 09:57:26 +02:00
< div > < div style = "clear:both" class = taglist >
2023-05-14 13:33:48 +02:00
Tags: [< a id = "tag_blog" href = "https://vodoraslo.xyz/tags/blog" > Blog< / a > ]
2023-10-08 09:57:26 +02:00
< / div > < br >
2023-05-14 13:33:48 +02:00
< / div >
< / article >
< / main >
2023-10-08 09:57:26 +02:00
< footer style = "padding-top: 0.5em;" >
2024-08-30 22:27:10 +02:00
2024-08-29 21:46:33 +02:00
< div style = "padding-bottom: 0.2em; display: inline-block;" > < a href = "https://vodoraslo.xyz/articles" title = "List of all my articles and writings." > 📜 Articles< / a > < strong > • < / strong > < a href = "https://vodoraslo.xyz/library" title = "My personal library." > 📚 Library< / a > < strong > • < / strong > < a href = "https://wiki.vodoraslo.xyz" title = "My personal Wiki page." > 🌐 Wiki< / a > < strong > • < / strong > < a href = "https://vodoraslo.xyz/index.xml" title = "Subscribe via RSS for updates." > 📰 RSS< / a > < hr > < / div >
2023-10-13 19:52:35 +02:00
2024-08-30 22:27:10 +02:00
2024-08-29 21:46:33 +02:00
< div style = "padding-bottom: 0.7em;" class = "index-links" > < a href = "https://vodoraslo.xyz/" title = "Return to the homepage." > 🏠 Homepage< / a > < / div >
2023-05-14 13:33:48 +02:00
< / footer >
< / body >
2023-07-12 21:46:08 +02:00
< / div >
2023-05-14 13:33:48 +02:00
< / html >