Hexo - Content - Blog Post

   
   
 hexo  bulma  sass  
 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: More about blog post content, Header, Footer, and Navigation.

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

Source Code

You can download the source code of this article here.

Extract and run on CLI using $ npm install.

1: Prepare

This preparation is required.

Theme

To avoid messed-up with previous tutorial, use tutor-05.

# Extensions
theme: tutor-05

Preview: General

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

Hexo Content: All Artefacts

Layout: EJS Post

Edit our ancient post.ejs artefact, that is exist from the very beginning of our tutorial.

  <main role="main" 
        class="column is-two-thirds has-background-white
               blog-column box-deco">
    <div class="blog-post">
      <%- partial('post/header') %>

      <article>
        <%- page.content %>
      </article>
      
      <br/>
      <%- partial('post/navigation') %>
    </div><!-- /.blog-post -->
    
    <%- partial('post/footer') %>
  </main>

  <aside class="sidebar column is-one-thirds is-paddingless">
    <%- partial('widget/related-posts') %>
    ...
  </aside>

Hexo Content: ViM Post Layout

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/layout/post/header.ejs

  • themes/tutor-05/layout/post/footer.ejs

  • themes/tutor-05/layout/post/navigation.ejs

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

  • themes/tutor-05/layout/post/time-elapsed.ejs

SASS: Main

And add relevant stylesheet in main.scss.

@import "initial-variables"
...

@import "layout"
...

@import "post"
@import "post-header"
@import "post-content"
@import "post-title"
@import "post-navigation"
@import "post-highlight-hexo"

Even with Bulma, we still need adjustment. For example, you need to reset the font size, in Bulma Heading.

2: Header

Consider begin with header.

Preview

Hexo 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="<%- page.path %>"><%- page.title %></a></h4>
      </div>
    </section>

Partials: Meta

Consider add meta data in post header.

  • author

  • time elapsed (using partial)

  • tags

  • categories

Here below is my actual code. I use bulma tag, 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="<%- page.path %>"><%- page.title %></a></h4>
      </div>

      <div class="is-clearfix"></div>
      
      <div class="field">
        <% if (config.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"><%- config.author %></span></span>            
        </span>
        &nbsp;
        </div>
        <% } %>

        <div class="is-pulled-left">
          <span class="meta-time tag is-light is-small">
          <%- partial('post/time-elapsed') %>
          </span>
          &nbsp;
        </div>

        <div class="is-pulled-right">
          <% page.tags.forEach(function(tag){ %>
            <a href="<%- url_for(tag.path) %>">
              <span class="tag is-light is-small"><span 
                    class="fa fa-tag"></span>&nbsp;
                    <%- tag.name %></span></a>
          <% }) %>
          &nbsp;
        </div>

        <div class="is-pulled-right">
          <% page.categories.forEach(function(cat){ %>
            <a href="<%- url_for(cat.path) %>">
              <span class="tag is-dark is-small"><span 
                    class="fa fa-folder"></span>&nbsp;
                    <%- cat.name %></span></a>
          <% }) %>
          &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, Hexo build 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 Hexo every day.

Do not forget to put the script in static directory.

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

Partial

    <time datetime="<%= date(page.date, "YYYY-MM-DD[T]HH:mm:ss.SSS") %>"
          itemprop="datePublished">
    <span datetime="<%= date(page.date, "YYYY-MM-DD HH:mm:ss") %>"
          class="timeago">
    </span></time>
    &nbsp; 

    <%- js('/js/timeago.min.js') %>
    <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

Hexo Content: Footer

Partials

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

        <div class="column is-narrow has-text-centered">
            <img src="<%- url_for("/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.

Preview

Hexo Content: Navigation

Partials

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

    <!-- Previous Page. -->
    <% if (page.next) { %>
      <a class="pagination-previous post-previous"
         href="<%- url_for(page.next.path) %>"
         title="<%- page.next.name %>">&laquo;&nbsp;</a>
    <% } %>

    <!-- Next Page. -->
    <% if (page.prev) { %>
      <a class="pagination-next post-next"
         href="<%- url_for(page.prev.path) %>"
         title="<%- page.prev.name %>">&nbsp;&raquo;</a>
    <% } %>

This embedded javascript is self explanatory.

SASS: Post Navigation

Code above require two more classes

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

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

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

Or better, you can add a simple hover effect.

a.post-previous:hover,
a.post-next:hover
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)
  background-color: $yellow
  color: #000

.

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 ?

Consider continue reading [ Hexo - Content - Markdown ]. There are, some interesting topic for using Markdown in Hexo Content, such as configuration and using Hexo Admin.

Thank you for reading.