Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  


Preface

Again I rewrite this article, so beginner can understand.

Goal: Building content, and produce list for section.

Table of Content

  • Preface: Table of Content

  • 1: Section

  • 2: Populate

  • 3: Simple Listing

  • 4: Grouped Listing: by Year (simple)

  • 5: Grouped Listing: by Year and Month

  • What is Next ?

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.

+++
type       = "post"
title      = "{{ replace .TranslationBaseName "-" " " | title }}"
date       = {{ .Date }}
categories = []
tags       = []
slug       = ""
author     = "epsi"
+++

For this quotes section, we can also set the permalink behaviour.

[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

Hugo: Example Content

The result will be

+++
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

Hugo: All Content

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:

Hugo: Simple List in Browser

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.

// -- -- -- -- --
// _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" }}&nbsp;
          <span class="fa fa-calendar"></span>
      </time></div>
      <div class="is-clearfix"></div>
    </div>
  {{ end }}

Server Output: Browser

Now we can see the list:

Hugo: Styled List in Browser

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:

{{ 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.

  <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" }}&nbsp;
          <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.

// -- -- -- -- --
// _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

Hugo: List by Year in 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:

{{ 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.

  {{ $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" }}&nbsp;
            <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

Hugo: List by Month in Browser


What is Next ?

There are, some interesting topic about Taxonomy in Hugo. Consider continue reading [ Hugo - Taxonomy ].

Thank you for reading.