Preface
This article is intended for beginner.
Goal: Show Minimalist Layout in Hexo
Source Code
You can download the source code of this article here.
Extract and run on CLI:
$ npm install
4: Refactoring Layout
While doing development, code tends to become longer and longer. It means hard to maintain. This is why we need refactoring. To make the code modular, shorter, and easy to be read.
Layout: EJS Layout
Instead of using our previous code, we need to refactor it first.
-
- themes/tutor-01/layout/layout.ejs
- gitlab.com/…/layout/layout.ejs
<html>
<%- partial('site/head') %>
<body>
<%- partial('site/header') %>
<div id="content">
<%- body %>
</div>
<%- partial('site/footer') %>
</body>
</html>
Notice that now we require these three partial artefacts:
-
themes/tutor-01/layout/site/head.ejs
-
themes/tutor-01/layout/site/header.ejs
-
themes/tutor-01/layout/site/footer.ejs
Layout: EJS Head
-
- themes/tutor-01/layout/site/head.ejs
- gitlab.com/…/layout/site/head.ejs
<head>
<meta charset="utf-8">
<title><%= page.title || config.title%></title>
</head>
Layout: EJS Header
-
- themes/tutor-01/layout/site/header.ejs
- gitlab.com/…/layout/site/header.ejs
<p><strong>My beating heart.</strong></p>
Layout: EJS Footer
-
- themes/tutor-01/layout/site/footer.ejs
- gitlab.com/…/layout/site/footer.ejs
<p><strong>Mind, body, and soul.</strong></p>
Render: Browser
Consider revisit our last homepage:
Now, whenever there are any changes, we just need to change the partial EJS template.
5: Adding Page
Of course, beside the landing page, we need other page as well. For this to be happend, we require other artefact.
Layout: EJS Page
Consider keep this as simple as possible.
-
- themes/tutor-01/layout/page.ejs
- gitlab.com/…/layout/page.ejs
<h1><%- page.title %></h1>
<%- page.content %>
We are going to make it complex later.
Content: HTML
Conisder make content other than index.html. Just like any other static site, we can setup frontmatter before the HTML content.
-
- source/hello-there.html
- gitlab.com/…/source/hello-there.html
---
title: Hello There
# date: only required in landscape theme
---
<p>Too Long. Too Late.
So Far Away. So Far Too Long.</p>
<p>Who am I to keep you wait?</p>
Be aware that every theme might have different behaviour. For example, my theme does not require date field in frontmatter, but other template might need the field.
Render: Browser
Consider visit different page:
Content: Markdown
Just like any other static generator, Hexo also support Markdown. With markdown you can focus more on content (and document structure). In contrast, HTML has focus on formatting (and wasting more time).
Consider make content in markdown.
-
- source/about/longing.md
- gitlab.com/…/source/about/longing.md
---
title: Longing About Bulma
---
It's just pathetic to give up on something
before you even give it a shot.
> I guess that's why you never needed a haircut!!
Those Bulma’s haircut quote above are from dragonball comic.
Render: Browser
Consider visit rendered markdown page in html:
6: First Post
Hexo has special page
called post
.
Just like any other static site generator,
this is useful for blog like page post.
In order to hae this page kind, we need to create a post.ejs layout.
Layout: EJS Post
Consider keep this as simple as possible. But equipped with post header and post footer, to be altered later.
-
- themes/tutor-01/layout/post.ejs
- gitlab.com/…/layout/post.ejs
<h1><%- page.title %></h1>
<strong><%= date(page.date, config.date_format) %></strong>
<p><em>Dear Angel,</em></p>
<%- page.content %>
<p><em>Heaven holds a place for you.</em></p>
We are also going to make it complex later, as usual
Content: Post
As usual, we require example content.
-
- source/_posts/white-winter.md
- gitlab.com/…/source/_posts/white-winter.md
---
title : Surviving White Winter
date : 2016/11/13 11:02:00
---
It was a frozen winter in cold war era.
<!-- more -->
We were two lazy men, a sleepy boy, two long haired women,
a husky with attitude, and two shotguns.
After three weeks, we finally figure out, about **css framework**.
But we lost our beloved husky before we finally made it.
Now, every january, we remember our husky,
that helped all of us to survive.
I made the story myself.
Configuration
We need to setup permalink and stuff. Add these lines below our configuration.
-
- _config.yml
- gitlab.com/…/_config.yml
# URL
url: http://example/
root: /
permalink: :year/:month/:day/:title/
# Directory
source_dir: source
public_dir: public
# Writing
default_layout: post
Restart the server, to apply the new configuration.
Render: Browser
Consider visit the post with url as set in permalink:
Frontmatter: Layout
For exercise, you can use page layout in frontmatter.
---
layout : page
title : Surviving White Winter
date : 2016/11/13 11:02:00
---
And revisit the page in browser to see the change.
7: Index List
Remember our index page, now that we already have post.ejs, we can utilize it to make list (article index) in main page.
Layout: EJS Index
This is not simple anymore.
-
- themes/tutor-01/layout/index.ejs
- gitlab.com/…/layout/index.ejs
<h1><%= config.author %></h1>
<p><%= config.subtitle %></p>
<blockquote>I pour the <b>journal</b> as daily letter.</blockquote>
<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>
Render: Browser
Consider visit the post with url as set in permalink:
How does it works?
The loop here:
- themes/tutor-01/layout/index.ejs
<ul>
<% page.posts.each(function(post){ %>
...
<% }) %>
</ul>
8: Landing Page
What if we don’t want list of articles in main page. I mean by having a landing page, and put the list somewhere else.
Content: Index
We need a landing page content.
-
- source/index.html
- gitlab.com/…/source/index.html
---
title: Welcome to Heartbeat
---
<p>Every journey begins with a single step.</p>
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
Consider revisit the main page:
And your index page would be available in
Summary
This is how our theme would looks like:
$ hexo new site .tree themes -I node_modules -L 3
themes
└── tutor-01
├── layout
│ ├── index.ejs
│ ├── layout.ejs
│ ├── page.ejs
│ ├── post.ejs
│ └── site
└── source
├── css
└── js
6 directories, 4 files
As an additional prepration, I add source source directory, that contain css and js, for use with next guidance.
What is Next ?
We are going to use CSS in theme, with Bulma official CSS. Consider continue reading [ Hexo - Bulma - CSS Introduction ].
Thank you for reading.