Hexo - Bulma - CSS Layout

   
   
 hexo  bulma  css  
 ssg  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

This article is part two of Hexo Bulma CSS.

Goal: Explain How to Use Bulma Stylesheet in Hexo

Source Code

You can download the source code of this article here.

Extract and run on CLI:

$ npm install

Related Article

I wrote about Bulma Navigation Bar that used in this article. Step by step article, about building Navigation Bar. You can read here:

5: Modify Layout: Navigation Bar

How about Navigation Bar ? The next step after create is to enhance the already refactored layout. I’m going to use Vue version for use with burger button.

  • layout/partials/site/header.ejs

  • layout/partials/site/scripts.ejs

Layout: EJS Javascript

It is just an empty template.

  <!-- JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <%- js(['/js/vue.min.js', '/js/bulma-burger-vue.js']) %>

Layout: EJS Header

This is a looong Header, with logo image.

<nav role="navigation" aria-label="main navigation"
     class="navbar is-fixed-top is-dark"
     id="navbar-vue-app">
  <div class="navbar-brand">
    <a class="navbar-item" href="<%- url_for("/") %>">
       <%- image_tag("/images/logo-gear.png", {alt: "Home"}) %>
    </a>
    <a class="navbar-item">
      Blog
    </a>
    
    <a role="button" class="navbar-burger burger" 
       aria-label="menu" aria-expanded="false" data-target="navbarBulma"
       @click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBulma" class="navbar-menu"
       v-bind:class="{'is-active': isOpen}">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          Archives
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            By Tags
          </a>
          <a class="navbar-item">
            By Category
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            By Date
          </a>
        </div>
      </div>

      <a class="navbar-item">
        About
      </a>
    </div>

    <div class="navbar-end">
      <form class="is-marginless" method="get"
            action="<%- url_for("/pages/search/") %>">
        <div class="navbar-item">
          <input class="" type="text" name="q"
            placeholder="Search..." aria-label="Search">
          &nbsp;
          <button class="button is-light" 
            type="submit">Search</button>
        </div>
      </form>
    </div>

  </div>
</nav>

Render: Browser

Visit the homepage in your favorite browser. You should see, a working burgermenu, by now.

Hexo Bulma: Layout Navigation Bar

6: Further Layout: Page and List.

After minimalist Bulma layout above, the next step is to create the layout. We are going to enhance our layout for

  • layout/index.html

  • layout/page.html

Layout: EJS Index

We should also change the list

<main role="main" 
      class="column is-full has-background-light">
  <section class="section">

  <h1 class="title is-4"><%= config.author %></h1>
  <h2 class="subtitle is-4"><%= config.subtitle %></h2>

  <ul>
  <% page.posts.each(function(post){ %>
    <li>
      <b><a href="<%- url_for(post.path) %>">
        <%= post.title %>
      </a></b>
      <br/>
      
      <p><%= date(post.date, config.date_format) %></p>
      <br/>
      
      <% if(post.excerpt) { %>
      <p><%- post.excerpt %></p>
      <% } %>
    </li>
  <% }) %>
  </ul>

  </section>
</main>

Configuration

We need to setup permalink and stuff. Add these lines below our configuration.

# Home page setting
index_generator:
  path: '/blog'
  order_by: -date

Render: Browser: Index

Open in your favorite browser. You should see, simple index with article list, by now.

Hexo Bulma: Layout Index

Layout: EJS Page

This one artefact, for regular content page, including main page.

  <main role="main" 
        class="column is-two-thirds has-background-primary">
    <article class="blog-post">
      <h1 class="title is-4"><%- page.title %></h1>
      <%- page.content %>
    </article>
  </main>

  <aside class="column is-one-thirds has-background-info">
    <div class="blog-sidebar">
      Side menu
    </div>
  </aside>

Render: Browser: Page

Open in your favorite browser. You should see, simple page content, by now.

Hexo Bulma: Layout Page

7: Custom Page Posts

Custom Page is a must have SSG Concept

Consider remake our simple post.ejs, adding a more useful information, semantic, and bootstrap’s classes.

Post: Single

This is very similar with page.ejs. The point is you can customize as creative as you want.

  <main role="main" 
        class="column is-two-thirds">
    <div class="blog-post">
      <section>
        <h1 class="title is-4"><%- page.title %></h1>
        <p  class="blog-post-meta"
            ><%= date(page.date, config.date_format) %> by <a href="#"
            ><%= config.author %></a></p>
      </section>

      <article>
        <%- page.content %>
      </article>
    </div><!-- /.blog-post -->
  </main>

  <aside class="column is-one-thirds has-background-info">
    <div class="blog-sidebar">
      <h4 class="is-size-4 is-italic">About You</h4>
      <p>Are you an angel ?</p>
    </div><!-- /.blog-sidebar -->
  </aside>

Most class are in official Bulma documentation.

Configuration

We need to setup date formatting and also markdown linebreak setting. Add these lines below our configuration.

# Date / Time format
date_format: MMMM DD, YYYY
time_format: HH:mm:ss

# Markdown
marked:
  gfm: true
  breaks: false

Restart the server, to apply the new configuration.

Assets: Stylesheet

No need any custom stylesheet. We have already packed the required class, before this section.

Render: Browser

Open in your favorite browser. You should see, a post, with sidebar.

Hexo Bulma: Post without Layout

Note that, this is already using responsive grid. It has different looks on different screen. You should try to resize your browser, to get the idea.

Hexo Bulma: Post with sidebar Layout

7: Summary

So far here are artefacts for our layouts.

$ tree themes/tutor-02/layout
themes/tutor-02/layout
├── index.ejs
├── layout.ejs
├── page.ejs
├── post.ejs
└── site
    ├── footer.ejs
    ├── head.ejs
    ├── header.ejs
    └── scripts.ejs

1 directory, 8 files

Hexo Bulma: Artefacts Summary in Tree

What is Next ?

Consider continue reading [ Hexo - Bulma - SASS Introduction ]. We are going to use SASS in theme, with custom SASS, all compiled into CSS.

Thank you for reading.