Hugo - Widget

   
   
 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: Miscellanous range loop to achieved wordpress like sidebar.

We can make a sidebar, so that we can have more information, just like what common in wordpress site or other blogging platform. I’m using Bootstrap card, and of course you can use view other than bootstrap card.

1: Prepare

Copy Theme

Wwith your file manager, copy manually themes/tutor-04 to themes/tutor-05.

theme        = "tutor-05"

Layout: Single

Our final layout would be:

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

{{ define "aside" }}
  <aside class="col-md-4">
    {{ partial "card-recent-posts.html" . }}
    {{ partial "card-archives.html" . }}

    {{ partial "card-categories.html" . }}
    {{ partial "card-tags.html" . }}

    {{ partial "card-friends.html" . }}    
    {{ partial "card-related-posts.html" . }}
  </aside>
{{ end }}

But we are going to discuss one by one.

SASS: List

I’m using Bootstrap card. So I do not need to setup my own css.

However, I still need a few changes, to make it a little bit pretty.

// -- -- -- -- --
// _list.scss

div.archive-list {
  position: relative;
}

div.archive-list a:before {
  position: absolute;
  left: -15px;
  content: "\00BB";
  color: $dark;
}

div.archive-list:hover {
  background-color: lighten($yellow, 10%);
}

ul.archive-list,
ul.archive-list ul, {
  position: relative;
  list-style: none;
}

ul.archive-list li:before {
  position: relative;
  left: -15px;
  content: "\00BB";
  color: $dark;
}

ul.archive-list li:hover {
  background-color: lighten($yellow, 10%);
}

ul.archive-list li li:hover {
  background-color: lighten($yellow, 30%);
}

Of course you can use view other than bootstrap card.

.

2: Recent Post

Layout: Single

Consider examine only recent posts:

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

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">Recent Posts</p>
  </div>
  <div class="card-body py-2">
    <ul class="archive-list">
      {{ range first 5 (where .Site.Pages "Type" "post") }}
      <li><a href="{{ .URL | absURL }}">{{ .Title }}</a></li>
      {{ end }}
    </ul>
  </div>
</div>

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 Recent Posts

3: Categories and Tags

Both are Taxonomies. So the layouts is pretty similar.

Partial: Widget: Categories

<div class="card mb-3">
  <div class="card-header bg-dark text-light pb-0">
    <p class="card-title">Categories</p>
  </div>
  <div class="card-body py-2">
    {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
      <a href="{{ printf "categories/%s" $name | absURL }}">
        <span class="badge badge-primary">{{ $name }}</span>
      </a>&nbsp;
    {{ end }}
  </div>
</div>

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 Categories

Partial: Widget: Tags

<div class="card mb-3">
  <div class="card-header bg-dark text-light pb-0">
    <p class="card-title">Tags</p>
  </div>
  <div class="card-body py-2">
    {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
      <a href="{{ printf "tags/%s" $name | absURL }}">
        <span class="badge badge-secondary">{{ $name }}</span>
      </a>&nbsp;
    {{ end }}
  </div>
</div>

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 Tags

4: Archives

Remember the Archives tutorial in a previous chapter ? We can also apply this in similar fashion.

Partial: Widget

<div class="card mb-3">
  <div class="card-header bg-dark text-light pb-0">
    <p class="card-title">Archives</p>
  </div>
  <div class="card-body py-2">

  {{ $posts := where .Site.Pages "Type" "post" }}
  {{ $page_year   := .Page.Date.Format "2006" }}
  {{ $page_month  := .Page.Date.Format "January" }}
    
  {{ range ($posts.GroupByDate "2006") }}  
    {{ $year := .Key }}
      <div class ="archive-year" id="{{ $year }}">
        <a href="{{ "pages/archives" | absURL }}#{{ $year }}">
        {{ $year }}</a>
      </div>

    {{ if eq $year $page_year }}
      <ul class="archive-list">
      {{ range (.Pages.GroupByDate "January") }}
      {{ $month := .Key }}
      <li>
        
        <span id="{{ $year }}-{{ $month }}">
              <a href="{{ "pages/archives" | absURL }}#{{ $year }}-{{ $month }}">
              {{ $month }}</a> - {{ $year }}</span>

        {{ if eq $month $page_month }}
          <ul>
          {{ range $post_month := .Pages }}

          <li>
            <a href="{{ $post_month.URL | absURL }}">
              {{ $post_month.Title }}
            </a>
          </li>
          {{ end }}
          </ul>
        {{ end }}

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

  {{ end }}
  </div>
</div>

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 Archives

What is Next ?

There are, some interesting topic about Example Static Data with Hugo. Consider continue reading [ Hugo - Data ].

Thank you for reading.