Hugo - Widget

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

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 custom css based on Bulma box to suit example needs, and of course you can use any class other than this custom css.

Source Code

You can download the source code of this article here.

Related Article: SASS

The SASS part of this article is already discussed in this two article:

It is time to reuse the class for real world situation.

Related Article: Hugo

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

Again, a rewrite.

1: Prepare

Theme

Still with tutor-04.

theme        = "tutor-04"

Layout: Single

Our final layout would be:

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

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

The beauty of this Go html/template, is that we can define other template in the same file artefact, even when we do not really use it. For example I put this aside-long, in the same file artefact, so that I can copy-paste to aside template whenever I need.

{{ define "aside-long" }}
  <aside class="col-md-4">
    {{ partial "widget/recent-post.html" . }}
    {{ partial "widget/archives.html" . }}

    {{ partial "widget/categories.html" . }}
    {{ partial "widget/tags.html" . }}

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

We are going to discuss each partial, one by one.

SASS: List

As already mention in other article, You can see the code here:

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

...

-._

2: Simple Example

Consider start with simple example. We need something without any loop, go html/template tag or whatsoever. Pure HTML with a list of URLs, that you might need to show on your side panel.

Layout: Single

Consider examine only recent posts:

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

Partial: Widget

<section class="panel is-light">
  <div class="panel-header">
    <p>Affiliates</p>
    <span class="fa fa-child"></span>
  </div>
  <div class="panel-body has-background-white">
    <ul class="panel-list">
      <li><a href="http://epsi-rns.github.io/"
            >Linux/BSD Desktop Customization</a></li>
      <li><a href="http://epsi-rns.gitlab.io/"
            >Mobile/Web Development Blog</a></li>
      <li><a href="http://oto-spies.info/"
            >Car Painting and Body Repair.</a></li>
    </ul>
  </div>
</section>

Server Output: Browser

Just open one of the quote post:

Now you can see the result in the browser.

Hugo: Widget Affiliates

This the basic of HTML class required for the rest of this article.

3: Recent Post

Layout: Single

Consider examine only recent posts:

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

Partial: Widget

<section class="panel is-light">
  <div class="panel-header">
    <p>Recent Post</p>
    <span class="fa fa-newspaper"></span>
  </div>
  <div class="panel-body has-background-white">
    <ul class="panel-list">
      {{ range first 5 (where .Site.Pages "Type" "post") }}
      <li><a href="{{ .URL | absURL }}">{{ .Title }}</a></li>
      {{ end }}
    </ul>
  </div>
</section>

The Loop

I limit the result for only first five result.

      {{ range first 5 (where .Site.Pages "Type" "post") }}
        ...
      {{ end }}

Server Output: Browser

Now you can see the result in the browser.

Hugo: Widget Recent Posts

4: Categories and Tags

Both are Taxonomies. So the layouts is pretty similar.

Partial: Widget: Categories

<section class="panel is-light">
  <div class="panel-header">
    <p>Categories</p>
    <span class="fa fa-tag"></span>
  </div>
  <div class="panel-body has-background-white">
    {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
      <a class="tag is-small is-info" href="{{ printf "categories/%s" $name | absURL }}">
        {{ $name }}&nbsp;<span class="fa fa-folder"></span>
      </a>&nbsp;
    {{ end }}
  </div>
</section>

The Loop

The loop is self explanatory.

    {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
      ...
    {{ end }}

Server Output: Browser

Now you can see the result in the browser.

Hugo: Widget Categories

Partial: Widget: Tags

Consider make the code above a little bit more complex. We can pass argument to side panels. Here we can have a choice of tag icon to be shown, after or before.

{{ define "aside" }}
  <aside class="side column is-one-thirds is-paddingless">
    {{ partial "widget/tags.html" (dict "taxonomies" .Site.Taxonomies "view_tag_type" "before") }}
  </aside>
{{ end }}
{{/* view_tag_type : 'before' or 'after' */}}

<section class="panel is-light">
  <div class="panel-header">
    <p>Tags</p>
    <span class="fa fa-tag"></span>
  </div>
  <div class="panel-body has-background-white">
    {{ if eq .view_tag_type "after" }}
      {{ range $name, $taxonomy := .taxonomies.tags }}
        <a class="tag is-small is-light has-background-white"
           href="{{ printf "tags/%s" $name | absURL }}">
          {{ $name }}&nbsp;<span class="fa fa-folder"></span>
        </a>&nbsp;
      {{ end }}
    {{ else }}
      {{ range $name, $taxonomy := .taxonomies.tags }}
        <a class="tag is-small is-light has-background-white"
           href="{{ printf "tags/%s" $name | absURL }}">
          <span class="fa fa-folder"></span>&nbsp;{{ $name }}
        </a>&nbsp;
      {{ end }}
    {{ end }}
  </div>
</section>
  • .

The Loop

The loop is still self explanatory.

    {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
      ...
    {{ end }}

Server Output: Browser

Now you can see the result in the browser.

Hugo: Widget Tags

5: Archives

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

Partial: Widget

<section class="panel is-light">
  <div class="panel-header">
    <p>Archives</p>
    <span class="fa fa-archive"></span>
  </div>
  <div class="panel-body has-background-white">
  {{ $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="panel-archive">
      {{ range (.Pages.GroupByDate "January") }}
      {{ $month := .Key }}
      <li class="list-month">
        
        <span id="{{ $year }}-{{ $month }}">
              <a href="{{ "pages/archives" | absURL }}#{{ $year }}-{{ $month }}">
              {{ $month }}</a> - {{ $year }}</span>

        {{ if eq $month $page_month }}
          <ul class="panel-list">
          {{ 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>
</section>

The Loop

I know it is complex.

  {{ range ($posts.GroupByDate "2006") }}  
    {{ $year := .Key }}
    ...

    {{ if eq $year $page_year }}
      {{ range (.Pages.GroupByDate "January") }}
      {{ $month := .Key }}
      ...

        {{ if eq $month $page_month }}
          {{ range $post_month := .Pages }}
          ...
              {{ $post_month.Title }}
          ...
          {{ end }}
        {{ end }}

      {{ end }}

    {{ end }}

  {{ end }}

Th effort is worthy.

Server Output: Browser

Now you can see the result in the browser.

Hugo: Widget Archives

What is Next ?

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

Thank you for reading.