127 lines
No EOL
3.2 KiB
Markdown
127 lines
No EOL
3.2 KiB
Markdown
---
|
|
title: "Multiple Index Pages in Hugo"
|
|
date: 2023-01-03T22:36:03+02:00
|
|
draft: false
|
|
tags: ["blog"]
|
|
toc: true
|
|
---
|
|
|
|
## This is how to create multiple index pages in Hugo
|
|
|
|
|
|
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.
|
|
|
|
I ran into the following problem - the default `list.html` does them from newest to oldest.
|
|
|
|
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:
|
|
```
|
|
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 }}
|
|
```
|
|
|
|
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
|
|
|
|
|
|
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.
|
|
|
|
|
|
## 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
|
|
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)
|
|
|
|
{{< 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
|
|
|
|
|
|
``` |