tlohdeMar 12

A question for the #11ty and #nunjuck wizards...my markdown files get fed into the template with {{ content | safe }}.

What if, say, I want to split my content up and scatter it across the template...

{{ firstBitOfContent | safe }}
<div>
...misc other html...maybe an image...
</div>
{{ secondBitOfContent | safe }}

Is there some magic shortcode/filter thing...that means I could achieve this whilst having it still in one markdown file....

## My subheading
and this is my first bit of content

{% magic shortcode/filter thing %}

and this is the second part of my content

Does this make any sense?

I see some of the 11ty starters (like this one https://github.com/StaticMania/roxo-eleventy/blob/master/src/index.md?plain=1) rely heavily on frontmatter for complex templating... I'd rather not go down that path

#madewith11ty #eleventy #templating

roxo-eleventy/src/index.md at master · StaticMania/roxo-eleventy

Contribute to StaticMania/roxo-eleventy development by creating an account on GitHub.

GitHub
Show threadMark LlobreraMar 12
@tlohde You can use shortcodes/paired shortcodes (https://www.11ty.dev/docs/shortcodes/). I wrote up an example of a video block here: https://markllobrera.com/posts/eleventy-video-loop-shortcode/
Shortcodes

A docs page for Eleventy, a simpler static site generator.

Eleventy
Show threadJuhisMar 12

@markllobrera @tlohde Another option is to use a filter and a splitter keyword.

Something along the lines of https://pastebin.com/qdKVYD9j

Quick example so not the most beautiful.

Simplified split with filter for 11ty - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Pastebin
Show threadMark LlobreraMar 12
@hamatti @tlohde Oooh. Thanks for sharing this
Show threadJuhisMar 12
@markllobrera @tlohde And you can replace the ==SPLIT== with something more aesthetic like =~=~=~= to keep the Markdown files more readable.
Show threadtlohdeMar 12
@hamatti @markllobrera that's the magic I was after. Thank you both.
Show threadanydigital3d ago

@tlohde @hamatti @markllobrera I'm heavily using named sections:

`<!--section:name-->` via filter ` | section: name`

The whole website https://blades.ninja is built using this technique, you can see those sections injected inside .md files: https://github.com/anydigital/blades/blob/main/README.md?plain=1

The filter can be installed via https://github.com/anydigital/eleventy-blades plugin like this:

``` eleventyConfig.addPlugin(eleventyBladesPlugin, { filters: ["section"] });
```

Btw, you might want to use it in pair with https://github.com/anydigital/eleventy-blades/blob/main/src/filters/fetch.js 🥷

Blades

Show threadJuhis
@anydigital @tlohde @markllobrera This is great, much more robust solution than my demo!
Mar 18 at 10:25amWeb
Show threadanydigital3d ago

@hamatti @tlohde @markllobrera it’s same idea/thinking tho!

found it really convenient to organize .md content without rewriting it as a Front Matter yaml

as a super-power you can even fetch remote sections from other .md files using `{{ ‘README.md’ | fetch | section(‘NAME’) }}` https://github.com/anydigital/eleventy-blades/blob/main/src/filters/fetch.js

eleventy-blades/src/filters/fetch.js at main · anydigital/eleventy-blades

Ultimate blade kit for 11ty (Build Awesome) 🥷. Contribute to anydigital/eleventy-blades development by creating an account on GitHub.

GitHub