标签: mjml

我有一个可编译为 HTML 的 MJML 模板，并且想要将变量从 JSON 文件加载到模板中。我对 HTML、JS 和 Handlebars 很陌生，所以这里可能真的偏离了轨道。

我的 MJML 模板test.mjml看起来像：

<mjml>    
<mj-body>
<mj-raw><script type="text/javascript" src="handlebars-v4.7.3.js"></script></mj-raw>  
<mj-raw><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script></mj-raw>
  <mj-section>
    <mj-text><mj-raw>
      <script id="test-template" type="text/x-handlebars-template">
        <div>
        <p>
        Hello my name is {{name}}.
        </p>
        </div>
      </script>      
    </mj-raw></mj-text>
  </mj-column>
</mj-section>

我有一个 JSON 文件data.json：

{
 "name": "John",
 "height": "175cm",
 "occupation": "Teacher",
}

还有一个 JS 文件test.js：

$(document).ready(function() {  
    var template = $('#test-template').html();

    var compiledTemplate = Handlebars.compile(template);
    $.getJSON('data.json', function (data) {
        var context = data;
        }
}); …

I\xe2\x80\x99m 正在开发一个用 MJML 编写的 Mailjet 电子邮件模板，该模板使用通过提供的数组值Vars来生成发件人希望从邮件收件人接收的项目列表。数组中的所有值都是纯文本值。

传递给 API 请求的数据如下所示：

{\n    "FromEmail":"sender@email.com",\n    "FromName":"Chris Crumble",\n    "Subject":"Data Request",\n    "MJ-TemplateID":"200000",\n    "MJ-TemplateLanguage":true,\n    "Recipients":[\n        {\n            "Email":"recipient@email.com",\n            "Name":"Hans Henson"\n        }\n    ],\n    "Vars":{\n        "mailTitle":"Data Request",\n        "userName":"Chris Crumble",\n        "imageUrl":"http://my.host.com/image.jpg",\n        "userBirthDate":"1.3.1982",\n        "recipientName":"Hans Henson",\n        "uploadUrl":"https://my.upload.com/",\n        "authVideoUrl":"https://my.authvideo.com",\n        "records":["Document A","Document B"],\n        "authPhone":"113777840097"\n    }\n}\n

模板的使用方式var:records如下：

        ...\n        </mj-text>\n        <mj-raw> {% if var:records:false %} </mj-raw>\n        <mj-text>\n          <p>\n            I, <strong>{{var:userName}}, born on {{var:userBirthDate}}</strong> am asking you to provide the following documents:\n          </p>\n        </mj-text>\n        <mj-raw> {% for item in var:records …

我正在尝试将一些文本和按钮与两列部分垂直对齐。为了澄清我的目标是让文本/按钮与图像右侧的垂直中间对齐。

我已尝试将vertical-align="middle"标签添加到mj-column但似乎没有任何效果。然而，与底部对齐确实有效。

下面是我的代码示例以及 mjml 编辑器的链接，其中包含演示该问题的示例。

<mjml>
  <mj-body>
    <mj-section>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-column width="50%">
        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
      </mj-column>
      <mj-column width="50%" vertical-align="middle">
        <mj-text align="center">Want a kitten? Of course you do! Who doesn't want a fluffy little buddy to keep you company? Go on click the button, you know you want to.</mj-text>
        <mj-button href="https://www.google.com">Get a Kitten</mj-button>
      </mj-column>
      <mj-divider border-color="#F45E43"></mj-divider>
    </mj-section>
  </mj-body>
</mjml>

链接： https: //mjml.io/try-it-live/SkblMhXV8

编辑：非常感谢@curveball，应用的解决方案如下：

<mjml>
  <mj-body>
    <mj-section>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-column width="50%" vertical-align="middle">
        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
      </mj-column>
      <mj-column width="50%" …

我是 MJML 的新手，使用 css-styles 有点奇怪。对于样式 a，<mj-text css-class="classname"></mj-text>我们必须在 css-styles 中添加一个“div”关键字，例如：

<mj-style>
 .classname div{
font-size: 15px;
 }  
</mj-style>

对于 mjml-text，我们使用“div”和类名来设计样式，对于诸如<mj-image>或等之类的标签。<br>我不知道如何使用 css-classes。另外，为什么我们div在样式化时沿着类名添加它？。请帮忙...