Preface
Goal: Feeding Data in Jekyll, and Process in a Loop with Liquid.
Consider continue have a look at templating engine
that we never use before.
We are going to use liquid
example,
using SSG (static site generator), called jekyll
.
Official Documentation
Source Examples
You can obtain source examples here:
Liquid Case
The liquid
case is very similar with previously nunjucks
example.
-
jekyll
configuration -
Using data to provide hyperlink in both
navbar
andsidebar
.
Directory Structure
Consider an jekyll
structure with liquid
views.
❯ tree
.
├── assets
│ ├── css
│ │ └── w3.css
│ └── js
│ └── script.js
├── _config.yml
├── _data
│ └── pages.yml
├── favicon.ico
├── Gemfile
├── Gemfile.lock
├── _includes
│ ├── head.html
│ ├── navbar.html
│ └── sidebar.html
├── _layouts
│ └── index.html
├── pages
│ ├── css.md
│ ├── html.md
│ ├── index.md
│ ├── javascript.md
│ └── php.md
└── _posts
8 directories, 16 files
.
Gemfile
All you need to know is the jeykll
version.
source "https://rubygems.org"
gem "jekyll", "~> 3.8.6"
To begin with 11ty
, you need to run npm install
first.
_config.yml
You also need to a write a configuration in _config.yml
.
# Site settings
title: Your mission. Good Luck!
# the subpath of your site, e.g. /blog
baseurl: ""
# the base hostname & protocol for your site, e.g. http://example.com
url: "http://localhost:4000"
Global configuration is a must have in SSG world.
Hyperlink Data
In jekyll
, 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 head.html %}
</head>
<body>
{% include sidebar.html %}
<div id="main">
{% include navbar.html %}
<div class="w3-container">
{{ content }}
</div>
</div>
</body>
</html>
As shown in order we have three include
artefacts.
include head.html
,include sidebar.html
,include navbar.html
,
And one jekyll
specific tag content
.
<div class="w3-container">
{{ content }}
</div>
Head
It is almost the same with the original head.
- [html-preprocessor/…/_includes/head.html][04-views-sites-head]
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title or "Link Example - Default" }}</title>
<link rel="stylesheet" href="{{ "/assets/css/w3.css" | url }}">
<script src="{{ "/assets/js/script.js" | url }}"></script>
Here we put the default title if we cannot find title
variable.
<title>{{ title or "Link Example - Default" }}</title>
No need to add livereload
,
since utilized browsersync
has internal sync.
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>
{% for page in site.data.pages %}
<a class="w3-bar-item w3-button"
href="{{ page.link }}">{{ page.long }}</a>
{% endfor %}
</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">
{% for page in site.data.pages %}
<a class="w3-bar-item w3-button"
href="{{ page.link }}">{{ page.short }}</a>
{% endfor %}
</div>
All you need to know is these lines:
{% for page in site.data.pages %}
<a class="w3-bar-item w3-button"
href="{{ page.link }}">{{ page.short }}</a>
{% endfor %}
This will render a hyperlink, with result about the same with previous example.
Running Jekyll
Running jekyll
is as easy as this command below.
$ jekyll serve
jekyll serve
Configuration file: /home/epsi/Documents/html-preprocessor/04-jekyll/_config.yml
Source: /home/epsi/Documents/html-preprocessor/04-jekyll
Destination: /home/epsi/Documents/html-preprocessor/04-jekyll/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.062 seconds.
Auto-regeneration: enabled for '/home/epsi/Documents/html-preprocessor/04-jekyll'
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
You are ready to run a website,
with jekyll
SSG, using liquid
.
What’s Next?
Consider continue reading [ Template - Hexo - EJS ].