NodeJS MJML -模板插值、动态数据、上下文

ut6juiuv  于 2023-01-16  发布在  Node.js
关注(0)|答案(2)|浏览(218)

经过大量的搜索,我很难找到如何:

  1. MJML处理动态数据和模板插值
    我以为会是这样的:
import { mjml2html } from 'mjml';

const context = {
  message: 'Hello World'
};

const view = mjml2html(template, context);
<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>{message}</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>
bzzcjhmw

bzzcjhmw1#

MJML不处理任何模板。如果你需要模板,使用模板引擎,比如handlebar来渲染到MJML。

import { compile } from 'handlebars';
import { mjml2html } from 'mjml';

const template = compile(`
<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>{{message}}</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>
`);
const context = {
    message: 'Hello World'
};
const mjml = template(context);
const html = mjml2html(mjml);
esyap4oy

esyap4oy2#

我经历了同样的过程,尝试找到向MJML文件添加动态内容的最佳方法,同时仍然能够使用现有工具预览模板,最初我只是使用手柄,但在添加更复杂的内容结构后,它开始变得混乱。
事实证明,MJML只是简单的XML,可以很好地Map到JSON。MJML已经支持从JSON进行渲染,但只支持渲染整个文档(而不是文档的一部分)。
我提出了一种技术,允许通过编程方式处理XML(JSON)结构来以编程方式呈现.mjml文件的各个部分(因此不需要手动转义或担心XSS/注入),我创建了一个模块mjml-dynamic来解决这个问题。

npm i --save mjml-dynamic mjml

示例:
x一个一个一个一个x一个一个二个x
这将输出与以下MJML文档等效的内容:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-button color="red">
          new text content
        </mj-button>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

您甚至可以将它与mjml-react结合使用,以便使用React渲染模板的各个部分。
查看更多示例

相关问题