Preface
Again I rewrite this article, so beginner can understand.
Goal: Building content, and produce list for section.
Source Code
You can download the source code of this article here.
Related Article
I also wrote about Hugo Bootstrap Section List. Step by step article, that you can read here:
1: Section
I have been looking for a good content for these tutorial. And believe me it is as hard as giving a good variable naming. I look for simple content, such as churchill quotes, also navier-stokes explanation, and finally end up with quotes song lyric.
So yes, I decide to create a section, named quotes.
$ tree -d content
content
├── letters
├── pages
├── posts
└── quotes
4 directories
Distance between couples always a touchy tale.
Archetypes
Since every quotes
having similar frontmatter,
we can make a frontmatter template,
so we do not have to type each time we make a new document.
Consider this archetypes for quotes.
-
- themes/tutor-04/archetypes/quotes.md
- gitlab.com/…/archetypes/quotes.md
+++
type = "post"
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
categories = []
tags = []
slug = ""
author = "epsi"
+++
Permalink
For this quotes section, we can also set the permalink behaviour.
-
- config.toml
- gitlab.com/…/config.toml
[permalinks]
posts = ":section/:year/:month/:day/:slug"
quotes = ":section/:year/:month/:day/:slug"
2: Populate the Content
Now you can easily make ten content with archetypes.
Example Content
$ hugo new quotes/cranberries-dreaming-my-dreams.md
/home/epsi/tutor-hugo-bulma-04/content/quotes/cranberries-dreaming-my-dreams.md created
The result will be
-
- content/quotes/cranberries-dreaming-my-dreams.md
- gitlab.com/…/…my-dreams.md
+++
type = "post"
title = "Cranberries Dreaming My Dreams"
date = 2019-05-08T04:34:02+07:00
categories = []
tags = []
slug = ""
author = "epsi"
+++
Edit the frontmatter and add content, so that we have something similar as below:
+++
type = "post"
title = "Cranberries - Dreaming my Dreams"
date = 2015-03-15T07:35:05+07:00
categories = ["lyric"]
tags = ["alternative", "90s"]
slug = "cranberries-dreaming-my-dreams"
author = "epsi"
+++
All the things you said to me today
Changed my perspective in every way
These things count to mean so much to me
Into my faith you and your baby
I'll be dreaming my dreams with you
I'll be dreaming my dreams with you
And there's no other place that I'd lay down my face
I'll be dreaming my dreams with you
And The Rest
Consider do the rest for these nine lyrics:
$ for i in quotes/{\
"darius-rucker-think-about-it",\
"dashboard-confessional-stolen",\
"dashboard-confessional-vindicated",\
"julian-baker-sprained-ankle",\
"lisa-loeb-how",\
"m2m-the-day-you-went-away",\
"natalie-cole-i-wish-you-love",\
"paul-simon-jonah",\
"pixies-where-is-my-mind",\
"the-used-hard-to-say"}.md;\
do hugo new "$i"; done
/home/epsi/tutor-hugo-bulma-04/content/quotes/darius-rucker-think-about-it.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/dashboard-confessional-stolen.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/dashboard-confessional-vindicated.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/julian-baker-sprained-ankle.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/lisa-loeb-how.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/m2m-the-day-you-went-away.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/natalie-cole-i-wish-you-love.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/paul-simon-jonah.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/pixies-where-is-my-mind.md created
/home/epsi/tutor-hugo-bulma-04/content/quotes/the-used-hard-to-say.md created
Also edit the frontmatter and add content, for the rest of the nine lyrics.
Layout: List: Simple Range
The Loop
The range is as simple as this loop below.
{{ range .Data.Pages }}
...
{{ end }}
Simple Example
Consider begin with simple list
layouts.
{{ define "main" }}
<main role="main"
class="column is-full box-deco has-background-white">
<section class="section">
<h4 class="title is-4">{{ .Section }}</h4>
{{ .Content }}
{{ range .Data.Pages }}
<div><a href="{{ .URL | absURL }}">
{{ .Title }}
</a></div>
{{ end }}
</section>
</main>
{{ end }}
Server Output: Browser
Now we can see the list:
Now we need to design a more informative template layout for this content list.
Custom Stylesheet
Add custom sass, so the list can have better looks.
-
- themes/tutor-04/sass/css/_list.sass
- gitlab.com/…/sass/css/_list.sass.
// -- -- -- -- --
// _list.sass
div.archive-month,
div.archive-item
position: relative
div.archive-item a:before
position: absolute
left: -15px
font-family: "Font Awesome 5 Free"
content: '\f054'
color: $gray
div.archive-month:before
position: absolute
left: -20px
font-family: "Font Awesome 5 Free"
content: '\f073'
color: $black
.archive-item:hover:before
color: $dark
The Loop
The range loop, is still the same
{{ range .Data.Pages }}
...
{{ end }}
.
Styled Example
And customize with this custom stylesheet.
{{ range .Data.Pages }}
<div class="archive-item">
<div class="is-pulled-left"><a href="{{ .URL | absURL }}">
{{ .Title }}
</a></div>
<div class="is-pulled-right has-text-right"><time>
{{ .Date.Format "02 Jan" }}
<span class="fa fa-calendar"></span>
</time></div>
<div class="is-clearfix"></div>
</div>
{{ end }}
Server Output: Browser
Now we can see the list:
Now we need to design a more informative template layout for this content list.
Layout: List: Grouped Range: by Year (simple)
The Outer Loop
The range is as a little bit complex.
Instead of all kind of pages, we filter it to show only post type.
{{ $posts := where .Data.Pages "Type" "post" }}
{{ range ($posts.GroupByDate "2006") }}
...
{{ range .Pages }}
...
{{ .Title }}
...
{{ end }}
{{ end }}
Layout: Default List
Consider change this artefact:
-
- themes/tutor-04/layouts/_default/list.html
- gitlab.com/…/layouts/_default/list.html
{{ define "main" }}
<main role="main"
class="column is-full box-deco has-background-white">
<section class="section">
<h4 class="title is-4">{{ .Section }}</h4>
{{ .Content }}
</section>
{{ $posts := where .Data.Pages "Type" "post" }}
{{ range ($posts.GroupByDate "2006") }}
<section class="section" id="archive">
{{ partial "summary/by-year.html" . }}
</section>
{{ end }}
</main>
{{ end }}
Listing By Year
Instead of simple loop, we can group the article by year. The detail of the partial layout can be seen here.
- themes/tutor-04/layouts/partials/summary-by-year.html : gitlab.com/…/partials/summary-by-year.html
<div class ="anchor-target archive-year"
id="{{ .Key }}">{{ .Key }}</div>
<div class="archive-list archive-p3">
{{ range .Pages }}
<div class="archive-item">
<div class="is-pulled-left"><a href="{{ .URL | absURL }}">
{{ .Title }}
</a></div>
<div class="is-pulled-right has-text-right"><time>
{{ .Date.Format "02 Jan" }}
<span class="fa fa-calendar"></span>
</time></div>
<div class="is-clearfix"></div>
</div>
{{ end }}
</div>
The Inner Loop
We move the inner range as this loop below.
{{ range .Pages }}
...
{{ .Title }}
...
{{ end }}
Custom Stylesheet
Add custom scss, so the list can have better looks.
-
- themes/tutor-04/sass/css/_list.sass
- gitlab.com/…/sass/css/_list.sass.
// -- -- -- -- --
// _list.sass
.archive-p3
padding-left: 15px
.archive-p4
padding-left: 20px
// -- -- -- -- --
// Components: Tags
.archive-year
font-weight: bold
// -- -- -- -- --
// Flip Flop
.archive-list
.archive-item:nth-child(even)
background-color: darken($white, 3%)
.archive-item:nth-child(odd)
background-color: darken($white, 5%)
.archive-item:hover
background-color: lighten($yellow, 10%)
I won’t go deep into sass, as we have already an article covering sass in Bulma.
.
Server Output: Browser
Layout: List: Grouped Range: by Year and Month
It is basically the same with the previous one.
Listing By Month
Of course, you can make, a more sophisticated listing, by changing this artefact:
-
- themes/tutor-04/layouts/_default/list.html
- gitlab.com/…/layouts/_default/list.html
{{ define "main" }}
<main role="main"
...
<section id="archive">
{{ range ($posts.GroupByDate "2006") }}
{{ partial "summary-by-month.html" . }}
{{ end }}
</section>
</main>
{{ end }}
We use multiple loop stage. Outer: Group the article by year. And inner: Group Article by month.
- themes/tutor-04/layouts/partials/summary-by-month.html : gitlab.com/…/partials/summary-by-month.html
{{ $year := .Key }}
<div class ="anchor-target archive-year"
id="{{ $year }}">
{{- if eq .Key (now.Format "2006") -}}
This year's posts ({{ $year }})
{{- else -}}
{{ .Key }}
{{- end -}}
</div>
{{ range (.Pages.GroupByDate "January") }}
{{ $month := .Key }}
<div class="archive-p4">
<div class ="archive-month"
id="{{ $year }}-{{ $month }}">
{{ $month }} - {{ $year }}</div>
<div class="archive-list archive-p3">
{{ range .Pages }}
<div class="archive-item">
<div class="is-pulled-left"><a href="{{ .URL | absURL }}">
{{ .Title }}
</a></div>
<div class="is-pulled-right has-text-right"><time>
{{ .Date.Format "02 Jan" }}
<span class="fas fa-calendar"></span></time></div>
<div class="is-clearfix"></div>
</div>
{{ end }}
</div>
</div>
{{ end }}
The Inner Loop
This require nested loops as below:
{{ range (.Pages.GroupByDate "January") }}
{{ range .Pages }}
...
{{ .Title }}
...
{{ end }}
{{ end }}
Server Output: Browser
What is Next ?
There are, some interesting topic about Taxonomy in Hugo. Consider continue reading [ Hugo - Taxonomy ].
Thank you for reading.