Hexo - Layout

   
   
 hexo  
 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 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.

<html>
<%- partial('site/head') %>
<body>
  <%- partial('site/header') %>
  <div id="content">
    <%- body %>
  </div>
  <%- partial('site/footer') %>
</body>
</html>

Hexo: ViM Layout

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

<head>
  <meta charset="utf-8">
  <title><%= page.title || config.title%></title>
</head>

Layout: EJS Header

<p><strong>My beating heart.</strong></p>
<p><strong>Mind, body, and soul.</strong></p>

Render: Browser

Consider revisit our last homepage:

Hexo: Refactored Homepage on Browser

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.

<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.

---
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:

Hexo: HTML Page Content on Browser

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.

---
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:

Hexo: Markdown Page Content on Browser

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.

<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.

---
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.

# 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:

Hexo: Markdown Post Content on Browser

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.

<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:

Hexo: List of Posts on Browser

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.

---
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.

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

Render: Browser

Consider revisit the main page:

Hexo: Landing Page on Browser

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.

Hexo: Pure HTML Theme

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.