This content originally appeared on DEV Community and was authored by James 'Dante' Midzi
In our last article we deployed our site. At this point, it is working quite well for a site. There is however more we can do to improve how it functions - starting with Plugins
Plugins
Plugins are pieces of external code that can be imported into Eleventy to implement additional functionality.
Owing to Eleventy's nature, there both official (under the @11ty prefix) and community contributed plugins.
Below are some official plugins:
- Edge: Allows you to run Eleventy in a Edge Function for dynamic addition of content to your Eleventy site.
- Image: To allow resizing and generation of images
- Syntax Highlighting: To permit code syntax highlighting without client-side JavaScript.
- Navigation: To create hierarchical navigation in your site.
To use a plugin, say for example the Image one:
npm install @11ty/eleventy-img
Then include it in your .eleventy.js at the top:
const Image = require("@11ty/eleventy-img");
The rest of the plugins can be viewed on this page here
Using A Plugin to Improve Our Site
Improve SEO
The SEO for our site is not that good currently. We can do a few steps to improve it.
Let's use one of the built in plugins to help us create a robots.txt and `sitemap.xml
Robots
In our src , we'll make a robots.txt file with this in it:
Just creating this file won't do anything. Do you recall why?
NOTE:
.txtis not part of the supported template languages, we have to add a PassThroughCopy for our file
In .eleventy.js, add this:
Sitemap
While we're still in this file, let's add some code for out sitemap.
At the top of the file, do this:
js
const { DateTime } = require("luxon");
Then
In the code above, we import DateTime from luxon - which is built in to Eleventy
We then create a shortcode for the current date and use DateTime to get the current date which we'll use in our sitemap
Now we can make our sitemap file. In src create a sitemap.njk file
Above:
- We used the permalink key to specify how we want this file to be rendered
- In addition, we exclude it from our collections
- We run a loop on all of our collections
- We then output the URL of our site along with the particular page url -
page.url - We use our currentDate shortcode to output the date when each page looped through was modified
- We then output the URL of our site along with the particular page url -
NOTE: Make sure you replace the site url with your own deployed URL
Display Date on Posts
We will make use of DateTime once more, but a bit differently:
The change blog.njk to look like this:
I have added more classes to make the blog home look better
Conclusion
Today we have learnt about Plugins in Eleventy. How they can help us accomplish several things on our Eleventy site.
We have used a plugin to:
- add a sitemap
- display the date of our posts
Not bad huh? Up until this point we hadn't imported anything. And even now, what we have added is not that much
As always:
- The live site: https://learneleventy.netlify.app
- The working repo: https://github.com/Psypher1/learneleventy
- The docs: https://www.11ty.dev/docs/
- The discord: https://www.11ty.dev/blog/discord/**
Thank you for reading, let's connect!
Thank you for visiting this little corner of mine. Let's connect on Twitter, Polywork and LinkedIn
This content originally appeared on DEV Community and was authored by James 'Dante' Midzi
James 'Dante' Midzi | Sciencx (2022-06-14T16:13:06+00:00) Let’s Learn 11ty Part 6: Plugins. Retrieved from https://www.scien.cx/2022/06/14/lets-learn-11ty-part-6-plugins/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.