There are (at least) three cunning ways in Eleventy to get “reusable snippet” or “reusable component” functionality.
include: Great for just including a common, static element in your template, say a
footerpartial. (Note that while you can
seta variable just before your
includeline to make that variable available to the included partial, it’s not really “passing in” and scoping the variable like a parameter, so it’s best to reserve
includefor simple stuff.)
macro: Takes things up a notch by supporting passing in parameters which are then locally scoped. You could use this to create a simple component. See Trys Mudford’s article Encapsulated 11ty Components.
- 11ty Shortcodes and Named Shortcodes: Shortcodes feel to me pretty much like a wrapper for
macro, whilst also supporting the inclusion of
npmpackages and the use of
asyncfunctions. However with Named Shortcodes, unlike
macroyou can also pass in a
blockof content (rather than arguments alone). This would be handy for any component or layout into which you nest lots of varied content (such as a Stack, for example). See 11ty docs on paired shortcodes for more details.
Hat tip to Jérome Coupé who recently tweeted on this topic and prompted me to gather my thoughts too.