Hugo - Data

   
   
 hugo  
 ssg  frontend  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Using data feature.

There is no such things as database connection in static site generator.

However, we can use static data, to fulfill simple requirement.

Source Code

You can download the source code of this article here.

Related Article

I also wrote about Hugo Bootstrap Data. Step by step article, that you can read here:

I do not rewrite this article. It is exactly the same as the previous one, only with different HTML class.

Static Data

Suppossed, we want to show all blog site, at widget in the sidebar. Instead of manually coding the html, we can prepare the data.

# Isle of friends

- title: "BanditHijo (R)-Chive"
  url: http://bandithijo.com/

- title: "Sira Argia (Aflasio)"
  url: https://aflasio.netlify.com/

- title: "Rania Amina"
  url: https://raniaamina.github.io/

This might looks stupid, because we can directly write the result in html. But in the next example, we can show you how data can be dynamic.

Later we can access this simple data using .Site.Data.friends.

Layout: Widget

<section class="panel is-light">
  <div class="panel-header">
    <p>Isle of Friends</p>
    <span class="fa fa-child"></span>
  </div>
  <div class="panel-body has-background-white">
    <ul class="panel-list">
      {{ range first 5 (shuffle .Site.Data.friends) }}
      <li><a href="{{ .url }}">{{ .title }}</a></li>
      {{ end }}
    </ul>
  </div>
</section>

The Loop

I also shuffle the result so for each page they shown randomly..

      {{ range first 9 (shuffle .Site.Data.friends) }}
        ...
      {{ end }}

Layout: Single

Do not forget to change the single.html

{{ define "main" }}
...
{{ end }}

{{ define "aside" }}
  <aside class="side column is-one-thirds is-paddingless">
    {{ partial "widget/friends.html" . }}
  </aside>
{{ end }}

Server Output: Browser

Now you can see the result in the browser.

Hugo: Widget Friends

2: Local Link: Related Post

Remember our last archives page ? Yeah, the yaml data one. We can use it here.

Static Data

The data look like here below:

# Helper for related links
# Archives by Date

...

- id: 15051535
  title: "Dashboard Confessional - Stolen"
  url: /quotes/2015/05/15/dashboard-confessional-stolen/
  
- id: 15051515
  title: "Dashboard Confessional - Vindicated"
  url: /quotes/2015/05/15/dashboard-confessional-vindicated/

...

Data Generator

So what is it, the id field ? Well, our data related posts , need a simple data id. But since we do not have RDBMS, we can emulate the id. We are going to use the id from the date field in frontmatter.

The data/archives.yml itself is generated. We have already discuss custom content type in previous chapter.

{{- define "main" -}}
# Helper for related links
# {{ .Title }}

{{ range (where .Site.Pages "Type" "post") }}
  {{- if .Date }}
- id: {{ .Date.Format "06010204" }}
  title: "{{ .Title }}"
  url: {{ .URL }}
  {{ end -}}
{{ end }}

{{- end -}}

The format “06010204”, means [year-month-date-minute]. It is rarely, that I blog with the same minute in the same day. This way, the id would be unique.

The data should be downloaded manually

I know, it seems tricky, but it works well so far.

Layout: Widget

Now that we already have the id, it is time to use the data.

{{ if .Params.related_link_ids }}
<section class="panel is-light">
  <div class="panel-header">
    <p>Related Posts</p>
    <span class="fa fa-link"></span>
  </div>
  <div class="panel-body has-background-white">
    <ul class="panel-list">
      {{ range $cur := .Params.related_link_ids }}
      <li>   
        {{ range $.Site.Data.archives }}

          {{- if eq $cur (print .id) -}}
          <a href="{{ .url | absURL }}">{{ .title }}</a>
          {{- end -}}

        {{ end }}
      </li>
      {{ end }}
    </ul>
  </div>
</section>
{{ end }}

Content: Example

If we want to use it, related_link_ids in frontmatter. Consider this example.

+++
type       = "post"
title      = "Dashboard Confessional - Vindicated"
date       = 2015-05-15T07:15:05+07:00
categories = ["lyric"]
tags       = ["alternative", "2000s"]
slug       = "dashboard-confessional-vindicated"
author     = "epsi"

related_link_ids = [
  "15051535"  # Stolen
]

+++

Vindicated
I am selfish I am wrong
I am right, I swear I'm right
Swear I knew it all along
And I am flawed, but I am cleaing up so well
I am seeing in me now the things you swore you saw yourself

Server Output: Browser

Now you can see the result in the browser.

Hugo: Card Related Posts

What is Next ?

The next tutorial, about pagination, is little bit harder to chew, and need even more concentration than before. You need a fresh mind to continue.

adorable kitten

Consider having a break for a while, and look at these four sisters. Somebody put these kittens stranded, so I have to rescue them. Have a relax, you may take a bath, let go of your weary mind, but do not forget to resume our tutorial.

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

Thank you for reading.