Preface
Goal: Feeding Data in Hexo, and Process in a Loop with EJS.
Consider continue with EJS
example.
This time using SSG (static site generator),
called hexo
.
Official Documentation
Source Examples
You can obtain source examples here:
EJS Case
The EJS
case is the same,
with the one utilizing grunt
in previous article
with a few differences.
-
hexo
configuration -
Using data to provide hyperlink in both
navbar
andsidebar
.
Directory Structure
Consider an hexo
structure with EJS
views.
❯ tree
.
├── _config.yml
├── package.json
├── package-lock.json
├── source
│ ├── css.md
│ ├── _data
│ │ └── pages.yml
│ ├── html.md
│ ├── index.md
│ ├── javascript.md
│ └── php.md
└── themes
└── tutor
├── layout
│ ├── layout.ejs
│ ├── page.ejs
│ └── site
│ ├── head.ejs
│ ├── navbar.ejs
│ └── sidebar.ejs
└── source
├── css
│ └── w3.css
├── favicon.ico
└── js
└── script.js
9 directories, 17 files
.
The views
structure is similar to previous case with grunt
.
I suggest that you have fast reading for this article first.
package.json
All you need to know is the devDependencies
.
"dependencies": {
"hexo": "^3.9.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-server": "^0.3.3"
}
To begin with hexo
, you need to run npm install
first.
_config.yml
You also need to a write a configuration in _config.yml
.
# Site
title : Yet Another Example
language : en
timezone : Asia/Jakarta
# Extensions
## Themes: https://hexo.io/themes/
theme: tutor
# theme: landscape
# URL
url : http://example/
# root: /child/
root : /
# Directory
source_dir : source
public_dir : public
Global configuration is a must have in SSG world.
Hyperlink Data
In hexo
, data can be express in yaml
.
To provide hyperlink in both navbar
and sidebar
,
we need to setup the data in pages.yml
as below:
# Helper for related links
- link : "/"
short: "Home"
long : "Home"
- link : "/html.html"
short: "HTML"
long : "HTML Link"
- link : "/css.html"
short: "CSS"
long : "CSS Link"
- link : "/php.html"
short: "PHP"
long : "PHP Link"
- link : "/javascript.html"
short: "Javascript"
long : "Javascript Link"
The sidebar
will use long
text,
and the navbar
will use short
one.
Router
Set automatically with SSG
Layout
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('site/head') %>
</head>
<body>
<%- include('site/sidebar') %>
<div id="main">
<%- include('site/navbar') %>
<div class="w3-container">
<%- body %>
</div>
</div>
</body>
</html>
As shown in order we have three include
artefacts.
include head.njk
,include sidebar.njk
,include navbar.njk
,
And one eleventy specific tag content
.
<div class="w3-container">
<%- body %>
</div>
Head
It is a little bit different with the original head.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= page.title || "Link Example - Default" %></title>
<%- css('/css/w3.css') %>
<%- js('/js/script.js') %>
Here we put the default title if we cannot find title
variable.
<title><%= page.title || "Link Example - Default" %></title>
Loop in Template
Very similar with previous example
This time, consider alter a bit,
both the sidebar
and the navbar
,
so we can render each data in loop.
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left"
style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large"
id="closeNav" >Close ×</button>
<% site.data.pages.forEach(function(page){ %>
<a class="w3-bar-item w3-button"
href="<%= page.link %>"><%= page.long %></a>
<% }) %>
</div>
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge"
id="openNav">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>
<div class="w3-bar w3-black">
<% site.data.pages.forEach(function(page){ %>
<a class="w3-bar-item w3-button"
href="<%= page.link %>"><%= page.short %></a>
<% }) %>
</div>
All you need to know is these lines:
<% site.data.pages.forEach(function(page){ %>
<a class="w3-bar-item w3-button"
href="<%= page.link %>"><%= page.short %></a>
<% }) %>
This will render a hyperlink, with result about the same with previous example.
Running Hexo
Running hexo
is as easy as this command below.
❯ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
You are ready to run a website,
with hexo
SSG, using EJS
.
What’s Next?
Consider continue reading [ Template - Hugo - Template ].