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: Create blog archive, a site wide content list for all posts.

Table of Content

  • Preface: Table of Content

  • 1: Archive Page by Group

  • 2: Chronogical Archive List

  • 3: Real World Navigation

  • What is Next ?


1: Archive Page by Group

We can make a page dedicated for archiving all posts. I always have this page, to show a shortcut to all article links.

Prepare All Artefacts

$ mkdir themes/tutor-04/layouts/archives
$ touch themes/tutor-04/layouts/archives/single.html

$ mkdir content/pages
$ touch content/pages/archives.md

Content: Single

Just an empty fronmatter without the need of any content.

+++
type  = "archives"
title = "Archives by Date"
+++

Layout: Single

{{ 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>{{ .Title | default .Site.Title }}</h4>
  </header>

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

Partial: Summary

Already discussed in previous article.

Server Output: Browser

And see the result

Hugo: Archive by Group

The different of this page and the taxonomy page is: the list filtered for specific page kind named post.


2: Chronogical Archive List

And you can also have page list with chronological order. Later we will combine this with nice pagination.

Prepare All Artefacts

$ touch themes/tutor-04/layouts/archives/list.html
$ touch themes/tutor-04/layouts/partials/summary-blog-list.html
$ touch content/pages/_index.md

Content: List

Also no content required. Frontmatter is sufficient.

+++
type  = "archives"
title = "Blog List"
+++

Layout: List

{{ 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>{{ .Title | default .Site.Title }}</h4>
  </header>

  <article>
    {{ .Content }}
  </article>

  {{ $posts := where .Site.Pages "Type" "post" }}
  <section id="archive">
  <div class="post-list">
    {{ range $posts }}
      {{ partial "summary-blog-list.html" . }}
    {{ end }}
  </div>
  </section>
</main>
{{ end }}

Partial: Summary

Where the summary layout template is similar as code below:

    <div class="p-3">

      <strong><a href="{{ .Permalink }}">{{ .Title }}</strong></a>

      <div>
        <div class="float-left">
          <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
          {{ .Date.Format "Jan 2, 2006" }}</time>
        </div>      
        <div class="float-right" id="meta_tags">
          {{ range .Params.tags }}
            <a href="{{ printf "tags/%s" . | absURL }}">
              <span class="badge badge-dark">{{ . }}</span></a>
          {{ end }}
        </div>
      </div> 

      <div class="clearfix"></div>
      
      <div>
        {{ if .Params.Excerpt -}}
          {{ .Params.Excerpt }}
        {{- else -}}
          {{ .Summary }}
        {{- end }}
      </div>

      <div class="read-more">
        <a href="{{ .Permalink }}" 
           class="btn btn-dark btn-sm">Read More</a>
      </div>

    </div>

I’m using bootstrap badge feature.

Server Output: Browser

Consider see the result as usual.

Hugo: Chronological Blog Archive


3: Real World Navigation

Now that our archives layout and taxonomy pages has complete, Consider change the header.

Hugo: Wide Navigation

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top
              bg-dark maxwidth rounded-bottom shadow-hover
              border border-top-0 border-light">
    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
       <img src="{{ "images/logo-gear-blue.png" | absURL }}"
           alt="Home" />
    </a>
    <button class="navbar-toggler" type="button" 
        data-toggle="collapse" data-target="#navbarCollapse" 
        aria-controls="navbarCollapse" aria-expanded="false" 
        aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="{{ "pages" | absURL }}"
             >Blog <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
             role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Archives
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="{{ "tags" | absURL }}">By Tag</a>
            <a class="dropdown-item" href="{{ "categories" | absURL }}">By Category</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="{{ "pages/archives" | absURL }}">By Date</a>
          </div>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" 
          placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-light my-2 my-sm-0" 
          type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

Server Output: Browser

Now you can see a usable navigation bar in your smartphone.

Hugo: Small Navigation

We will add nice pagination later.


What is Next ?

Tired ? Consider relax, and look at this innocent kitten in my kitchen. I rescued her after almost drowned in sewer. Have a break for a while, make another cup of coffe, eat your veggies, and resume our tutorial.

adorable kitten

There are, some interesting topic about Hugo Custom Content Type. Consider continue reading [ Hugo - Custom Content Type ].

Thank you for reading.