Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Templating: Eleventy's Superpower

Mike Aparicio
July 15, 2021
Programming
0
26

Templating: Eleventy's Superpower

Presented at the first Eleventy Meetup, July 15, 2021.

One of the many cool features of Eleventy is its support of multiple template languages. But what the heck are template languages and how can you use them to make your static Eleventy sites feel like the dynamic, server-rendered sites of yore?

Video: https://www.youtube.com/watch?v=rZyNBd1WgVM

Mike Aparicio

July 15, 2021
Tweet

More Decks by Mike Aparicio

See All by Mike Aparicio
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
260
CSS Layout and Responsive Design
peruvianidol
0
240
Intro to HTML and CSS
peruvianidol
2
220
Designing for the Web in a Multi-Device World
peruvianidol
2
130
Road to Responsive
peruvianidol
4
360
Fun with Flexbox
peruvianidol
4
520
Prototyping with HTML and CSS
peruvianidol
2
230
Building a Dream Team
peruvianidol
0
200
Roll Your Own CSS Framework
peruvianidol
4
210

Other Decks in Programming

See All in Programming
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
JaSST 24 九州：ワークショップ(は除く) 実践！マインドマップを活用したソフトウェアテスト＋活用事例
satohiroyuki
0
260
Identifying User Idenity
moro
6
7.9k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう（KoR2024）
ymtdzzz
4
1.6k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
Java ジェネリクス入門 2024
nagise
0
600
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
520

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
A better future with KSS
kneath
238
17k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Facilitating Awesome Meetings
lara
49
6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Typedesign – Prime Four
hannesfritz
39
2.4k
Faster Mobile Websites
deanohume
304
30k
Producing Creativity
orderedlist
PRO
341
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k

Transcript

  1. TEMPLATING Mike Aparicio 
 @peruvianidol Eleventy's Superpower

  2. None

  3. <html> <head> <title>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>&copy; 1999 All your rights are belong to us < / p> < / div> < / body> < / html>

  4. <?php include("externals/header.php"); ?> <div class="main"> . . . < /

    div> <?php include("externals/footer.php"); ?>

  5. Markdown (2004) Liquid (2006) HAML (2006) Mustache (2009) EJS (2010)

    Handlebars (2011) Pug (2010) Nunjucks (2012)

  6. 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 %}

  7. Markdown Liquid HAML Mustache EJS Handlebars Pug Nunjucks JavaScript (as

    11ty.js) HTML (as anything!) Eleventy Template Languages

  8. <html> <head> <title>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>&copy; 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

  9. <html> <head> <title>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>&copy; 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

  10. 📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁

    assets 📁 pages home.html .eleventy.js .gitignore package.json README.md Front Matter - - - layout: base - - - <p>Here's the content of our homepage. < / p>

  11. 📁 _site 📁 pages 📁 home index.html 📁 _src 📁

    _data 📁 _includes base.njk 📁 assets 📁 pages home.html .eleventy.js .gitignore package.json README.md <html> <head> <title>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>&copy; 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

  12. 📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁

    assets 📁 pages home.html .eleventy.js .gitignore package.json README.md Permalink - - - layout: base permalink: / - - - <p>Here's the content of our homepage. < / p>

  13. 📁 _site index.html 📁 _src 📁 _data 📁 _includes base.njk

    📁 assets 📁 pages home.html .eleventy.js .gitignore package.json README.md <html> <head> <title>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>&copy; 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

  14. 📁 _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" - - - <p>Here's the content of our About page. < / p>

  15. 📁 _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 }}/" }

  16. 📁 _site 📁 _src 📁 _data 📁 _includes base.njk 📁

    assets 📁 pages about.html home.html pages.json .eleventy.js .gitignore package.json README.md - - - title: "About" - - - <p>Here's the content of our About page. < / p>

  17. <html> <head> <title>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>&copy; 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

  18. 📁 _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." }

  19. 📁 _site 📁 _src 📁 _data site.json 📁 _includes base.njk

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

  20. 📁 _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." - - - <p>Here's the content of our About page. < / p>

  21. 📁 _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 <html> <head> <title>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>&copy; 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>

  22. 📁 _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" } ] }

  23. 📁 _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 <html> <head> . . . < / head> <body> <header> <h1>{{ site.name }} < / h1> < / header> <nav> <ul> {% for item in nav.items %} <li><a href="{{ item.url }}" {% if item.url = = = page.url %} aria - current="page" data - state="active" {% endif %} >{{ item.name }} < / a> < / li> {% endfor %} < / ul> < / nav> . . . < / body> < / html>

  24. 📁 _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 <html> <head> <title>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>&copy; 2021 All your rights are belong to us < / p> < / footer> < / body> < / html>
  25. None

  26. 📁 _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()}` ); };

  27. <html> <head> . . . < / head> <body> <header>

    <h1><a href="/">{{ site.name }} < / a> < / h1> < / header> <nav> <ul> {% for item in nav.items %} . . . {% endfor %} < / ul> < / nav> <main> {{ content | safe }} < / main> <footer> <p>&copy; {{ 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

  28. 📁 _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?

  29. 📁 _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" }

  30. 📁 _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 - - - <article> {{ content | safe }} < / article>

  31. 📁 _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?

  32. 📁 _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." - - - <ul> {% for post in collections.posts %} <li><a href="{{ post.url }}">{{ post.data.title }} < / a> < / li> {% endfor %} < / ul>

  33. 📁 _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 <html> <head> <title>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>

  34. 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

  35. 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