Hugo - Archive

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

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.