Preface
This article is intended for beginner.
Goal: Apply SASS in Hexo theme
Custom SASS could make a lot of enhancement, compared with pure Bulma’s CSS.
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: Regular Page
Consider change a bit the page
Layout: EJS Page
We scan start with the same layout as previous tutorial.
-
- themes/tutor-03/layout/page.ejs
- gitlab.com/…/layout/page.ejs
<main role="main"
class="column is-two-thirds blog-column box-deco has-background-white">
<article class="blog-post">
<h1 class="title is-4"><%- page.title %></h1>
<%- page.content %>
</article>
</main>
<aside class="column is-one-thirds box-deco has-background-white">
<div class="blog-sidebar">
Side menu
</div><!-- /.blog-sidebar -->
</aside>
Render: Browser Page
Open in your favorite browser. You should see, non-colored homepage, by now.
This design is already equipped with responsive layout.
6: Index List
Now comes the Hexo specific parts:
-
layouts/_default/single.html
-
layouts/_default/list.html
Layout: EJS Index
We should also change the list
-
- themes/tutor-03/layout/index.ejs
- gitlab.com/…/layout/index.ejs
<main role="main"
class="column is-full box-deco has-background-white">
<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>
Render: Browser: List
Open in your favorite browser. You should see, simple index with article list, by now.
7: Custom Page Posts
Custom Page is a must have SSG Concept
Here we are again with our simple post.ejs. Hexo can create as many custom page, the default one is post. All this custom page use layout.ejs as base skeleton.
Layout: EJS Post
This post.ejs is very similar with page.ejs. The point is you can customize as creative as you want.
-
- themes/tutor-03/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>
Render: Browser
Open in your favorite browser. You should see, a post, with sidebar.
Note that, this is already using responsive flexbox. It has different looks on different screen. You should try to resize your browser, to get the idea.
What is Next ?
Consider continue reading [ Hexo Bulma - Section List ].
Thank you for reading.