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.
-
- themes/tutor-02/layout/site/scripts.ejs
- gitlab.com/…/layout/site/scripts.ejs
<!-- 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.
-
- themes/tutor-02/layout/site/header.ejs
- gitlab.com/…/layout/site/header.ejs
<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">
<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.
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
-
- themes/tutor-02/layout/index.ejs
- gitlab.com/…/layout/index.ejs
<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.
-
- _config.yml
- gitlab.com/…/_config.yml
# 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.
Layout: EJS Page
This one artefact, for regular content page, including main page.
-
- themes/tutor-02/layout/page.ejs
- gitlab.com/…/layout/page.ejs
<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.
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.
-
- themes/tutor-02/layout/post.ejs
- gitlab.com/…/layout/post.ejs
<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.
-
- _config.yml
- gitlab.com/…/_config.yml
# 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.
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.
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
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.