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


Preface

This article is intended for beginner.

Goal: Building content, and produce list for section.

Table of Content

  • Preface: Table of Content

  • 1: Section

  • 2: Populate

  • 3: Listing

  • What is Next ?


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.