Hexo - EJS - Section List Introduction

   
   
 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

Goal: Produce list for special page sections: Archive, Category, Tag

Hexo has this four special page sections:

  • Index

  • Archive

  • Category

  • Tag

We have already discuss about index in previous section, and put the index in blog path in url. Now we are going to discuss about the other three.

Source Code

You can download the source code of this article here.

Extract and run on CLI:

$ npm install

1: Head Title

Since we have different kind of page section. The title should reflect the page section name. This won’t be a complex task, as we have embedded javascript.

Javascript: EJS HTML Head

Remember this EJS inside title tag?

  <title><%= page.title || config.title%></title>

We are going to change. A lot! As this javascript below.

  var title = page.title;

  if (is_archive()){
    title = __('archive');

    if (is_month()){
      title += ': ' + page.year + '/' + page.month;
    } else if (is_year()){
      title += ': ' + page.year;
    }
  } else if (is_category()){
    title = __('category') + ': ' + page.category;
  } else if (is_tag()){
    title = __('tag') + ': ' + page.tag;
  }

Now that we already have title variable, we can call it later in HTML view.

  <title><%= title || config.title%></title>

.

Section’s URL Example

Script above, will parse the URL below:

It is all depends on your content.

Layout: EJS HTML Head

Now put the javascript inside the EJS for html head.

<%
  ...
_%>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title><%= title || config.title%></title>

  <% if (theme.favicon){ %>
     <link href="<%- theme.favicon %>" rel="shortcut icon" type="image/x-icon" />
  <% } %>

  <%- css(['/css/bulma.css', '/css/main.css']) %>
</head>

.

Language

What is this __(‘archive’) means in javascript above?

This will translate the language given.

archive: Archive
category: Category
tag: Tag
archive: Arsip
category: Kategori
tag: Tagar

2: Archive

Layout: EJS Archive

Remember the page in previous article.

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

We are going to use this template, and grow to something more suitable for our archive page.

  • themes/tutor-03/layout/archive.ejs
<% 
  var section_title = __('archive');

  if (is_month()){
    section_title += ': ' + page.year + '/' + page.month;
  } else if (is_year()){
    section_title += ': ' + page.year;
  }
%>
<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h4 class="title is-4"><%= section_title %></h4>
  </section>

  <section class="section" id="archive">
  <% page.posts.each(function(post){ %>
    <div class="archive-item">
      <div class="is-pulled-left"><a href="<%- url_for(post.path) %>">
        <%= post.title %>
      </a></div>
      <div class="is-pulled-right has-text-right"><time>
          <%= date(post.date, "DD MMM") %>&nbsp;
          <span class="fa fa-calendar"></span>
      </time></div>
      <div class="is-clearfix"></div>
    </div>
  <% }) %>
  </section>
</main>

.

Render: Browser

Open in your favorite browser. You should see, our very first section page. The archive page!

Hexo Bulma: Archive Page

The Loop

How Does It Works?

The simplified range loop, is as below:

  <% page.posts.each(function(post){ %>
    ...
    <%= post.title %>
    ...
  <% }) %>

This will only show page defined post layout (the default one). This means if you have this frontmatter as below, the page won’t be shown on the archive list.

layout    : page

2: Populate the Content

As always, populate content with good reading is, as hard as giving meaningful variable. Luckily I have done it for you.

Scaffold

I have arrange the scaffold, so that every post has tags and categories

---
title     : {{ title }}
date      : {{ date }}
tags      :
categories:
---

Now you are ready to populate the content.

Example Content

---
title     : Bon Jovi - Diamond Ring
date      : 2015/03/15 07:35:05
tags      : [rock, 90s]
category  : [lyric]
---

Diamond ring, wear it on your hand  
It's gonna tell the world, I'm your only man  
<!-- more --> 
Diamond ring, diamond ring  
Baby, you're my everything, diamond ring 

You know, I bleed every night you sleep  
'Cause I don't know if I'm in your dreams

And The Rest

Consider do the rest for these nine lyrics:

$ tree source
source
├── about
│   └── longing.md
├── hello-there.html
├── index.html
└── _posts
    ├── lyrics
    │   ├── barbara-streisand-the-way-we-were.md
    │   ├── bon-jovi-diamond-ring.md
    │   ├── darius-rucker-it-wont-be-like-this-for-long.md
    │   ├── david-gates-lady-valentine.md
    │   ├── dido-white-flag.md
    │   ├── george-benson-moodys-mood.md
    │   ├── heatwave-all-i-am.md
    │   ├── moody-blues-white-satin.md
    │   ├── natalie-cole-i-wish-you-love.md
    │   ├── norah-jones-shoot-the-moon.md
    │   └── vanessa-williams-love-is.md
    ├── quotes
    │   ├── dead-poets-society.md
    │   ├── every-day.md
    │   ├── fight-club.md
    │   ├── jerry-maguire.md
    │   └── scott-pilgrim.md
    └── white-winter.md

4 directories, 20 files

.

Hexo: All Content

Also edit the frontmatter as necessary, for the rest of the content.

4: Generic Template

The three pages, Archive, Category and Tag, are very similar. Thus we can make a generic template.

Layout: EJS Post List

I’m going to put the generic template in summary directory.

<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h4 class="title is-4"><%= section_title %></h4>
  </section>

  <section class="section" id="archive">
  <ul>
  <% page.posts.each(function(post){ %>
    <li>
      <div class="is-pulled-left">
        <a href="<%- url_for(post.path) %>">
        <%= post.title %>
      </a></div>
      <div class="is-pulled-right has-text-right"><time>
        <%= date(post.date, "DD MMM") %>&nbsp;
      </time></div>
      <div class="is-clearfix"></div>
    </li>
  <% }) %>
  </ul>
  </section>
</main>

Now we can use them for

  • Archive section page,

  • Category section page, and

  • Tag section page.

Layout: EJS Archive

<% 
  var section_title = __('archive');

  if (is_month()){
    section_title += ': ' + page.year + '/' + page.month;
  } else if (is_year()){
    section_title += ': ' + page.year;
  }
%>
<%-
  partial('summary/post-list', {
    section_title: section_title
  })
%>

Hexo: Browser Section Archive

Layout: EJS Category

<%- 
  partial('summary/post-list', {
    section_title: __('category') + ': ' + page.category
  })
%>

Hexo: Browser Section Category

.

Layout: EJS Tag

<%- 
  partial('summary/post-list', {
    section_title: __('tag') + ': ' + page.tag
  })
%>

Hexo: Browser Section Tag

.

What is Next ?

Consider continue reading [ Hexo - Custom Page Introduction ]. There are, some interesting topic about Custom Page in Hexo.

Thank you for reading.