Developing an Additive Seize Shortcode in Eleventy

Adequate, so let me get started off via announcing {that a}) I am not positive it is a excellent concept and b) it will exist already and I simply have no idea about it. This all took place from me doing a little analysis on an Eleventy tagged query on StackOverflow. In case you are not mindful, Liquid has a tag inbuilt referred to as seize. It seems like so:


{% seize my_variable %}
I'm being captured.
{% endcapture %} 

This then means that you can output my_variable. Having paired shortcodes like this makes it more straightforward to seize dynamic output and put it aside to a variable. So as an example:


{% seize my_variable %}
I'm being captured at { date: "%Y-%m-%d %H:%M" }.
{% endcapture %} 

One fascinating side of the seize shortcode despite the fact that is that it all the time units the worth to what you seize. In case you had one thing in that variable already, it will get overwritten. I believe that is anticipated and no longer unhealthy, however this is an instance of that as neatly:

{% seize my_variable %}I'm being captured.{% endcapture %}
{% seize my_variable %}MORE captured.{% endcapture %}

In case you output my_variable, you’re going to handiest get MORE captured. Once more, I believe that is expeted. But it surely were given me pondering – what if we constructed a shortcode that appended, quite then changed, content material? That is what I got here up with:

module.exports = serve as(eleventyConfig) { let _CAPTURES; eleventyConfig.on('beforeBuild', () => { //I would like this to wipe _CAPTURES when modifying pages, would not be a topic in prod _CAPTURES = {}; }); eleventyConfig.addPairedShortcode("mycapture", (content material, title) => { if(!_CAPTURES[name]) _CAPTURES[name] = ''; _CAPTURES[name] += content material; go back ''; }); eleventyConfig.addShortcode("displaycapture", title => { go back _CAPTURES[name]; }); };

This .eleventy.js document defines two shortcodes – mycapture and displaycapture. I outline a world variable (I’m going to provide an explanation for beforeBuild in a sec) named _CAPTURES that retail outlets key worth pairs. When the use of mycapture, the textual content within the shortcode get handed to the content material variable and once I in fact write the shortcode, I come with the title argument. Here is an instance:

{% mycapture "foo" %}
<p>
That is take a look at i feel 1
</p>
{% endmycapture %} {% mycapture "foo" %}
<p>
That is take a look at i feel 2 </p>
{% endmycapture %} 

Right here I have captured "foo" two times. After which to output it, I do:

<p>
And here's my demo, must display two portions: {% displaycapture "foo" %}
</p> 

And that’s the reason it. The use of the pattern above you get:

<p>
That is take a look at i feel 1
</p>
<p>
That is take a look at i feel 2
</p>

So one factor bizarre I spotted is that the content material started to replicate itself. So as a substitute of two paragraphs, I would had four. From what I may acquire, Eleventy used to be no longer rerunning .eleventy.js on me modifying a web page, so it did not transparent the variable. I first of all had:

const _CAPTURES = {};

I stored getting inconsistent effects that would leave if I killed the Eleventy CLI and ran from scratch. I in any case found out what came about and that’s the reason once I added the beforeBuild tournament. In idea it isn’t wanted in manufacturing as you are not refrefshing there, but it surely does not harm being there as is I believe.

If you need a duplicate of this, you’ll in finding it right here: https://github.com/iandroid.eu/eleventy-demos/tree/grasp/additive

Photograph via (*2*)Jakob Owens on (*1*)Unsplash