Skip to main content

Overview

The eleventy-plugin-footnotes package is an Eleventy plugin that turns Liquid tags into accessible footnotes. It was originally published in 2020 and announced in Footnotes in Eleventy.

It is a good fit when:

  • Your site is built with Eleventy.
  • You write content in Markdown or Liquid templates.
  • You want footnotes generated at build time.
info

Make sure to understand the terminology before getting started.

Install​

Install it from npm:

npm install eleventy-plugin-footnotes

Setup​

Add the plugin in your Eleventy config:

.eleventy.js
import footnotes from "eleventy-plugin-footnotes";

/** @param {import('@11ty/eleventy/UserConfig').default} config */
export default function (eleventyConfig) {
  eleventyConfig.addPlugin(footnotes, {
    // optional configuration
  });
}

By default the plugin:

  • Registers a footnoteref paired shortcode to mark references.
  • Registers a footnotes shortcode that renders the endnotes list.

Find how to configure and customize your footnotes in the next section.