Preface
Goal: Feeding Data in Eleventy, and Process in a Loop with Nunjucks.
Consider continue with nunjucks
example.
This time using SSG (static site generator),
called eleventy
(11ty)
.
Official Documentation
Source Examples
You can obtain source examples here:
Nunjucks Case
The nunjucks
case is the same,
with the one utilizing grunt
in previous article
with a few differences.
-
eleventy
configuration -
Using data to provide hyperlink in both
navbar
andsidebar
.
Directory Structure
Consider an eleventy
structure with nunjucks
views.
❯ tree
.
├── assets
│ ├── css
│ │ └── w3.css
│ ├── favicon.ico
│ └── js
│ └── script.js
├── package.json
└── views
├── css.md
├── _data
│ └── pages.json
├── html.md
├── _includes
│ ├── layouts
│ │ └── index.njk
│ └── site
│ ├── head.njk
│ ├── navbar.njk
│ └── sidebar.njk
├── index.md
├── javascript.md
└── php.md
8 directories, 14 files
.
![Eleventy: Example: Tree][04-eleventy-tree-example]
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
.
"devDependencies": {
"@11ty/eleventy": "^0.11.0"
}
To begin with 11ty
, you need to run npm install
first.
.eleventy.js
You also need to a write a configuration in .eleventy.js
.
module.exports = function(eleventyConfig) {
// Directory Management
eleventyConfig.addPassthroughCopy("assets");
// Layout Alias
eleventyConfig.addLayoutAlias("index", "layouts/index.njk");
// Return your Config object
return {
// URL Related
pathPrefix: "/",
// Templating Engine
templateFormats: [
"njk",
"html",
"md"
],
htmlTemplateEngine: "njk",
// Directory Management
passthroughFileCopy: true,
dir: {
input: "views",
output: "dist",
// ⚠️ These values are both relative to your input directory.
includes: "_includes",
data: "_data"
}
};
};
Global configuration is a must have in SSG world.
Nunjucks Template Specific Code
Configuration for nunjucks
has been setup in configuration above.
// Templating Engine
templateFormats: [
"njk",
"html"
],
htmlTemplateEngine: "njk",
Hyperlink Data
In eleventy
, data can be express in yaml
, toml
, json
or javascript
.
To provide hyperlink in both navbar
and sidebar
,
we need to setup the data in pages.js
as below:
[
{ "link": "/", "short": "Home", "long": "Home" },
{ "link": "/html", "short": "HTML", "long": "HTML Link" },
{ "link": "/css", "short": "CSS", "long": "CSS Link" },
{ "link": "/php", "short": "PHP", "long": "PHP Link" },
{ "link": "/javascript", "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.njk" %}
</head>
<body>
{% include "site/sidebar.njk" %}
<div id="main">
{% include "site/navbar.njk" %}
<div class="w3-container">
{{ content | safe }}
</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">
{{ content | safe }}
</div>
Head
It is almost the same with the original 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 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 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 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 11ty
Running eleventy
(11ty
) is as easy as this command below.
$ eleventy --serve
❯ eleventy --serve
Writing dist/css/index.html from ./views/css.html.
Writing dist/html/index.html from ./views/html.html.
Writing dist/index.html from ./views/index.html.
Writing dist/php/index.html from ./views/php.html.
Writing dist/javascript/index.html from ./views/javascript.html.
Copied 3 files / Wrote 5 files in 0.27 seconds (v0.11.0)
Watching…
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:8080
External: http://192.168.1.223:8080
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Serving files from: dist
You are ready to run a website,
with eleventy
(11ty
) SSG, using nunjucks
.
What’s Next?
Consider continue reading [ Template - Pelican - Jinja2 ].