148 lines
6.2 KiB
HTML
148 lines
6.2 KiB
HTML
<!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">
|
|
<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>
|
|
<body>
|
|
<main>
|
|
<header><h1 id="tag_Multiple Index Pages in Hugo">Multiple Index Pages in Hugo</h1></header>
|
|
<article>
|
|
|
|
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’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>
|
|
<pre tabindex="0"><code>layouts
|
|
|----**_default**
|
|
|-------**hackbook**
|
|
|-----------**order-by-oldest.html**
|
|
|-------baseof.html
|
|
|-------index.html
|
|
|-------list.html
|
|
|-------single.html
|
|
</code></pre>
|
|
<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>
|
|
<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>
|
|
{{- end }}
|
|
</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>
|
|
<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>
|
|
<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)
|
|
|
|
enableGitInfo = true
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div id="nextprev">
|
|
<a href="/updates/yoinked-css/"><div id="prevart">Previous:<br>Yoinked some Css and updated the site</div></a>
|
|
<a href="/blog/meta-description-in-hugo/"><div id="nextart">Next:<br>Meta Description in Hugo</div></a>
|
|
</div>
|
|
<div style="padding-top: 1.5em">
|
|
<div style="clear:both" class=taglist>
|
|
Tags: [<a id="tag_blog" href="https://vodoraslo.xyz/tags/blog">Blog</a>]
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<footer class="rssSvg">
|
|
<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>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|