mkdir /tmp/test
cd /tmp/test
npm init -y
npm install --save-dev @11ty/eleventy
echo "# This is index" > index.md
npx @11ty/eleventy --serve
NOTE: Add npm start script as so: "start": "npx @11ty/eleventy --serve"
The main “content” of any cms
To create a page, can use html, markdown or js
js uses exports.render = (_) => "" to render
js uses exports.data = {} for front-matter
markdown files pre-processed for Liquid tags by default
Layouts are “templates” that give structure to the “content”
To create a “home” layout:
// _includes/home.js
exports.data = {};
exports.render = (data) => `<html> ${data.page.content} </html>`;
then include it in content file home.md:
---
layout: home
---
# This is a home page
NOTE: To have home layout use a default layout, just add it in the exports.data section.
Collections are used to group related content
To create a collection x, use yaml array in front-matter:
---
tags: x
---
To access collection x:
exports.render = (d) => `${data.collections.x.map((p) => p.url).join("\n")}`;
NOTE: The word “tags” is a reserved keyword.
Output multiple HTML files from a single template.
To create a paginated list of x collection, add following front-matter to List.md:
---
pagination:
data: collections.x
size: 1
alias: posts
---
<ol>
</ol>
json, js, yaml, toml et al
To create a data of say, some planets, we would add following in _data/planets.json:
[
{ "name": "Mercury" },
{ "name": "Venus" },
{ "name": "Earth" },
{ "name": "Mars" },
{ "name": "Saturn" }
]
And the data is used by adding a “data” key in front-matter. Here we create a page for each planet using pagination:
---
pagination:
data: planets
size: 1
alias: planet
permalink: "planets/undefined/"
---
# This is a page for
NOTE: json, js are built-in. yaml & toml require external packages
Discount renders
To add a shortcode that takes first & last name and returns a div card:
// .eleventy.js
module.exports = function (config) {
config.addShortcode("user", (f, l) => `<div class="card"> ${f} ${l} </div>`);
};
To use above shortcode in say, user.js:
module.render = ({ first, last }) => `${this.user(first, last)}`;