Tweet
Tweet

Slide 1

Slide 1 text

TEMPLATING Mike Aparicio 
 @peruvianidol Eleventy's Superpower

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Mike Aparicio < / title> < / head> <body> <div class="header"> <h1><a href="/">Mike Aparicio < / a> < / h1> <ul> <li><b><a href="/">Home < / a> < / b> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / div> <div class="main"> . . . < / div> <div class="footer"> <p>© 1999 All your rights are belong to us < / p> < / div> < / body> < / html>

Slide 4

Slide 4 text

. . . < / div>

Slide 5

Slide 5 text

Markdown (2004) Liquid (2006) HAML (2006) Mustache (2009) EJS (2010) Handlebars (2011) Pug (2010) Nunjucks (2012)

Slide 6

Slide 6 text

Objects/Variables Data storage {{ page.title }} Filters Apply functions to/manipulate data {{ page.title | capitalize }} Tags Iterate over/conditionally display data {% if page.title %} 
 ... {% endif %} {% for pages as page %} 
 ... {% endfor %}

Slide 7

Slide 7 text

Markdown Liquid HAML Mustache EJS Handlebars Pug Nunjucks JavaScript (as 11ty.js) HTML (as anything!) Eleventy Template Languages

Slide 8

Slide 8 text

Mike Aparicio < / title> <meta name="description" content="An Eleventy demo site."> < / head> <body> <header> <h1><a href="/">Mike Aparicio < / a> < / h1> < / header> <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / nav> <main> . . . < / main> <footer> <p>© 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

Slide 9

Slide 9 text

Mike Aparicio < / title> <meta name="description" content="An Eleventy demo site."> < / head> <body> <header> <h1><a href="/">Mike Aparicio < / a> < / h1> < / header> <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / nav> <main> {{ content | safe }} < / main> <footer> <p>© 2021 All your rights are belong to us < / p> < / footer> < / body> < / html> 📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages .eleventy.js .gitignore package.json README.md Layouts

Slide 10

Slide 10 text

📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages home.html .eleventy.js .gitignore package.json README.md Front Matter - - - layout: base - - -

Here's the content of our homepage. < / p>

Slide 11

Slide 11 text

📁 _site 📁 pages 📁 home index.html 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages home.html .eleventy.js .gitignore package.json README.md Mike Aparicio < / title> <meta name="description" content="An Eleventy demo site."> < / head> <body> <header> <h1><a href="/">Mike Aparicio < / a> < / h1> < / header> <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / nav> <main> <p>Here's the content of our homepage. < / p> < / main> <footer> <p>© 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

Slide 12

Slide 12 text

📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages home.html .eleventy.js .gitignore package.json README.md Permalink - - - layout: base permalink: / - - -

Here's the content of our homepage. < / p>

Slide 13

Slide 13 text

📁 _site index.html 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages home.html .eleventy.js .gitignore package.json README.md Mike Aparicio < / title> <meta name="description" content="An Eleventy demo site."> < / head> <body> <header> <h1><a href="/">Mike Aparicio < / a> < / h1> < / header> <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / nav> <main> <p>Here's the content of our homepage. < / p> < / main> <footer> <p>© 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

Slide 14

Slide 14 text

📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages about.html home.html .eleventy.js .gitignore package.json README.md - - - layout: base permalink: /about/ title: "About" - - -

Here's the content of our About page. < / p>

Slide 15

Slide 15 text

📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md Directory Data { "layout": "base", "permalink": "/{{ title | slug }}/" }

Slide 16

Slide 16 text

📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md - - - title: "About" - - -

Here's the content of our About page. < / p>

Slide 17

Slide 17 text

Mike Aparicio < / title> <meta name="description" content="An Eleventy demo site."> < / head> <body> <header> <h1><a href="/">Mike Aparicio < / a> < / h1> < / header> <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / nav> <main> <p>Here's the content of our About page. < / p> < / main> <footer> <p>© 2021 All your rights are belong to us < / p> < / footer> < / body> < / html> 📁 _site 📁 about index.html 📁 _src 📁 _data 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md

Slide 18

Slide 18 text

📁 _site 📁 _src 📁 _data site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md Global Data { "name": "Mike Aparicio", "description": "An Eleventy demo site." }

Slide 19

Slide 19 text

📁 _site 📁 _src 📁 _data site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md Tags {{ site.name }}{% if title %} - {{ title }}{% endif %} < / title> <meta name="description" content=" {% if description %} {{ description }} {% else %} {{ site.description }} {% endif %}"> < / head> <body> . . . < / body> < / html>

Slide 20

Slide 20 text

📁 _site 📁 _src 📁 _data site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md - - - title: "About" description: "The About page." - - -

Here's the content of our About page. < / p>

Slide 21

Slide 21 text

📁 _site 📁 about index.html 📁 _src 📁 _data site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md Mike Aparicio - About < / title> <meta name="description" content="The About page."> < / head> <body> <header> <h1><a href="/">Mike Aparicio < / a> < / h1> < / header> <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / nav> <main> <p>Here's the content of our About page. < / p> < / main> <footer> <p>© 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

Slide 22

Slide 22 text

📁 _site 📁 _src 📁 _data nav.json site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md Navigation { "items": [ { "url": "/", "name": "Home" }, "url": "/about/", "name": "About" }, "url": "/blog/", "name": "Blog" } ] }

Slide 23

Slide 23 text

📁 _site 📁 _src 📁 _data nav.json site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md Iteration . . . < / head>

{{ site.name }} < / h1> < / header>
    {% for item in nav.items %}
  • {{ item.name }} < / a> < / li> {% endfor %} < / ul> < / nav> . . . < / body> < / html>

Slide 24

Slide 24 text

📁 _site 📁 about index.html 📁 _src 📁 _data nav.json site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md Mike Aparicio - About < / title> <meta name="description" content="The About page."> < / head> <body> <header> <h1><a href="/">Mike Aparicio < / a> < / h1> < / header> <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html" aria - current="page" data - state="active">About < / a> < / li> <li><a href="/blog.html">Blog < / a> < / li> < / ul> < / nav> <main> <p>Here's the content of our About page. < / p> < / main> <footer> <p>© 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

📁 _site 📁 _src 📁 _data nav.json site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md https://11ty.rocks/eleventyjs/dates/#year-shortcode Shortcodes module.exports = function(eleventyConf i g) { 
 eleventyConf i g.addShortcode("year", () = > `${new Date().getFullYear()}` ); };

Slide 27

Slide 27 text

. . . < / head>

{{ site.name }} < / a> < / h1> < / header>
    {% for item in nav.items %} . . . {% endfor %} < / ul> < / nav> {{ content | safe }} < / main>

    © {{ year }} All your rights are belong to us < / p> < / footer> < / body> < / html> 📁 _site 📁 _src 📁 _data nav.json site.json 📁 _includes base.njk 📁 assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md

Slide 28

Slide 28 text

📁 _site 📁 _src 📁 _data 📁 _includes 📁 assets 📁 blog f i rst - entry.md 📁 pages .eleventy.js .gitignore package.json README.md Markdown - - - title: "Blog Entry #1" layout: base permalink: /blog/{{ title | slug }}/ description: "This is my f i rst blog post." - - - # # {{ title }} Lorem ipsum dolor sit * * amet consectetur * * adipisicing elit. Voluptatibus facilis reiciendis dolores molestias, perferendis dolore odio, quia ratione aliquam vero quo praesentium! Ut quo, [fugiat maiores](https: / / 11ty.dev) ipsum voluptate commodi neque! - Markdown - Liquid - HAML - Mustache - Pug - EJS - Handlebars - Nunjucks Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ullam off i ciis sit quo reprehenderit expedita, inventore enim cum consectetur?

Slide 29

Slide 29 text

📁 _site 📁 _src 📁 _data 📁 _includes 📁 assets 📁 blog blog.json f i rst - entry.md 📁 pages .eleventy.js .gitignore package.json README.md Collections { "layout": "blog", "permalink": "/blog/{{ title | slug }}/", "tags": "posts" }

Slide 30

Slide 30 text

📁 _site 📁 _src 📁 _data 📁 _includes base.njk blog.njk 📁 assets 📁 blog blog.json f i rst - entry.md 📁 pages .eleventy.js .gitignore package.json README.md Layout Chaining - - - layout: base - - - {{ content | safe }} < / article>

Slide 31

Slide 31 text

📁 _site 📁 _src 📁 _data 📁 _includes base.njk blog.njk 📁 assets 📁 blog blog.json f i rst - entry.md second - entry.md third - entry.md 📁 pages .eleventy.js .gitignore package.json README.md - - - title: "Blog Entry #3" description: "This is my third blog post." - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque animi delectus laboriosam, dicta exercitationem magni vel hic perferendis consequuntur nisi, quasi ut commodi corrupti praesentium ad consequatur at! Dignissimos, nam?

Slide 32

Slide 32 text

📁 _site 📁 _src 📁 _data 📁 _includes 📁 assets 📁 blog 📁 pages about.html blog.html home.html pages.json .eleventy.js .gitignore package.json README.md - - - title: "Blog" description: "The Blog page." - - -
    {% for post in collections.posts %}
  • {{ post.data.title }} < / a> < / li> {% endfor %} < / ul>

Slide 33

Slide 33 text

📁 _site 📁 blog index.html 📁 _src 📁 _data 📁 _includes 📁 assets 📁 blog 📁 pages about.html blog.html home.html pages.json .eleventy.js .gitignore package.json README.md Mike Aparicio - Blog < / title> <meta name="description" content="The Blog page."> < / head> <body> . . . <nav> <ul> <li><a href="/">Home < / a> < / li> <li><a href="/about.html">About < / a> < / li> <li><a href="/blog.html" aria - current="page" data - state="active">Blog < / a> < / li> < / ul> < / nav> <main> <h2>Blog < / h2> <ul> <li><a href="/blog/blog - entry-1">Blog Entry #1 < / a> < / li> <li><a href="/blog/blog - entry-2">Blog Entry #2 < / a> < / li> <li><a href="/blog/blog - entry-3">Blog Entry #3 < / a> < / li> < / ul> < / main> . . . < / body> < / html>

Slide 34

Slide 34 text

Agility CMS Bloomreach Bold (Quintype) Butter CMS Cockpit CMS Contentful* Contentstack Core dna CoreMedia Content Cloud Cosmic JS Craft CMS* Crownpeak Dato CMS Directus DNN Evoq Content dotCMS Episerver eZ Platform FirstSpirit (e-Spirit) GraphCMS Ingeniux CMS Kontent.ai (Kentico) Liferay Magnolia CMS Mura Netlify CMS* Prismic.io* Sanity* Scrivito Sitecore Sitefinity Solodev Strapi* Zesty.io An Incomplete List of Headless CMSs https://www.cmswire.com/web-cms/13-headless-cmss-to-put-on-your-radar/ * services Mike actually heard of before preparing this talk, fwiw

Slide 35

Slide 35 text

Eleventy Resources 11ty.dev 11ty.recipes 11ty.rocks piccalil.li/course/learn-eleventy-from-scratch/ github.com/peruvianidol/11ty-starter github.com/peruvianidol/template-talk Code idol.pe/template-talk Slides THANK YOU! Mike Aparicio @peruvianidol mikeaparicio.com