An 11ty plugin to render accessible footnotes with Liquid
The eleventy-plugin-footnotes is a versatile plugin designed for Eleventy, also known as 11ty, that enhances your website by rendering accessible footnotes using Liquid syntax. Whether you’re a blogger, writer, or developer, this plugin allows you to provide additional context and citations without cluttering your main content. It paves the way for a more organized reading experience by placing footnotes seamlessly at the bottom of an article or post.
With its straightforward installation and customizable options, it’s perfect for anyone looking to enhance their content’s accessibility and usability. The plugin does not impose any styling, leaving designers free to implement their unique aesthetic, making it a practical choice for varied use cases.
Easy Installation: Quickly install via npm and integrate with your existing Eleventy configuration to start using footnotes immediately.
Customizable Options: Adjust settings like title, titleId, and class names to maintain brand consistency and styling preferences.
HTML Support in Footnotes: Footnotes can include HTML for added customization and flexibility, allowing any markup to be utilized seamlessly.
Dynamic Back Links: Configure unique back link labels for each footnote to enhance accessibility and improve navigation for users.
BEM Class Integration: Built with BEM (Block Element Modifier) methodology in mind, providing a clear structure for styling footnotes and their elements.
Referential Integrity: Ensures that footnote references are only rendered if they have corresponding content, avoiding confusion in your articles.
Flexible Usage: Implement footnotes at any point in your articles by wrapping text sections with the appropriate Liquid tags, placing footnotes wherever it feels most natural.
FAQ Section for Support: The plugin includes a helpful FAQ to resolve common issues, such as why footnotes might not be rendering correctly, making troubleshooting straightforward.
