API

The plugin allows configuring a fair bit of the output:

• title: The title option is the content of the title of the footnotes section. This title can be visually hidden if desired but it should not be removed or emptied.

• titleId: The titleId option is the id set to the title of the footnotes section. It is also referred in the aria-describedby attribute of every footnote reference.

• backLinkLabel: The backLinkLabel option is a function resolving the aria-label of the back link of every footnote. It is important it differs from back link to back link.

• baseClass: The baseClass option is used as the base class for all the other BEM classes (<base>__ref, <base>, <base>__title, <base>__list, <base>__list-item, <base>__back-link).

• classes: Custom class names map for each element rendered by the plugin, in case you want to apply some additional utility classes. Note that if you specify baseClass, these class names will be applied in addition to the BEMish class names rather than overriding them. The following keys can be used in this map:

  • container: class name for the footnotes footer that renders the title and all of the footnotes.
  • title: class name for the title that appears above the footnotes list.
  • ref: class name for the anchor that takes you to the footnote.
  • list: class name for the list that renders the footnotes themselves.
  • listItem: class name for the list items.
  • backLink: class name for the back-link that appears at the end of each footnote.

These are the default options:

const footnotes = require("eleventy-plugin-footnotes");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(footnotes, {
    title: "Footnotes",
    titleId: "footnotes-label",
    backLinkLabel: (footnote, index) => "Back to reference " + (index + 1),
    baseClass: "Footnotes",
    classes: {},
  });
};