Maizzle
How to accomplish "fragments"? #880
-
|
I have a requirement to build separate "fragment" files that can be inserted into the final, rendered html email by the email-sending platform. These fragments would need to be built by Maizzle (css-inlined, etc) such that after inserting them into the email it would be one coherent file, css and all. Has anyone dealt with this before? I've attempted to get this to work in various ways already, which I'll try to describe here. First, I simply created these fragment files in the Second, I tried to make them a real template that extends a very basic layout. The layout only had a Then, I discovered that adding just At this point I'm contemplating doing some scripting-fu. It works perfectly if I include each fragment as a Maizzle It's very possible i'm overthinking this or am not aware of a Maizzle feature or customization that I could leverage, so I thought I'd ask. Thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
Had to do it once too, here's what I did. Layout: <if condition="page.env === 'production'">
<style>{{{ page.css }}}</style>
<body>
<block name="template"></block>
</body>
</if>
<else>
(normal layout with doctype etc., for developing locally and watching changes in the browser)
</else>A template: <extends src="src/layouts/main.html">
<block name="template">
....
</block>
</extends>Then in // config.production.js
module.exports = {
// ...
events: {
afterTransformers(html) {
return html.replace(/<\/?body.*?>/g, '')
}
},
} |
Beta Was this translation helpful? Give feedback.
-
|
You need the |
Beta Was this translation helpful? Give feedback.
-
|
@cossssmin Thanks so much for that quick response and those ideas. After reading this, I decided to just try using the really simple template |
Beta Was this translation helpful? Give feedback.
-
|
Hmm now that you mention it again, there will be an issue with https://www.caniemail.com/features/html-style/ In Maizzle that could be fixed with a custom PostHTML transformer that would take all |
Beta Was this translation helpful? Give feedback.
-
|
@cossssmin At first I didn't see any issues with including the Since I didn't know how to do a custom PostHTML transformer, I decided to try a combination of including the fragments as components in the main email body, adding custom tags around each fragment's html to differentiate them, and use If anyone else stumbles upon this thread, this is essentially what I did. I made each component output with a custom tag around the fragment's html: The When built it I get files like this: Here's the events: {
async afterTransformers(html, c) {
const r = /<fragment name="(?<name>.*?)">(?<frag>.*?)<\/fragment>/gsm;
for (m of html.matchAll(r)) {
const destination = `${c.build.templates.destination.path}/fragments/${m.groups.name.replace("\n", ' ')}.html`
await fs.outputFile(destination, m.groups.frag)
}
html = html.replaceAll(r, '')
return html;
}
}Elegant or not it worked for me. |
Beta Was this translation helpful? Give feedback.
Had to do it once too, here's what I did.
Layout:
A template:
Then in
config.production.jsremove the stuff you don't need. In my case I just removed the<body>tag but you could do the same for the<style>tag. The problem with removing<style>is you might have media queries or pseudo CSS that would be lost since it's not inlined.// config.producti…