使用 Inky (Foundation for Emails) 和使用自定义属性答案

【问题标题】：Using Inky (Foundation for Emails) and using custom attributes使用 Inky (Foundation for Emails) 和使用自定义属性
【发布时间】：2016-07-21 00:18:05
【问题描述】：

我需要在我编译的 Foundation for Emails 代码中添加一些自定义属性：

<div class="row" customAttribute="value" customAttributeName="value" customAttributeId="value">

当我使用 Inky 时，我可以编写如下代码：

<row class="xyz" customAttribute="value">

但它被从最终编译中删除。有没有我可以添加到代码中的提示，以便将其添加回 dist 代码？

【问题讨论】：

标签： email zurb-foundation inky

【解决方案1】：

在 Foundation for Email (2.2) 的最新版本中，这应该是可能的。

感谢Brandon Barringer - commit，现在可以将 HTML 属性传递给行和列

引用自这里：http://zurb.com/article/1439/foundation-for-emails-2-2-what-a-ruby-gem

Brandon in this discussion 解释了拉取请求的背景，并提供了一个添加 bgcolor 属性的好例子。

在 node_modules/inky/lib/componentFactory.js 的底部，你会看到：

// <wrapper>
case this.components.wrapper:
 var classes = ['wrapper'];
      if (element.attr('class')) {
   classes = classes.concat(element.attr('class').split(' '));
 }
 return format('<table class="%s" align="center" ><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), inner);

当它看到时构建表结构

添加一些代码以查找属性 bgcolor="#XXXXXX"。如果找到它，它会将值添加到它输出的 HTML 中。如果没有找到值，它会从 var 恢复为默认值，即 bgcolor=""。如果您有默认颜色，您也可以在其中输入一个值。

// <wrapper>
case this.components.wrapper:
 var classes = ['wrapper'];
 var bgcolor = ""; // corey add this line
 if (element.attr('class')) {
   classes = classes.concat(element.attr('class').split(' '));
 }
 // corey added the following statement
 if (element.attr('bgcolor')) {
   bgcolor = (element.attr('bgcolor'));
 } // stop new statement

 return format('<table class="%s" align="center" bgcolor="'+bgcolor+'"><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), inner);

墨迹降价可以这样写：

<wrapper bgcolor="#b9cd98">

【讨论】：