-
|
I'm having trouble trying to get the renderTemplate plugin to render my liquid template when the template content is in a string variable. It renders the markdown fine inside the string and renders the liquid when it's directly "hard coded" between the file: testrender.md The output (in the browser) looks like: The HTML output is: I know I'm probably missing something simple. Any help greatly appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
As far as I know, Liquid/Eleventy won't recursively process the strings, so You can probably get around that using a custom filter which will parse the template though: // eleventy.config.js
const { EleventyRenderPlugin } = require("@11ty/eleventy");
const { Liquid } = require("liquidjs");
/**
* @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
* @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
*/
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(EleventyRenderPlugin);
eleventyConfig.addFilter("liquidify", function (input, ctx = {}) {
const engine = new Liquid();
const tpl = engine.parse(input);
return engine.render(tpl, ctx);
});
return {
dir: {
input: "src",
output: "www",
}
};
};---
# src/testrender.md
# layout: blank
permalink: "/testrender/"
myData:
key: '{% assign t123 = "testing 123" %}***This is the assigned var t123: {{ t123 }}***'
---
{% renderTemplate "liquid,md", myData %}
{{ key | liquidify }}
{% assign t345 = "testing 345" %}***This is the assigned var t345: {{ t345 }}***
{% endrenderTemplate %}OUTPUT<p><em><strong>This is the assigned var t123: testing 123</strong></em></p>
<p><em><strong>This is the assigned var t345: testing 345</strong></em></p> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your reply. That certainly does the trick and solves the example problem. I'm going to have to dig a little further into this. Eventually I would like to be able to use already defined 11ty filters and shortcodes in my template strings. |
Beta Was this translation helpful? Give feedback.
-
|
If it's possible to use external files for the templates, I'd definitely towards using ---
# layout: blank
permalink: "/testrender/"
myData:
key: '{% assign t123 = "TeStiNg 123 PeTeR" | slug %}***This is the assigned var t123: {{ t123 }}***'
---
{{ myData.key | templatify }}
{% renderTemplate "liquid,md", myData %}
{{ key | templatify }}
{% assign t345 = "testing 345" %}***This is the assigned var t345: {{ t345 }}***
{% endrenderTemplate %}Where my horrifically named eleventyConfig.addFilter("templatify", function (input, lang="liquid", ctx = {}) {
const render = eleventyConfig.getFilter("renderTemplate");
return render(input, lang, ctx);
}); |
Beta Was this translation helpful? Give feedback.
-
eleventyConfig.addAsyncShortcode("renderString", function (input, lang="liquid", ctx) {
const render = eleventyConfig.getFilter("renderTemplate");
return render(input, lang, ctx);
});---
# layout: blank
permalink: "/testrender/"
myData:
key: '{% assign t123 = "TeStiNg 123 PeTeR" | slug %}***This is the assigned var t123: {{ t123 }}***'
---
{% renderString myData.key %}
{% renderTemplate "liquid,md", myData %}
{% renderString key %}
{% assign t345 = "testing 345" %}***This is the assigned var t345: {{ t345 }}***
{% endrenderTemplate %}OUTPUT<p><em><strong>This is the assigned var t123: testing-123-peter</strong></em></p>
<p><em><strong>This is the assigned var t123: testing-123-peter</strong></em>
<em><strong>This is the assigned var t345: testing 345</strong></em></p> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this! The async shortcode does the trick. I'm actually pulling the markdown with template code in from an external source (github issues) using eleventy-fetch. I wanted to be able to use any and all available filters and shortcodes including ones using plugins like eleventy-img. Updated testrender.md OUTPUT: <p><em><strong>testing 123</strong></em></p>
<style type="text/css">
img {
max-width: 100px;
height: auto;
}
</style>
<p><picture><source type="image/webp" srcset="/img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-200w.webp 200w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-300w.webp 300w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-600w.webp 600w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-800w.webp 800w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-1200w.webp 1200w" sizes="100px"><source type="image/jpeg" srcset="/img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-200w.jpeg 200w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-300w.jpeg 300w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-600w.jpeg 600w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-800w.jpeg 800w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-1200w.jpeg 1200w" sizes="100px"><img alt="11ty logo" loading="lazy" decoding="async" src="/img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-200w.jpeg" width="1200" height="1200"></picture></p>
|
Beta Was this translation helpful? Give feedback.
As far as I know, Liquid/Eleventy won't recursively process the strings, so
keywon't be re-parsed to turn the front matter string into a parsed thing.You can probably get around that using a custom filter which will parse the template though: