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

If you liked this post, you might like these ones, too

  1. Contains CSS attribute selector

    🔥 A handy quick tip.

    Continue
  2. Easy horizontal and vertical centering in CSS

    🔥 A handy quick tip.

    Continue
  3. Create a line break while maintaining inline status

    🔥 A handy quick tip.

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.