Hugo - Section List

   
   
 hugo  
 ssg  
Article Series

This article series contain few sections.

Supplementary Article for Windows User.

Clone Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

This article is intended for beginner.

Goal: Building content, and produce list for section.

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.

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"
draft      = true
+++

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/bruce-springsteen-the-river
/media/Works/sites/tutor-hugo/content/quotes/bruce-springsteen-the-river created

Hugo: Example Content

The result will be

+++
type       = "post"
title      = "Bruce Springsteen the River"
date       = 2018-09-15T07:35:05+07:00
categories = ["lyric"]
tags       = []
slug       = ""
author     = "epsi"
draft      = true
+++

Edit the frontmatter and add content, so that we have something similar as below:

+++
type       = "post"
title      = "Bruce Springsteen - The River"
date       = 2014-03-15T07:35:05+07:00
categories = ["lyric"]
tags       = [springsteen, 80s]
slug       = "bruce-springsteen-the-river"
author     = "epsi"
+++

Is a dream a lie 
if it don't come true? 
Or is it something worse?

And The Rest

Consider do the rest for these nine lyrics:

$ for i in quotes/{\
"bruce-springsteen-one-step-up",\
"joni-mitchell-both-sides-now",\
"john-mayer-slow-dancing-in-a-burning-room",\
"julian-baker-something",\
"sarah-mclachlan-angel",\
"avenged-sevenfold-so-far-away",\
"michael-jackson-gone-too-soon",\
"mothers-no-crying-in-baseball",\
"blink-182-adams-song"}.md;\
do hugo new "$i"; done

/media/Works/sites/tutor-hugo/content/quotes/bruce-springsteen-one-step-up.md created
/media/Works/sites/tutor-hugo/content/quotes/joni-mitchell-both-sides-now.md created
/media/Works/sites/tutor-hugo/content/quotes/john-mayer-slow-dancing-in-a-burning-room.md created
/media/Works/sites/tutor-hugo/content/quotes/julian-baker-something.md created
/media/Works/sites/tutor-hugo/content/quotes/sarah-mclachlan-angel.md created
/media/Works/sites/tutor-hugo/content/quotes/avenged-sevenfold-so-far-away.md created
/media/Works/sites/tutor-hugo/content/quotes/michael-jackson-gone-too-soon.md created
/media/Works/sites/tutor-hugo/content/quotes/mothers-no-crying-in-baseball.md created
/media/Works/sites/tutor-hugo/content/quotes/blink-182-adams-song.md created

Hugo: All Content

Also edit the frontmatter and add content, for the rest of the nine lyrics.

Result

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.

3: Listing

Consider change this artefact:

Instead of all kind of pages, we filter it to show only post type.

{{ define "main" }}
<main role="main" 
      class="container-fluid m-3 m-sm-0 p-3
             bg-light rounded border border-dark shadow-hover">
  <header>
    <h4>{{ .Section }}</h4>
  </header>

  {{ .Content }}

  {{ $posts := where .Data.Pages "Type" "post" }}
  <section id="archive">
    {{ range ($posts.GroupByDate "2006") }}
      {{ partial "summary-by-year.html" . }}
    {{ end }}
  </section>
</main>
{{ end }}

Listing By Year

Instead of simple loop, we can group the article by year. The detail of the partial layout can bee seen here.

      <div class ="anchor-target archive-year" 
           id="{{ .Key }}">{{ .Key }}</div>

      {{ range .Pages }}
      <div class="d-flex flex-row-reverse archive-list">
        <div class="text-right "><time>
            {{ .Date.Format "02 Jan" }}&nbsp;</time></div>
        <div class="mr-auto"><a href="{{ .URL | absURL }}">
          {{ .Title }}
        </a></div>
      </div>
      {{ end }}

Add custom scss, so the list can have better looks.

// -- -- -- -- --
// _list.scss

.archive-list {
  position: relative;
}

.archive-list a:before {
  position: absolute;
  left: -15px;
  content: "\00BB";
  color: $dark;
}

.archive-list:hover {
  background-color: $yellow;
}

.

And do not forget to put the newly add custom scss to the main one.

@import
  ...

  // custom
    "layout",
    "decoration",
    "list"
;

Hugo: List by Year in Browser

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="{{ .Key }}">{{ $year }}</div>

  {{ range (.Pages.GroupByDate "January") }}
  {{ $month := .Key }}
  <div class="px-3">
    <span class ="anchor-target archive-month" 
          id="{{ $year }}-{{ $month }}">
          {{ $month }} - {{ $year }}</span>

    <div class="px-3">
      {{ range .Pages }}
      <div class="d-flex flex-row-reverse archive-list">
        <div class="text-right text-nowrap"><time>
            {{ .Date.Format "02 Jan" }}&nbsp;</time></div>
        <div class="mr-auto"><a href="{{ .URL | absURL }}">
          {{ .Title }}
        </a></div>
       </div>
      {{ end }}
     </div>

  </div>
  {{ end }}

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.