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


Preface

Goal: More about blog post content, Header, Footer, and Pagination.

We can save a lot of stylesheet formatting, by using Bulma, or any other CSS framework.

Table of Content

  • Preface: Table of Content

  • 1: Prepare

  • 2: Header

  • 3: Time

  • 4: Footer

  • 5: Post Navigation

  • What is Next ?

Source Code

You can download the source code of this article here.


1: Prepare

This preparation is required.

Theme

We are still in tutor-05.

$ cat config.toml
theme        = "tutor-05"

Preview: General

Consider redesign the looks of blog post. This is what we want to achieve in this tutorial.

Hugo Content: All Artefacts

Layouts: Single

Edit our ancient artefact single.html, that is exist from the very beginning of our tutorial.

{{ define "main" }}
  <main role="main" 
        class="column is-two-thirds blog-column box-deco has-background-white">
    <div class="blog-post" itemscope itemtype="http://schema.org/BlogPosting">
      {{ partial "post/header.html" . }}

      <article class="main-content" itemprop="articleBody">
        {{ .Content }}
      </article>

      <br/>
      {{ partial "post/navigation.html" . }}
    </div><!-- /.blog-post -->
    
    {{ partial "post/footer.html" . }}
  </main>
{{ end }}

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

Talking about schema, you can read this nice site:

Partials: New Artefacts

The code above require three new partials.

Create three empty artefacts,

  • themes/tutor-05/layouts/partials/post/header.html

  • themes/tutor-05/layouts/partials/post/footer.html

  • themes/tutor-05/layouts/partials/post/navigation.html

And one more artefact that is required in post/header.html.

  • themes/tutor-05/layouts/partials/post/time-elapsed.html

2: Header

Consider begin with header.

Preview

Hugo Content: Header

Partials: Minimum

The minimum header is simply showing title.

    <section class="box">
      <div class="main_title"> 
        <h4 class="title is-4 blog-post-title" itemprop="name headline">
          <a href="{{ .Permalink }}">{{ .Page.Title }}</a></h4>
      </div>
    </section>

Partials: Meta

Consider add meta data in post header.

  • author

  • time elapsed (using partial)

  • tags

  • categories

Here I use bulma button, with the eye candy Awesome Font.

    <section class="box">
      <div class="main_title"> 
        <h4 class="title is-4 blog-post-title" itemprop="name headline">
          <a href="{{ .Permalink }}">{{ .Page.Title }}</a></h4>
      </div>

      <div class="is-clearfix"></div>
      
      <div class="field">
        {{ if .Params.author }}
        <div class="is-pulled-left">
        <span class="meta_author tag is-primary is-small">
            <span class="fa fa-user"></span>
            &nbsp;
            <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">{{ .Params.author }}</span></span>            
        </span>
        &nbsp;
        </div>
        {{ end }}

        <div class="is-pulled-right">
          {{ range .Params.tags }}
            <a href="{{ printf "tags/%s" . | absURL }}">
              <span class="tag is-light is-small"><span class="fa fa-tag"></span>&nbsp;{{ . }}</span></a>
          {{ end }}
          &nbsp;
        </div>

        <div class="is-pulled-right">
          {{ range .Params.categories }}
            <a href="{{ printf "categories/%s" . | absURL }}">
              <span class="tag is-dark is-small"><span class="fa fa-folder"></span>&nbsp;{{ . }}</span></a>
          {{ end }}
          &nbsp;
        </div>
      </div>

      <div class="is-clearfix"></div>
    </section>

3: Elapsed Time

As it has been mentioned above, we need special partial for this.

Issue

As a static generator, Hugo compiled the content whenever there are any changes. If there are no changes, the generated time remain static. It means we cannot tell relative time in string such as three days ago, because after a week without changes, the time remain three days ago, not changing into ten days ago.

The solution is using javascript. You can download the script from here

That way the time ago is updated dynamically as time passes, as opposed to having to rebuild Hugo every day.

Do not forget to put the script in static directory.

  • themes/tutor-05/static/js/timeago.min.js

Partial

    <time datetime="{{ .Page.Date.Format "2006-01-02T15:04:05Z07:00" }}" 
          itemprop="datePublished">
    <span class="timeago" datetime="{{ .Page.Date.Format "2006-01-02 15:04:05" }}">
    </span></time>
    &nbsp; 

    <script src="{{ "js/timeago.min.js" | relURL }}"></script>
    <script type="text/javascript">
      var timeagoInstance = timeago();
      var nodes = document.querySelectorAll('.timeago');
      timeagoInstance.render(nodes, 'en_US');
      timeago.cancel();
      timeago.cancel(nodes[0]);
    </script>

We already have Header. Why do not we continue with footer?

Preview

Hugo Content: Footer

Partials

    <footer class="section">
      <div class="columns">

        <div class="column is-narrow has-text-centered">
            <img src="/site/images/license/cc-by-sa.png" 
                 class="bio-photo" 
                 height="31"
                 width="88"
                 alt="CC BY-SA 4.0"></a>
        </div>

        <div class="column has-text-left">
            This article is licensed under:&nbsp;
            <a href="https://creativecommons.org/licenses/by-sa/4.0/deed" 
               class="text-dark">
                <b>Attribution-ShareAlike</b> 4.0 International (CC BY-SA 4.0)</a>
        </div>

      </div>
    </footer>

Assets: License

I have collect some image related with *license, so that you can use license easily.


5: Post Navigation

Each post also need simple navigation. Be aware of this, Hugo as some deprecation code. This could lead to wrong page, if you use the deprecated version on newer Hugo.

Preview

Hugo Content: Navigation

Partials: Hugo 0.5x

<nav class="pagination is-centered" 
     role="navigation" aria-label="pagination">

    <!-- Previous Page. -->
    {{ if .Page.PrevPage }}
      <a class="pagination-previous post-previous"
         href="{{ .Page.PrevPage.URL | absURL }}"
         title="{{ .Page.PrevPage.Title }}">&laquo;&nbsp;</a>
    {{ end }}

    {{ if .Page.NextPage }}
      <a class="pagination-next post-next"
         href="{{ .Page.NextPage.URL | absURL }}" 
         title="{{ .Page.NextPage.Title }}">&nbsp;&raquo;</a>
    {{ end }}
</nav>

Partials: Hugo 0.4x

If you are using old Hugo, you can use this instead:

<nav class="pagination is-centered" 
     role="navigation" aria-label="pagination">

    <!-- Previous Page. -->
    {{ if .Page.Next }}
      <a class="pagination-previous post-previous"
         href="{{ .Page.Next.URL | absURL }}"
         title="{{ .Page.Next.Title }}">&laquo;&nbsp;</a>
    {{ end }}

    {{ if .Page.Prev }}
      <a class="pagination-next post-next"
         href="{{ .Page.Prev.URL | absURL }}" 
         title="{{ .Page.Prev.Title }}">&nbsp;&raquo;</a>
    {{ end }}
</nav>

SASS: Post Navigation

Code above require two more classes

// -- -- -- -- --
// _post-navigation.sass

a.post-previous:after
    content: " previous"

a.post-next:before
    content: "next "

What is Next ?

Looks good right? This kitten, is still with me. Just like the kitten, do not get rest yet! Our pagination tutorial still have some materials to go.

adorable kitten

There are still, a list of some interesting topic for using Hugo. Consider continue reading [ Hugo - Conclusion ].

Thank you for reading.