Let’s Learn 11ty Part 6: Plugins

In our final article we deployed our web site. At this level, it’s working fairly effectively for a web site. There’s nevertheless extra we will do to enhance the way it capabilities – beginning with Plugins

Plugins

Plugins are items of exterior code that may be imported into Eleventy to implement extra performance.

Owing to Eleventy’s nature, there each official (beneath the @11ty prefix) and neighborhood contributed plugins.

Beneath are some official plugins:

• Edge: Lets you run Eleventy in a Edge Operate for dynamic addition of content material to your Eleventy web site.
• Picture: To permit resizing and era of photos
• Syntax Highlighting: To allow code syntax highlighting with out client-side JavaScript.
• Navigation: To create hierarchical navigation in your web site.

To make use of a plugin, say for instance the Picture one:

npm set up @11ty/eleventy-img

Then embrace it in your .eleventy.js on the prime:

const Picture = require("@11ty/eleventy-img");

The remainder of the plugins might be seen on this web page here

Utilizing A Plugin to Enhance Our Web site

Enhance search engine optimization

The search engine optimization for our web site will not be that good at present. We will do a couple of steps to enhance it.

Let’s use one of many in-built plugins to assist us create a robots.txt and `sitemap.xml

Robots

In our src , we’ll make a robots.txt file with this in it:

Simply creating this file will not do something. Do you recall why?

NOTE: .txt will not be a part of the supported template languages, we’ve so as to add a PassThroughCopy for our file

In .eleventy.js, add this:

Sitemap

Whereas we’re nonetheless on this file, let’s add some code for out sitemap.

On the prime of the file, do that:

js
const { DateTime } = require("luxon");

Then

Within the code above, we import DateTime from luxon – which is in-built to Eleventy

We then create a shortcode for the present date and use DateTime to get the present date which we’ll use in our sitemap

Now we will make our sitemap file. In src create a sitemap.njk file

Above:

• We used the permalink key to specify how we wish this file to be rendered
• As well as, we exclude it from our collections
• We run a loop on all of our collections
  • We then output the URL of our web site together with the actual web page url – web page.url
  • We use our currentDate shortcode to output the date when every web page looped by was modified

NOTE: Be sure you exchange the location url with your personal deployed URL

Show Date on Posts

We’ll make use of DateTime as soon as extra, however a bit otherwise:

The change weblog.njk to appear like this:

I’ve added extra courses to make the weblog residence look higher

Conclusion

Right this moment we’ve learnt about Plugins in Eleventy. How they may help us accomplish a number of issues on our Eleventy web site.

We now have used a plugin to:

• add a sitemap
• show the date of our posts

Not dangerous huh? Up till this level we hadn’t imported something. And even now, what we’ve added will not be that a lot

As at all times:

Thanks for studying, let’s join!

Thanks for visiting this little nook of mine. Let’s join on Twitter, Polywork and LinkedIn