Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 


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.

Table of Content

  • Preface: Table of Content

  • 1: Prepare

  • 2: Simple Example

  • 3: Recent Post

  • 4: Categories and Tags

  • 5: Archives

  • What is Next ?

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 Hugo Chroma, 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, chroma 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.