2023-01-03 22:03:38 +01:00
---
title: "Multiple Index Pages in Hugo"
date: 2023-01-03T22:36:03+02:00
draft: false
tags: ["blog"]
2023-04-01 14:39:34 +02:00
toc: true
2023-01-03 22:03:38 +01:00
---
2023-04-01 14:39:34 +02:00
2023-01-03 22:03:38 +01:00
## This is how to create multiple index pages in Hugo
2023-04-01 14:39:34 +02:00
2023-01-03 22:03:38 +01:00
2023-04-03 18:25:08 +02:00
I wanted to order [Hackbook ](/library/hackbook ) in reverse (i.e. oldest to newest) so that it's easier for the reader to start at the correct page.
2023-01-03 22:03:38 +01:00
2023-04-18 18:19:10 +02:00
I ran into the following problem - the default `list.html` does them from newest to oldest.
2023-01-03 22:03:38 +01:00
2023-04-18 18:19:10 +02:00
So I found [this forum post ](https://discourse.gohugo.io/t/two-home-pages/31312/9 ) and I created a file in the ```_default``` directory as follows:
2023-01-03 22:03:38 +01:00
```
layouts
|----**_default**
|-------**hackbook**
|-----------**order-by-oldest.html**
|-------baseof.html
|-------index.html
|-------list.html
|-------single.html
```
{{< img src = /img/custom-index-directory.PNG alt = "Picture of the directory" > }}
I named my file order by oldest because I plan on reusing it in other places. This is what's contained inside it:
```
{{ 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 > – {{ end -}}
< a href = "{{ .RelPermalink }}" > {{ .Title }}< / a >
{{- if .Param "authorsinlist" }}
{{- range .Param "authors" }} by {{ . }}{{ end -}}
{{ end -}}
< / li >
{{- end }}
< / ul >
{{- end }}
```
2023-04-18 18:19:10 +02:00
If you want to display the date on the left of the titles, you have to add `datesinlist=true` in your config.toml or `datesinlist: true` in your config.yaml
2023-04-01 14:39:34 +02:00
2023-04-18 18:19:10 +02:00
You probably don't need `enableGitInfo = true` as that will crash your website, I have no idea what it does, you don't need it.
2023-01-03 22:03:38 +01:00
## Using your custom _index.html
After creating your custom _index.html you'd use it as follows:
1. Create an _index.md file in your desired directory
2023-04-18 18:19:10 +02:00
2. Add `layout: "hackbook/order-by-oldest"` to your preamble (if you named your folder and or file something else, you have to change it here)
2023-01-03 22:03:38 +01:00
{{< img src = /img/layout-custom-index.PNG alt = "Picture of the layout in the preamble" > }}
And now you should have a custom _index.html for your pages! :)
Here is a verbose copy paste of the original hugo forum answer in case it gets deleted:
```
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)
enableGitInfo = true
```