Step 7. Plugins

We've really reached the end of the scope I will cover with 11ty itself. We haven't covered every last feature of the program but we have covered all the core features you need to understand to get started. The last thing we will look at is how to expand 11ty's functionality by using plugins. We've already configured a couple plugins, WebC and Render Template.

First Party Plugins

Eleventy has a set of extremely useful plugins as part of the project that you should definitely be extremely famliar with as you might want to use some of them on nearly any project you create. I'm going to walk through installing a few I find particularly useful.

Id Attribute

When I write longform Markdown content, I find the ability to link to a specific heading extremely useful. The ID Attribute plugin automatically adds id attributes to all headings in your Markdown files. It's included with 11ty.

Input Path to URL

Link locally to another template in your project and the correct URL will be generated for you. This is really useful with blogs. It's included with 11ty. Check out the docs for more info.

RSS

Let's make a feed for our blog! This one we do need to install and we will find the package at @11ty/eleventy-plugin-rss. This plugin has some very advanced functionality but you can set it up extremely simply with virtual templates. Review the RSS Plugin Docs for details or the configuration of this project.

If you have complex site structure, the Navigation Plugin is a must. It allows you to define a complex site hierarchy with all the tools needed to develop a menu. You can also use it to make breadcrumbs.

Syntax Highlighting

Oh hey, here's one we can use with our current source code. The Syntax Highlighting Plugin uses one of several methods for highlighting code. I've changed some settings to enable syntax highlighting for the documentation files. Review the project code at this step.

Image

11ty Image Plugin is an extremely powerful yet easy to configure plugin for managing complex image workflows. It can resize, convert formats, and optimize images on the fly. Please review the documentation, there is a lot to read. I've set up a basic configuration and restructured the /photos folder and removing the passthrough copy.

Upgrade Helper

This is a plugin to help you upgrade your 11ty site for major versions. It will log to the console and you can address the reported issues.

Third Party Plugins

There are some great third party plugins available as well and many are very easy to use. I won't go through these but you can search npm for 11ty plugins and look for popular ones. Also consider that with WebC, every web component is a potential plugin. You don't need to look for a plugin to embed Google Maps when you can likely find or develop a web component to do the same thing.

External APIs

You might use an external API like Airtable to pull down complex data for rendering or you may use WordPress for the content of an 11ty site. You may want to check out the Fetch plugin to help manage interactions if there are limits.