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