Hugo - Data

   
   
 hugo  
 ssg  frontend  
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: 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.

Static Data

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

# Helper for related links

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

- title: "epsi @ github.io"
  url: http://epsi-rns.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 acces this simple data using .Site.Data.friends

Partial: Widget

<div class="card hidden-sm hidden-xs mb-3">
  <div class="card-header bg-dark text-light pb-0">
    <p class="card-title">Friends</p>
  </div>
  <div class="card-body py-2">
    <ul class="archive-list">
      {{ range first 9 (shuffle .Site.Data.friends) }}
      <li><a href="{{ .url }}">{{ .title }}</a></li>
      {{ end }}
    </ul>
  </div>
</div>

Layout: Single

Do not forget to change the single.html

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

{{ define "aside" }}
  <aside class="col-md-4">
    {{ partial "card-friends.html" . }}
  </aside>
{{ end }}

Server Output: Browser

Now you can see the result in the browser. Due to the wide image, I crop only the card part.

Hugo: Card 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: 14032535
  title: "Bruce Springsteen - One Step Up"
  url: /quotes/2014/03/25/bruce-springsteen-one-step-up/
  
- id: 14031535
  title: "Bruce Springsteen - The River"
  url: /quotes/2014/03/15/bruce-springsteen-the-river/

...

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.

Partial: Widget

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

{{ if .Params.related_link_ids }}
<div class="card hidden-sm mb-3">
  <div class="card-header bg-dark text-light pb-0">
    <p class="card-title">Related Posts</p>
  </div>
  <div class="card-body py-2">
    <ul class="archive-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>
</div>
{{ end }}

Content: Example

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

+++
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"

related_link_ids = [
  "14032535"  # One Step Up
]

+++

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

Server Output: Browser

Now you can see the result in the browser. Due to the wide image, I crop only the card part.

Hugo: Card Related Posts

What is Next ?

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

adorable kitten

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

Thank you for reading.