Dynamic footer copyright date in Eleventy

Categories

That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.


That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.

First up: create a file inside of your _data folder called helpers.js and add the following to it:

Code language
JavaScript
module.exports = {
  currentYear() {
    const today = new Date();
    return today.getFullYear();
  }
};

Now, on your templates, you can do something like this:

Code language
HTML
<footer role="contentinfo">
  <p>Copyright {{ helpers.currentYear() }} My Awesome Site</p>
</footer>

This trick uses JavaScript Data Files which I love using to create global helper functions like the above. They’re extremely handy and one of my favourite Eleventy features.


Comments

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me