MJML是一种现代电子邮件工具，它使开发人员能够创建美观的电子邮件，这些电子邮件看起来很棒并且在所有设备和邮件客户端上都能响应。这种标记语言旨在减轻编写响应式电子邮件的痛苦。它的语义语法使其易于使用。它还具有功能丰富的标准组件，可缩短开发时间。在本教程中，我们将使用MJML构建美观的响应式电子邮件并在多个电子邮件客户端上对其进行测试。MJML入门您可以使用npm安装MJML，以便将其与Node.js或CLI一起使用：$npminstall-gmjml构建我们的电子邮件首先，请创建一个名为email.mjml的文件，尽管您也可以选择任何其他名称。创建文件后，我们的响应式电子邮件将分为以下部分：公司标题图片标题电子邮件介绍部分图标社交图标部分这些部分是我们响应式电子邮件的框架。如上所示，我们的电子邮件将分为六个部分，在我们的email.mjml文件中：mj-body>如您所见，我们使用了两个MJML组件：mj-body和mj-section。mj-body定义了我们电子邮件的起点，而mj-section定义了一个包含其他组件的部分。对于定义的每个部分，还使用相应的十六进制值定义了背景颜色属性。公司标题我们电子邮件的这一部分仅在中心横幅位置包含我们的公司/品牌名称：中央公园游轮mj-column组件用于定义列。mj-text组件用于我们的文本内容，并采用字体样式、字体大小、颜色等样式属性。ImageHeader在本节中，我们将有一个背景图像和一段应该代表我们公司口号的文本。我们还将有一个号召性用语按钮，该按钮指向包含更多详细信息的页面。要添加图像标题，您必须用背景url替换该部分的背景颜色。与第一个标题类似，您必须将文本垂直和水平居中，同时填充保持不变。按钮的href设置按钮的位置。要使背景占据列的整个宽度，请将列宽设置为600px，width="600px"。我们电子邮件的这一部分将仅在中心横幅位置包含我们的公司/品牌名称。圣诞折扣查看促销信息要使用图片头，我们将添加jms-section组件添加background-url属性，然后使用background-size和background-repeat属性设置图像样式。对于我们的口号文本块，我们使用align属性将文本水平和垂直居中。您还可以根据需要设置文本颜色、字体大小、字体系列等。号召性用语按钮是使用mj-button组件实现的。background-color属性允许我们指定按钮的背景颜色，然后使用href指定链接或页面的位置。电子邮件的介绍性文本将包括标题、正文和号召性用语。终极圣诞体验Proinrutrumone效率很高，我总是预料到。Aliquam时代volutpat。由于lectus导致崩溃ID。前庭有finibuslectus，坐有疑nibh。Proinnec舒适纯净。看到自己的虚无精英。buttonbackground-color="#F45E43"href="#">了解更多在这封电子邮件的部分，我们将有两栏：一栏是描述性图像，第二列是我们的文本块，用于补充第一部分中的图像。惊人的体验Loremipsumdolor坐下来，conecteturadipiscingelit。Proinrutrumenimegetmagnaefficitur，eusemperauguesemper。Aliquameratvolutpat。Crasidduilectus。>左边第一列使用mj-image组件指定要使用的图片。该图像可以是本地文件，也可以是远程托管的图像（在我们的例子中）。右数第二列包含两个文本块，一个用于我们的标题，一个用于正文。图标图标部分将分为三列。您还可以添加更多内容，具体取决于您希望电子邮件的外观。每一列都有自己的mj-image组件，用于渲染图标图像。社交图标本节将包含我们社交媒体帐户的图标。MJML自带mj-social组件，可以很方便的用来显示社交媒体图标。在我们的电子邮件中，我们使用Twittermj-social-element。放在一起此时，我们已经实现了所有部分，完整的email.mjml应该如下所示：中央公园游轮圣诞折扣查看促销信息终极圣诞体验学习more精彩体验顾客开心了，顾客就会跟着来。妆容要精致，足球总是标榜。那是一个周末。明天我读了它。但是床已经完成了。运行我们的应用程序现在我们已经完成了电子邮件构建，我们可以继续编译它看看它是什么样子为此，我们在终端中键入以下内容：mjml-remail.mjml-o。-r：允许MJML读取和编译我们的mjml文件-o.：告诉MJML将编译后的mjml输出保存到同一目录MJML完成编译后，您现在应该在同一目录中看到一个email.html文件。用您最喜欢的电子邮件客户端或浏览器打开它，它应该类似于下图：总结正如我们刚刚看到的，MJML帮助我们在多个浏览器和客户端上生成高质量、漂亮的响应。HTML电子邮件。
