基础

Inky

Inky 是一种模板语言,它将简单的 HTML 标记转换成电子邮件所需的复杂表格 HTML。

概述

HTML 电子邮件需要表格上的表格上的表格才能正常工作。尽管电子邮件基础简化了许多构建这些表格的过程,但我们通过 Inky(一种将类似于 <row><columns> 的简单 HTML 标记转换成复杂表格 HTML 的模板语言)简化了该过程。

Inky 让您不必使用大量表格,而可以专注于电子邮件。请查看此示例,单击“切换到 Inky”以查看差异。

HTML
<container>
  <row>
    <columns>Put content in me!</columns>
  </row>
</container>
<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last">
                  <table>
                    <tbody>
                      <tr>
                        <th>Put content in me!</th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

演示

Inky 模板语言是 [ZURB Stack 和 Sass 版本](zurb-stack.html) 的一部分。
有关如何将 Inky 纳入工作流的更多信息

标记

Inky 当前支持这些自定义标记

  • 网格
    • <container>
    • <row>
    • <columns>
  • 按钮: <button>
  • 提示: <callout>
  • 菜单
    • <menu>
    • <item>

常见问题

以下是关于 Inky 的一些常见问题

什么是模板语言?

从本质上讲,它仅仅是自定义 HTML 标记。此语言理解 <row><columns> 等内容。由于电子邮件客户端只适用于基于表格的 HTML,因此这些标记实际上不会进入收件人的收件箱。而是将其转换为响应式电子邮件方法所需的基于表格的 HTML。

它如何工作?

我们运行一项 Gulp 任务,它会遍历您的代码、识别我们的自定义 Inky 标记并将它们转换成有效的 HTML。对于精通技术的人员,您可以查看我们的 Github 代码仓库上的任务

如何开始使用 Inky?

Inky 内置于 ZURB Stack 中,但您也可以单独使用 Inky 或将其集成到您自己的构建流程中。 请参阅 Inky 自述文件以了解详细信息。

Inky 正常工作是否必须运行 Gulp 任务?

是的。为了让 Inky 观察您的文件是否有更改,您需要运行 npm startnpm run build 以查看您的更改是否已反映。

我必须使用 Inky 吗?如果我只想在表格中编写自己的电子邮件代码该怎么办?

您不必在电子邮件中使用 Inky。您只能在表格中写入,或在同一封电子邮件中混合表格和 Inky。

Inky 的所有标记和组件是什么?

您可以在文档的组件部分查看所有的语法和示例。我们建议您从网格开始。

我发现了一个漏洞,我应该怎么做?

Foundation for Emails 完全开源,我们乐于与社区互动。欢迎通过我们的 GitHub 代码库 提交错误报告,甚至修复错误。