2021-07-07 07:53:40 +00:00
<!DOCTYPE html>
2022-04-30 12:42:22 +00:00
< html lang = "en-us" > < title > Creating an archive page | More Contentful< / title >
2021-07-07 07:53:40 +00:00
2022-10-23 16:14:26 +00:00
< 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" / >
2021-07-07 07:53:40 +00:00
< 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" / >
2022-04-30 13:04:28 +00:00
< 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" / >
2021-07-07 07:53:40 +00:00
< meta property = "article:published_time" content = "2020-10-20T20:36:55+08:00" / >
2022-10-24 05:00:34 +00:00
< meta property = "article:modified_time" content = "2022-10-24T12:59:05+08:00" / >
2022-05-01 12:40:36 +00: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" / >
2022-10-24 05:00:34 +00:00
< meta itemprop = "dateModified" content = "2022-10-24T12:59:05+08:00" / >
2022-05-01 12:40:36 +00: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/" / >
2021-07-07 07:53:40 +00:00
< script >
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
< / script >
< body >
2022-04-30 12:42:22 +00:00
< div class = "site__theme-btn" aria-label = "Theme toggle" >
< svg class = "icon" >
2022-10-23 16:14:26 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/swatch.svg#swatch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< 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 >
2022-10-23 16:14:26 +00:00
< 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 >
2022-04-30 12:42:22 +00:00
< 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
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2022-06-13 13:51:31 +00:00
< 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");
}
}
}
2022-04-30 12:42:22 +00:00
const themeDropdown = document.querySelector('.site__theme-btn');
2022-06-13 13:51:31 +00:00
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;
2021-07-07 07:53:40 +00:00
}
2022-06-13 13:51:31 +00:00
}
styleTheme();
});
styleTheme();
2022-04-30 12:42:22 +00:00
< / script >
< nav aria-label = "Site header" >
2022-04-30 13:04:28 +00:00
< a class = "site__title" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful" > More Contentful< / a >
2021-07-07 07:53:40 +00:00
< div class = "list site__links" >
2022-04-30 13:04:28 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / div >
< / nav >
2022-04-30 12:42:22 +00:00
< hr >
2021-07-07 07:53:40 +00:00
< article class = "post--single" >
< header >
< h1 > Creating an archive page< / h1 >
< / header >
2022-05-01 12:40:36 +00:00
< div class = "list post__meta" > < time datetime = "2020-10-20 20:36:55 +0800 +0800" title = "Created" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-10-24 05:00:34 +00:00
< time datetime = "2022-10-24 12:59:05 +0800 +0800" title = "Updated" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-10-23 16:14:26 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/arrow-path.svg#arrow-path" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-10-23 16:14:26 +00:00
< span style = "margin-left: 0.5em;" > 2022-10-24< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
2022-04-30 12:42:22 +00:00
2021-07-07 07:53:40 +00:00
< 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’ < 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’ < 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’ < 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 >
2022-10-24 05:00:34 +00:00
< p data-content-modification-date = "2022-10-24 12:59:05 +0800 +0800" > Updated: < time datetime = "2022-10-24" > 2022-10-24< / time > < / p >
2021-07-07 07:53:40 +00:00
< / div >
< / article >
2022-04-30 12:42:22 +00:00
< hr > < footer aria-label = "Site footer" >
2021-07-07 07:53:40 +00:00
< p > < a href = "#top" > Back to top< / a > < / p >
< p > Available in other languages:
< span class = "list site__languages" >
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/en" hreflang = "en" > English< / a >
2021-07-07 07:53:40 +00:00
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/tl" hreflang = "tl" > Tagalog< / a >
2021-07-07 07:53:40 +00:00
< / span >
< / p >
< ul class = "list site__socials" >
< li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/gmail" aria-label = "E-mail" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/keybase" aria-label = "Keybase" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/devdotto" aria-label = "Dev.to" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/github/" aria-label = "GitHub" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/gitlab" aria-label = "GitLab" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/lichess" aria-label = "Lichess" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/picartodottv" aria-label = "Picarto.tv" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/pixiv" aria-label = "Pixiv" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/twitch" aria-label = "Twitch" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/twitter" aria-label = "Twitter" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/youtube" aria-label = "YouTube" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < / ul >
2022-04-30 12:42:22 +00:00
< p > © 2022 More Contentful< / p >
2021-07-07 07:53:40 +00:00
< / footer >
< / body >
< / html >
