使用MJML创建响应式电子邮件

2020年12月30日11:07:02 发表评论 48 次浏览

本文概述

MJML是一种现代的电子邮件工具, 使开发人员可以在所有设备和邮件客户端上创建美观, 响应迅速的出色电子邮件。该标记语言旨在减轻对响应电子邮件进行编码的麻烦。

它的语义语法使其易于使用。它还具有功能丰富的标准组件, 可缩短开发时间。在本教程中, 我们将使用MJML构建美观且响应迅速的电子邮件, 并在多个电子邮件客户端上进行测试。

设置MJML

你可以使用npm安装MJML, 以将其与Node.js或CLI结合使用:

$ npm install -g mjml

建立我们的电子邮件

首先, 创建一个名为email.mjml, 尽管你也可以选择其他任何名称。创建文件后, 我们的响应电子邮件将分为以下几部分:

  • 公司标题
  • 图片标题
  • 电子邮件介绍
  • 栏目部分
  • 图示
  • 社会图标

栏目

这些部分是我们响应式电子邮件的框架。如上所示, 我们的电子邮件将分为六个部分。在我们的email.mjml文件:

<mjml>
  <mj-body>
    <!-- Company Header -->
    <mj-section background-color="#f0f0f0"></mj-section>
    <!-- Image Header -->
    <mj-section background-color="#f0f0f0"></mj-section>
    <!-- Email Introduction -->
    <mj-section background-color="#fafafa"></mj-section>
    <!-- Columns section -->
    <mj-section background-color="white"></mj-section>
    <!-- Icons -->
    <mj-section background-color="#fbfbfb"></mj-section>
    <!-- Social icons -->
    <mj-section background-color="#f0f0f0"></mj-section>
  </mj-body>
</mjml>

从上面可以看到, 我们正在使用两个MJML组件:mj-body和mj截面.mj-body定义我们电子邮件的起点, 并且mj截面定义一个包含其他组件的部分。

对于定义的每个部分, 背景颜色还定义了具有各自十六进制值的属性。这有助于我们的读者轻松识别我们电子邮件的各个部分。

公司标题

我们电子邮件的此部分仅在中心横幅位置包含我们的公司/品牌名称:

<!-- Company 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柱组件用于定义列。的mj文本组件用于文本内容, 并具有样式属性, 例如字体样式, 字体大小, 颜色等

图片标题

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

我们为制作了一个自定义演示.
不完全是。点击这里查看.

使用MJML创建响应式电子邮件1

要添加图片标题, 你必须替换该部分的背景颜色与背景网址。与第一个标题相似, 你将不得不在垂直和水平方向上居中放置文本。填充保持不变。

该按钮的href设置按钮位置。为了使背景在列中显示为全角, 请使用以下命令将列宽设置为600px宽度=" 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>

要使用图片标题, 我们将添加一个背景网址归因于mj截面组件, 然后使用背景尺寸和背景重复属性。

对于我们的口号文本块, 我们使用对齐属性。你还可以根据需要设置文本颜色, 字体大小, 字体系列等。

号召性用语按钮是使用MJ按钮零件。的背景颜色属性允许我们指定按钮的背景色, 然后href指定链接或页面位置。

电子邮件介绍

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

<!-- 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" alt="使用MJML创建响应式电子邮件"/>
  </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图像组件以指定要使用的图像。该图像可以是本地文件, 也可以是远程托管的图像(在我们的情况下是这样)。

右边的第二列包含两个文本块, 一个用于我们的标题, 另一个用于主体文本。

图示

图标部分将分为三列。你还可以添加更多内容, 具体取决于你希望电子邮件的外观。

<!-- Icons -->
<mj-section background-color="#fbfbfb">
    <mj-column>
        <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" alt="使用MJML创建响应式电子邮件" />
    </mj-column>
    <mj-column>
        <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" alt="使用MJML创建响应式电子邮件" />
    </mj-column>
    <mj-column>
        <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" alt="使用MJML创建响应式电子邮件" />
    </mj-column>
</mj-section>

每列都有自己的mj图像用于渲染图标图像的组件。

社会图标

本部分将包含指向我们的社交媒体帐户的图标。

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

MJML随附社交可以轻松用于显示社交媒体图标的组件。在我们的电子邮件中, 我们使用了Twittermj-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" alt="使用MJML创建响应式电子邮件"/>
        </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" alt="使用MJML创建响应式电子邮件" />
        </mj-column>
        <mj-column>
            <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" alt="使用MJML创建响应式电子邮件" />
        </mj-column>
        <mj-column>
            <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" alt="使用MJML创建响应式电子邮件" />
        </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读取并编译我们的j文件
  • -o。告诉MJML保存编译的j输出要保存在同一目录中

MJML完成编译后, 你现在应该会看到一个email.html文件放在同一目录中。使用你喜欢的电子邮件客户端或浏览器打开它, 它的外观应类似于下图:

完成的电子邮件文件示例

总结

如我们所见, MJML帮助我们生成高质量, 精美的HTML电子邮件, 这些电子邮件可以在多个浏览器和客户端之间进行响应。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: