<!DOCTYPE html>
<html lang="en-us"><title>Creating an archive page | More Contentful</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.b9122ae71c45adaf5f36e6b2a18f9332d840f2b842c6fe5bf9f7fb64ef49b6a3.css" /><meta name="generator" content="Hugo 0.96.0" />
<meta charset="utf-8">
<meta name="author" content="John Doe" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="no-referrer" />
<meta name="description" content="This will add an archive page similar to archive pages like these.
{{- define "main" -}} <h1>{{ .Title }}</h1> {{ .Content }} <hr> {{- /* Creating a section that lists out regular pages by year */ -}} {{ range $.Site.RegularPages.GroupByPublishDate "2006" }} {{- /* Skip regular pages with an invalid creation date string. */ -}} {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter." /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Creating an archive page"/>
<meta name="twitter:description" content="This will add an archive page similar to archive pages like these.
{{- define "main" -}} <h1>{{ .Title }}</h1> {{ .Content }} <hr> {{- /* Creating a section that lists out regular pages by year */ -}} {{ range $.Site.RegularPages.GroupByPublishDate "2006" }} {{- /* Skip regular pages with an invalid creation date string. */ -}} {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter."/>
<meta property="og:title" content="Creating an archive page" />
<meta property="og:description" content="This will add an archive page similar to archive pages like these.
{{- define "main" -}} <h1>{{ .Title }}</h1> {{ .Content }} <hr> {{- /* Creating a section that lists out regular pages by year */ -}} {{ range $.Site.RegularPages.GroupByPublishDate "2006" }} {{- /* Skip regular pages with an invalid creation date string. */ -}} {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/" /><meta property="article:section" content="recipes" />
<meta property="article:published_time" content="2020-10-20T20:36:55+08:00" />
<meta property="article:modified_time" content="2022-10-24T12:59:05+08:00" />
<meta itemprop="name" content="Creating an archive page">
<meta itemprop="description" content="This will add an archive page similar to archive pages like these.
{{- define "main" -}} <h1>{{ .Title }}</h1> {{ .Content }} <hr> {{- /* Creating a section that lists out regular pages by year */ -}} {{ range $.Site.RegularPages.GroupByPublishDate "2006" }} {{- /* Skip regular pages with an invalid creation date string. */ -}} {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter."><meta itemprop="datePublished" content="2020-10-20T20:36:55+08:00" />
<meta itemprop="dateModified" content="2022-10-24T12:59:05+08:00" />
<meta itemprop="wordCount" content="233">
<meta itemprop="keywords" content="" /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/" />
<script>
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
</script>
<body>
<div class="site__theme-btn" aria-label="Theme toggle">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/swatch.svg#swatch"></use>
</svg>
<div class="site__theme-dropdown">
<div class="site__theme-dropdown-list">
<div class="site__theme-item"
data-theme="Default Dark"
data-theme-dark
>Dark</div>
<div class="site__theme-item"
data-theme="Default Light"
data-theme-light
>Light</div>
<div class="site__theme-item"
data-theme="Dracula"
>Dracula</div>
<div class="site__theme-item"
data-theme="Gruvbox dark, hard"
>Gruvbox dark, hard</div>
<div class="site__theme-item"
data-theme="Gruvbox light, hard"
>Gruvbox light, hard</div>
<div class="site__theme-item"
data-theme="Nord"
>Nord</div>
<div class="site__theme-item"
data-theme="Solarized Dark"
>Solarized Dark</div>
<div class="site__theme-item"
data-theme="Solarized Light"
>Solarized Light</div>
<div class="site__theme-item" data-theme-system>
OS default
</div>
</div>
</div>
</div>
<script>
function styleTheme() {
const selectedTheme = window.localStorage.getItem("theme");
for (const el of document.querySelectorAll(".site__theme-item")) {
if (el.dataset.theme == selectedTheme) {
el.classList.add("site__theme-item--selected");
} else {
el.classList.remove("site__theme-item--selected");
}
}
}
const themeDropdown = document.querySelector('.site__theme-btn');
themeDropdown.addEventListener('click', (event) => {
const { target } = event;
if (target.classList.contains("site__theme-item")) {
if (target.dataset.theme) {
theme = target.dataset.theme;
window.localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
} else {
window.localStorage.removeItem("theme");
delete document.documentElement.dataset.theme;
}
}
styleTheme();
});
styleTheme();
</script>
<nav aria-label="Site header">
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful">More Contentful</a>
<div class="list site__links">
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/about/">About</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/categories/">Categories</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/">Recipes</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/tags/">Tags</a>
</div>
</nav>
<hr>
<article class="post--single">
<header>
<h1>Creating an archive page</h1>
</header>
<div class="list post__meta"><time datetime="2020-10-20 20:36:55 +0800 +0800" title="Created">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar"></use>
</svg>
<span style="margin-left: 0.5em;">2020-10-20</span>
</time>
<time datetime="2022-10-24 12:59:05 +0800 +0800" title="Updated">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/arrow-path.svg#arrow-path"></use>
</svg>
<span style="margin-left: 0.5em;">2022-10-24</span>
</time>
</div>
<main>
<div class="paragraph">
<p>This will add an archive page similar to archive pages <a href="https://davidtranscend.com/archives/">like</a> <a href="https://lukesmith.xyz/blogindex.html">these</a>.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-go" data-lang="go">{{- define "main" -}}
<h1>{{ .Title }}</h1>
{{ .Content }}
<hr>
{{- /* Creating a section that lists out regular pages by year */ -}}
{{ range $.Site.RegularPages.GroupByPublishDate "2006" }}
{{- /* Skip regular pages with an invalid creation date string. */ -}}
{{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}
{{- /* We will also exclude hidden pages. */ -}}
{{ if ne .Key "0001" }}
<section data-year="{{ .Key }}">
<h2 id="{{ .Key }}">{{ .Key }}</h2>
<ul>
{{- range where .Pages "Params.hidden" "!=" true -}}
<li>
<date>{{ .Date.Format "2006-01-02" }}</date> -
<a aria-label="{{ .Title }}" href="{{ .Permalink }}">{{ .Title }}</a>
</li>
{{- end -}}
</ul>
</section>
{{- end }}
{{ end }}
{{- end -}}</code></pre>
</div>
</div>
<div class="paragraph">
<p>We will simply add this as a layout in our customized theme.
Let’s call it <code>archives</code> so we have to add a file in <code>layouts/_default/archives.html</code> then set a page of our project with the <code>layout</code> key in the frontmatter.</p>
</div>
<div class="paragraph">
<p>We want the archives page to be accessed at <code>$.Site.BaseURL/archives</code> so we’ll simply create <code>archives.adoc</code> (<a href="https://gohugo.io/content-management/formats/#list-of-content-formats">any valid content files with certain file extensions can do</a>, I’m using <a href="https://asciidoctor.org/">Asciidoctor</a>) with the following example content.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoctor" data-lang="asciidoctor">---
title: "Archives"
layout: "archive"
---
= Archives
This is the archives of the century.</code></pre>
</div>
</div>
</main>
<hr>
<div class="post__meta--single">
<p data-content-publication-date="2020-10-20 20:36:55 +0800 +0800">Created: <time datetime="2020-10-20">2020-10-20</time></p>
<p data-content-modification-date="2022-10-24 12:59:05 +0800 +0800">Updated: <time datetime="2022-10-24">2022-10-24</time></p>
</div>
</article>
<hr><footer aria-label="Site footer">
<p><a href="#top">Back to top</a></p>
<p>Available in other languages:
<span class="list site__languages">
<a href="/hugo-theme-more-contentful/en" hreflang="en">English</a>
<a href="/hugo-theme-more-contentful/tl" hreflang="tl">Tagalog</a>
</span>
</p>
<ul class="list site__socials">
<li>
<a class="site__social-icon" rel="me" href="https://example.org/gmail" aria-label="E-mail">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/keybase" aria-label="Keybase">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/devdotto" aria-label="Dev.to">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/github/" aria-label="GitHub">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/gitlab" aria-label="GitLab">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/lichess" aria-label="Lichess">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/picartodottv" aria-label="Picarto.tv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/pixiv" aria-label="Pixiv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitch" aria-label="Twitch">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitter" aria-label="Twitter">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/youtube" aria-label="YouTube">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube"></use>
</svg>
</a>
</li></ul>
<p>© 2022 More Contentful</p>
</footer>
</body>
</html>