Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Eleventy By Example

You're reading from   Eleventy By Example Create powerful, performant websites with a static-first strategy

Arrow left icon
Product type Paperback
Published in May 2023
Publisher Packt
ISBN-13 9781804610497
Length 198 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Bryan Robinson Bryan Robinson
Author Profile Icon Bryan Robinson
Bryan Robinson
Arrow right icon
View More author details
Toc

Table of Contents (13) Chapters Close

Preface 1. Chapter 1: Setting Up Your Website 2. Chapter 2: Adding Data to Your 11ty Website FREE CHAPTER 3. Chapter 3: Deploying to a Static Site Host 4. Chapter 4: Building a Blog with Collections 5. Chapter 5: Creating Custom Shortcodes to Add Mixed Media to Markdown 6. Chapter 6: Building a Photography Site with the 11ty Image Plugin 7. Chapter 7: Building a Podcast Website with 11ty Plugins and Custom Outputs 8. Chapter 8: Creating a Static-Site Search with 11ty Serverless and Algolia 9. Chapter 9: Integrating 11ty with a Headless CMS 10. Chapter 10: Creating Custom 11ty Plugins 11. Index 12. Other Books You May Enjoy

Adding global data

Page and template data are great when adding unique data. Directory data is great for sharing data between specific pages. But what if you need to add data to every page? That’s where global data files come in.

To use global data files, we need a directory to store them. Inside the src directory, create a new directory named _data—11ty’s default data directory name. This can store multiple data files. Each file in this directory will give access to its data to any template using a key with the same name as its filename. For our site, let’s add some general site information and add the ability to access it from multiple files.

Create a new file in the _data directory named site.json. This file will have general information about the site, including the site name and the copyright date to be displayed in the footer:

{
   "name": "My Awesome Site",
   "copyright": "2022"
}

With this data in hand, let’s insert it into our templates.

In the site head—located in src/_templates/includes/header.html—we’ll update the title. Currently, it’s just a hardcoded string. Let’s have it pull the page title and the site title:

<title>{{ title }} – {{ site.name }}</title>

In the footer—located in src/_templates/includes/footer.html—let’s adjust the copyright information:

<footer class="footer">
    <p>&copy; {{ site.name }} {{ site.copyright }}</p>
</footer>

Now the information is all changeable from one location whenever it needs to be updated.

Adding dynamic global data

Keen readers will have noticed something slightly off with that last section. The copyright date is already out of date. I’m writing this book at the end of 2022, but you’re not reading it then. To change this for the site, we would need to go into our footer each year and change the date. However, 11ty’s JavaScript data files can update this for us.

While JSON can be a handy format for simple data, it can be extended by writing it as JavaScript. Any code written in a JavaScript data file will be run each time the site builds. If we update the site’s copyright data with a script, it means the site will just need to be rebuilt each year, and no content change will be needed.

What do you mean “built”?

11ty has no client-side JavaScript code generated by default. Any JavaScript we write for data files will run when the HTML for the site is generated by 11ty—often referred to as “at build time.” This happens when the default eleventy command is run in the terminal. This usually happens in your hosting provider, but can be run locally as well.

To start the process, let’s convert site.json over to site.js. This will immediately break the running of the terminal process. This is not a proper JavaScript module export.

Since the file is now a JavaScript file, it needs to be refactored to export the object instead of just containing the JSON object.

module.exports = {
   "name": "My Awesome Site",
   "copyright": "2022"
}

When you run 11ty again, it should work as it did before.

Now that this is a JavaScript file, any Node.js JavaScript can be run from within the file. For our use, we can use the built-in Date functionality in JavaScript to get the current date and save the year string as a globally accessible variable named copyright:

module.exports = {
   "name": "My Awesome Site",
   "copyright": new Date().getFullYear()
}

Now, the copyright date in the footer should display the current year instead of 2022. This is a simple example of using dynamic data in 11ty, but anything Node.js can do, 11ty’s JavaScript data files can also do. This includes things such as reading files from the filesystem, querying APIs, and transforming data.

You have been reading a chapter from
Eleventy By Example
Published in: May 2023
Publisher: Packt
ISBN-13: 9781804610497
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime