Add footnote markers to template output in eleventy projects.

Useful for setups where you need to put footnote markers in your content, but want the footnotes themselves to appear outside of that content.

This project is beta. Breaking changes prior to version 1.0.0 are possible.

Installation

Install the module in your eleventy project using npm with a git url:

npm i git+https://github.com/btrem/eleventy-plugin-footnotes.git

The module is available only via GitHub for now. When it's more stable, I'll add it to the npm registry.

Importing It in Eleventy:

ES6 Syntax

import footnotes from eleventy-plugin-footnotes;

export default function(eleventyConfig) {
    // config stuff...
}

Common js Syntax

Import it inside the main config function. Use default: syntax, and use await on the import. Also, since you're using await, make sure that the config function is async:

module.exports = async function (eleventyConfig) {
    const { default: footnotes } = await import("eleventy-plugin-footnotes");

    // other config stuff...
}

Add the Plugin

Use the addPlugin method in your eleventy configuration file:

eleventyConfig.addPlugin(footnotes);

The footnotes plugin is now available in your templates.

Usage

The plugin adds

• a universal shortcode called footnoteMarker that takes a number and returns html markup for a footnote reference marker with a link to a footnote (which you supply, e.g., in a layout); and
• a universal filter called footnoteSymbol that transforms a number to a footnote symbol, e.g., 2 => †;

Shortcode

Add a footnote marker using the footnoteMarker shortcode. The default format for markers is similar to Wikipedia's: they will be in a <sup>erscript element; bracketed; and will include a link using a fragment id, suitable for linking to the footnote.

For example, the following template extract

Lorem ipsum dolor sit amet.{% footnoteMarker 1 %}

will produce this html fragment:

Lorem ipsum dolor sit amet.<sup><a id="ref-1" href="#note-1">[1]</a>

Filter

Change a footnote reference number to a symbol using the footnoteSymbol filter. For example, {{ 1 | footnoteSymbol }} produces ✲; {{ 2 | footnoteSymbol }} produces †; etc.

Roadmap

• Add includes/partials/macros to output footnotes. Depends on expanding virtual templates to add support for includes. Follow along at issue 3501 or issue 3768.

Maintainer

Brian Tremblay