Inky 和 Slinky

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

Inky 类似于由 Zurb 创建的 HTML 预处理器,专门用于响应式电子邮件。

我相信我们很多人都有过手动编写 HTML 电子邮件的经历(我经常这样做),并且知道它通常是 <table> 的一团糟。甚至不仅仅是表格令人烦恼,而是为了完成一些非常简单的事情,需要嵌套如此多的表格,以至于很难理清。

从 Inky 文档中的第一个演示就可以清楚地看出它的吸引力

但是,如何使用它呢?像任何预处理器一样,最终您需要将其语法转换为浏览器可读的代码。Inky 运行在 Node.js 上,因此您也可以像使用任何其他基于 Node.js 的预处理器一样 使用它。您可以安装它并从命令行、Node.js 代码中或作为 Gulp 插件直接调用它。

这就是 Slinky 的用武之地。

Slinky 使得使用 Inky 更容易。事实上,如果您定期设计一次性电子邮件,它可能是您的主要工作流程。

编辑此 Pen

查看 Inky 在 CodePen 上创建的 Pen PGPNwk (@FoundationForEmails)。

您应该复制一份,以便可以保存它并获取您自己的 URL 标识符。Slinky 将需要它。

Zurb 设置了此 Pen,以便它处理 Inky 代码并注入处理后的代码,因此您可以查看实时结果。您甚至可以在 Pen 中使用 SCSS 进行其他样式设置!

完成后,点击预览右下角的大粉色“获取您的 HTML 电子邮件”按钮。

您将跳回到 Slinky 页面,它会为您提供所有原始 HTML,包括内联 CSS

该原始 HTML 正是您发送电子邮件所需的。它已准备就绪。

假设您使用 MailChimp 发送 HTML 电子邮件。他们有一个“自定义代码”选项,您只需粘贴您现在拥有的内容即可

或者假设您使用像 MailGun 这样的服务,它通过 API 发送您的电子邮件

您会像那样做,只是传递 html 参数而不是 text

我想说,如果您手动编写和维护大量的 HTML 电子邮件,这可能是一种非常有用的工作方式。