Introduction

Recently I have fun playing with 11ty, a static site generator. I built a small site to host a serie of articles by fetching from a wordpress site.

I will write another article about what I learned from building that site.

In this article, I just want to share an example of adding dynamic year in footer. The method can be used to call any javascript function inside a template file.

Option 1: using eleventy.addGlobalData

Add in `eleventy.config.js" or ".eleventy.js":

eleventyConfig.addGlobalData("getCurrentYear", () => {
    return new Date().getFullYear()
  })

Then in your footer.njk

<small>&copy; {{ getCurrentYear }} All rights reserved.</small>

Option 2: using shortcode

Add in `eleventy.config.js" or ".eleventy.js":

  eleventyConfig.addShortcode("currentYear", () => {
    return new Date().getFullYear()
  })

Then in your footer.njk

<small>&copy; {% currentYear %} All rights reserved.</small>

Option 3: using _data folder

create a file utils.js under _data folder:

module.exports = {
  getCurrentYear: function () {
    return new Date().getCurrentYear()
  },
}

Then in your footer.njk

<small>&copy; {{ utils.getCurrentYear }} All rights reserved.</small>