plugins.md

eleventyNavigation
parent key order Configuration Plugins 6

Plugins {% addedin "0.2.13" %}

Plugins are custom code that Eleventy can import into a project from an external repository.

List of Official Plugins

All official plugins live under the @11ty npm organization and plugin names will include the @11ty/ prefix.

{{ collections.all | eleventyNavigation("Plugins") | eleventyNavigationToHtml({ showExcerpt: true }) | safe }}

Unofficial Plugins

• eleventy-plugin-toc by James Steinbach will generate a table of contents from your headings.
• eleventy-plugin-nesting-toc by Jordan Shurmer will generate a nested table of contents from your site's headings.
• @mightyplow/eleventy-plugin-cache-buster by mightyplow will add content hashes to JavaScript and CSS resources.
• eleventy-filter-npm-package-downloads by André Jaenisch will show you the number of downloads for the given npm package.
• eleventy-plugin-meta-generator by André Jaenisch will render a generator <meta /> tag for you.
• eleventy-plugin-pwa by Nanda Okitavera will generate a Service Worker for you.
• eleventy-plugin-reading-time by Johan Brook will generate a tag for the estimated reading time.
• eleventy-plugin-respimg by Eric Portis will take care of the srcset attribute for responsive images for you.
• eleventy-plugin-typeset by Johan Brook will make your typography nicer.
• eleventy-plugin-yamldata by Sungkwang Lee will allow you to use a yaml file as local data file.
• @shawnsandy/npm_info by Shawn Sandy will provide you with package detail for an npm package or GitHub info.
• eleventy-plugin-lazyimages by Liam Fiddler will add progressive lazy loading to your images.
• eleventy-xml-plugin by Jeremias Menichelli adds Liquid filters used for sitemap and RSS/feed file generation.
• eleventy-plugin-markdown-shortcode by Tyler Williams adds a universal shortcode to render markdown.
• eleventy-plugin-sass by Maarten Schroeven will add the ability to use Sass for your stylesheets
• eleventy-plugin-youtube-embed by Graham F. Scott automatically embeds YouTube videos based on just their URLs.
• @infinity-interactive/eleventy-plugin-injector by John Anderson allows you to run an arbitrary callback at build time or when using --serve or --watch
• eleventy-plugin-cloudinary by Juan Fernandes adds a universal shortcode so you to add images from your cloudinary account.
• Search for eleventy-plugin on npm

Adding a Plugin

Install the plugin through npm.

npm install @11ty/eleventy-plugin-rss --save

Add the plugin to Eleventy in your config file

Your config file is probably named .eleventy.js.

{% codetitle ".eleventy.js" %}

const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginRss);
};

Plugin Configuration Options {% addedin "0.5.4" %}

Use an optional second argument to addPlugin to customize your plugin’s behavior. These options are specific to the plugin. Please consult the plugin’s documentation (e.g. the eleventy-plugin-syntaxhighlight README) to learn what options are available to you.

const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginSyntaxHighlight, {

    // only install the markdown highlighter
    templateFormats: ["md"],

    init: function({ Prism }) {
        // Add your own custom language to Prism!
    }
  });
};

Namespace the plugin additions

You can namespace parts of your configuration using eleventyConfig.namespace. This will add a string prefix to all filters, tags, helpers, shortcodes (as of 0.7.0), collections, and transforms.

{% codetitle ".eleventy.js" %}

const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
  eleventyConfig.namespace("myPrefix_", () => {
    // the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate
    eleventyConfig.addPlugin(pluginRss);
  });
};

{% callout %} Plugin namespacing is an application feature and should not be used if you are creating your own plugin (in your plugin configuration code). Follow along at Issue #256. {% endcallout %}

Community Resources

• Creating an 11ty Plugin—SVG Embed Tool by {% avatarlocalcache "twitter", "brob" %}Bryan Robinson