Hugo - Bootstrap - Blog Post

   
   
 hugo  bootstrap  sass  
 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

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

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

1: Prepare

This preparation is required.

Theme

To avoid messed-up with previous tutorial, copy manually, with your file manager

  1. From themes/tutor-05/* to themes/tutor-06.

  2. Edit config.toml, and save.

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

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="col-md-8">
    <div class="blog-main p-3 mb-3
                bg-light rounded border border-dark shadow-hover">
      <div class="blog-post" 
           itemscope itemtype="http://schema.org/BlogPosting">
        {{ partial "post-header.html" . }}

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

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

{{ define "aside" }}
  <aside class="col-md-4">   
    {{ partial "card-related-posts.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-06/layouts/partials/post-header.html

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

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

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

  • themes/tutor-06/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.

    <header class="rounded shadow border p-2 mb-4"> 
      <h2 itemprop="name headline">
          <a class="text-dark" href="{{ .Permalink }}"
          >{{ .Page.Title }}</a></h2>
    </header>

Partials: Meta

Consider add meta data in post header.

  • author

  • time elapsed (using partial)

  • tags

  • categories

My actual code is using Awesome Font. To reduce complexity, here I use bootstrap badge, without the eye candy Awesome Font.

    <header class="rounded shadow border p-2 mb-4"> 
      <h2 itemprop="name headline">
          <a class="text-dark" href="{{ .Permalink }}"
          >{{ .Page.Title }}</a></h2>

      <div class="clearfix"></div>
      <div class="container-fluid">
        {{ if .Params.author }}
        <span class="badge badge-primary mr-2">
            <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">{{ .Params.author }}</span></span>
        </span>
        {{ end }}  
        <div class="float-left">
            <span class="badge badge-secondary mr-2">
            {{ partial "post-time-elapsed.html" . }}
            </span>
        </div>
        <div class="float-right mr-2">
          {{ range .Params.tags }}
            <a href="{{ printf "tags/%s" . | absURL }}">
              <span class="badge badge-dark">{{ . }}</span></a>
          {{ end }}
        </div>
        <div class="float-right mr-2">
          {{ range .Params.categories }}
            <a href="{{ printf "categories/%s" . | absURL }}">
              <span class="badge badge-info">{{ . }}</span></a>
          {{ end }}
          &nbsp;
        </div>
      </div>
    </header>

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-06/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="rounded shadow border p-2 mb-4">
        <div class="d-flex flex-row justify-content-center align-items-center">

        <div class="p-2 text-center">
            <img src="/assets/site/images/license/cc-by-sa.png" 
                 class="bio-photo" 
                 height="31"
                 width="88"
                 alt="CC BY-SA 4.0"></a>
        </div>

        <div class="p-2">
            This article is licensed under:<br/>
            <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.

Preview

Hugo Content: Navigation

Partials

  <ul class="pagination justify-content-between" 
      role="navigation" aria-labelledby="pagination-label">

      {{ if .Page.Next }}
      <li class="page-item previous">
        <a class="page-link" 
           href="{{ .Page.Next.URL | absURL }}" 
           title="{{ .Page.Next.Title }}">&laquo; </a>
      </li>
      {{ end }}

      {{ if .Page.Prev }}
      <li class="page-item next">
        <a class="page-link" 
           href="{{ .Page.Prev.URL | absURL }}" 
           title="{{ .Page.Prev.Title }}"> &raquo;</a>
      </li>
      {{ end }}

  </ul>

SASS: Post Navigation

Code above require two more classes

// -- -- -- -- --
// _post-navigation.scss

.previous {
  a.page-link:after {
    content: " previous"
  }
}

.next {
  a.page-link:before {
    content: "next "
  }
}

SASS: Main

And add relevant stylesheet in main.scss.

@import
  ...

  // custom
    "layout",
    "decoration",
    "list",
    "pagination",
    "post-navigation"
;

6: Conclusion

It is enough for now. There are many part that can be enhanced, in about content area.

After all, it is about imagination.

What is Next ?

There are, some interesting topic for using Markdown in Hugo Content, such as using shortcodes. Consider continue reading [ Hugo - Content - Markdown ].

Thank you for reading.