乐趣区

关于前端:使用Vuejs和MJML创建响应式电子邮件

jiezi

MJML 是一种古代的电子邮件工具，使开发人员能够在所有设施和邮件客户端上创立好看、响应迅速的杰出电子邮件。这种标记语言是为了缩小编写响应式电子邮件的苦楚而设计的。

它的语义语法使其易于应用。它还具备功能丰富的规范组件，可缩短开发工夫。在本教程中，咱们将应用 MJML 构建丑陋的响应式邮件，并在多个邮件客户端上进行测试。

开始 MJML

你能够应用 npm 装置 MJML，以将其与 Node.js 或 CLI 联合应用：

$ npm install -g mjml

构建咱们的电子邮件

首先，请创立一个名为 email.mjml 的文件，只管你也能够抉择其余任何名称。创立文件后，咱们的响应式电子邮件将分为以下几局部：

  • 公司 header
  • 图片 header
  • Email 介绍
  • 栏目局部
  • 图标
  • 社交图标

栏目

这些局部是咱们响应式电子邮件的框架。如上所示，咱们的电子邮件将分为六个局部，在咱们的 email.mjml 文件中：

<mjml>
  <mj-body>
    <!-- 公司 Header -->
    <mj-section background-color="#f0f0f0"></mj-section>
    <!-- 图片 Header -->
    <mj-section background-color="#f0f0f0"></mj-section>
    <!-- Email 介绍 -->
    <mj-section background-color="#fafafa"></mj-section>
    <!-- 栏目局部 -->
    <mj-section background-color="white"></mj-section>
    <!-- 图标 -->
    <mj-section background-color="#fbfbfb"></mj-section>
    <!-- 社交图标 -->
    <mj-section background-color="#f0f0f0"></mj-section>
  </mj-body>
</mjml>

从下面能够看到，咱们正在应用两个 MJML 组件：mj-body 和 mj-section。mj-body 定义了咱们电子邮件的终点，而 mj-section 定义了一个蕴含其余组件的节。

对于定义的每个局部，还定义了具备各自十六进制值的 background-color 属性。

公司 Header

咱们电子邮件的此局部仅在核心横幅地位蕴含咱们的公司 / 品牌名称：

<!-- 公司 Header -->
<mj-section background-color="#f0f0f0">
  <mj-column>
    <mj-text  font-style="bold"
        font-size="20px"
        align="center"
        color="#626262">
    Central Park Cruise
    </mj-text>
  </mj-column>
</mj-section>

mj-column 组件是用来定义一个列。mj-text 组件用于咱们的文本内容，并采取字体款式、字体大小、色彩等款式属性。

图片 Header

在本局部中，咱们将有一个背景图片和一段文字，它们应代表咱们的公司口号。咱们还会有一个号召性用语按钮，指向一个蕴含更多详细信息的页面。

要增加图片题目，你必须将该局部的背景色彩替换为 background-url。与第一个题目类似，你将不得不在垂直和程度方向上居中搁置文本，padding 放弃不变。

按钮的 href 设置按钮的地位。为了让背景在列中出现全宽，将列宽设置为 600px，width=“600px"。

咱们的电子邮件的这一部分将只蕴含咱们的公司 / 品牌名称的核心横幅地位。

<!-- Image Header -->
<mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
            background-size="cover"
            background-repeat="no-repeat">
  <mj-column width="600px">
    <mj-text  align="center"
             color="#fff"
             font-size="40px"
             font-family="Helvetica Neue">Christmas Discount</mj-text>
    <mj-button background-color="#F63A4D" href="#">
      See Promotions
    </mj-button>
  </mj-column>
</mj-section>

要应用图像 header，咱们将向 jms -section 组件增加 background-url 属性，而后应用 background-size 和 background-repeat 属性设置图像的款式。

对于咱们的口号文本块，咱们应用 align 属性将文本在程度和垂直方向上居中对齐。你还能够依据须要设置文本色彩，字体大小，字体系列等。

号召性用语按钮是应用 mj-button 组件实现的。background-color 属性容许咱们指定按钮的背景色，而后应用 href 指定链接或页面的地位。

Email 件介绍

简介文字将由题目，主体文字和号召性用语组成。

<!-- Intro text -->
<mj-section background-color="#fafafa">
  <mj-column width="400px">
    <mj-text font-style="bold"
             font-size="20px"
             font-family="Helvetica Neue"
             color="#626262">Ultimate Christmas Experience</mj-text>
    <mj-text color="#525252">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
    </mj-text>
    <mj-button background-color="#F45E43" href="#">Learn more</mj-button>
  </mj-column>
</mj-section>

栏目局部

在这封邮件的局部，咱们会有两栏：一栏是描述性的图片，二栏是咱们的文字块，用来补充第一局部的图片。

<!-- Side image -->
<mj-section background-color="white">
  <!-- Left image -->
  <mj-column>
    <mj-image width="200px"
              src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
  </mj-column>
  <!-- right paragraph -->
  <mj-column>
    <mj-text font-style="bold"
             font-size="20px"
             font-family="Helvetica Neue"
             color="#626262">
      Amazing Experiences
    </mj-text>
    <mj-text color="#525252">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin rutrum enim eget magna efficitur, eu semper augue semper. 
      Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
      lectus.
    </mj-text>
  </mj-column>
</mj-section>

左侧的第一列应用 mj-image 组件指定要应用的图像。该图像能够是本地文件，也能够是近程托管的图像（在咱们的状况下是这样）。

右侧的第二列蕴含两个文本块，一个用于咱们的题目，另一个用于主体文本。

图标

图标局部将分为三列。你还能够增加更多内容，具体取决于你心愿电子邮件的外观。

<!-- Icons -->
<mj-section background-color="#fbfbfb">
  <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
  </mj-column>
  <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
  </mj-column>
  <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
  </mj-column>
</mj-section>

每列都有其本人的 mj-image 组件，用于渲染图标图像。

社交图标

本局部将蕴含指向咱们的社交媒体帐户的图标。

<mj-section background-color="#e7e7e7">
  <mj-column>
    <mj-social>
      <mj-social-element name="instagram" />
    </mj-social>
  </mj-column>
</mj-section>

MJML 带有 mj-social 组件，可轻松用于显示社交媒体图标。在咱们的电子邮件中，咱们应用了 Twitter mj-social-element。

全副放在一起

至此，咱们曾经实现了所有局部，残缺的 email.mjml 应该如下所示：

<mjml>
  <mj-body>
    <!-- Company Header -->
    <mj-section background-color="#f0f0f0">
      <mj-column>
        <mj-text  font-style="bold"
                 font-size="20px"
                 align="center"
                 color="#626262">
          Central Park Cruises
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Image Header -->
    <mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
                background-size="cover"
                background-repeat="no-repeat">
      <mj-column width="600px">
        <mj-text  align="center"
                 color="#fff"
                 font-size="40px"
                 font-family="Helvetica Neue">Christmas Discount</mj-text>
        <mj-button background-color="#F63A4D" href="#">
          See Promotions
        </mj-button>
      </mj-column>
    </mj-section>
    <!-- Email Introduction -->
    <mj-section background-color="#fafafa">
      <mj-column width="400px">
        <mj-text font-style="bold"
                 font-size="20px"
                 font-family="Helvetica Neue"
                 color="#626262">Ultimate Christmas Experience</mj-text>
        <mj-text color="#525252">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
        </mj-text>
        <mj-button background-color="#F45E43" href="#">Learn more</mj-button>
      </mj-column>
    </mj-section>
    <!-- Columns section -->
    <mj-section background-color="white">
      <!-- Left image -->
      <mj-column>
        <mj-image width="200px"
                  src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
      </mj-column>
      <!-- right paragraph -->
      <mj-column>
        <mj-text font-style="bold"
                 font-size="20px"
                 font-family="Helvetica Neue"
                 color="#626262">
          Amazing Experiences
        </mj-text>
        <mj-text color="#525252">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Proin rutrum enim eget magna efficitur, eu semper augue semper. 
          Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
          lectus.
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Icons -->
    <mj-section background-color="#fbfbfb">
      <mj-column>
        <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
      </mj-column>
      <mj-column>
        <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
      </mj-column>
      <mj-column>
        <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
      </mj-column>
    </mj-section>
    <!-- Social icons -->
    <mj-section background-color="#e7e7e7">
      <mj-column>
        <mj-social>
          <mj-social-element name="instagram" />
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

运行咱们的应用程序

当初咱们曾经实现了电子邮件的构建，咱们能够持续对其进行编译以查看其外观。为此，咱们在终端中键入以下内容：

mjml -r email.mjml -o .
  • -r：容许 MJML 读取和编译咱们的 mjml 文件
  • -o .：通知 MJML 将编译后的 mjml 输入保留到同一目录中

MJML 实现编译后，你当初应该在同一目录中看到一个 email.html 文件。应用你喜爱的电子邮件客户端或浏览器关上它，它的外观应相似于下图：

总结

正如咱们方才看到的，MJML 帮忙咱们生成跨多个浏览器和客户机响应的高质量、丑陋的 HTML 电子邮件。

退出移动版