使用 thymeleaf 的电子邮件基础

Question

我有一个墨色粉底模板。这是必要的片段：

<button class="large expand" href="#">Activate account</button>

我需要用 'th:href' 属性替换 'href' 属性，但是当我这样做时，这个基础构建了一个没有 th:href 标签的 html 页面。

我正在寻找一种使用 thymleaf 更改 href-link 的方法。

注意：我使用的是基础电子邮件堆栈。

Answer 1

您可以教 Inky 如何处理自定义属性，在本例中称为 th:href.

在您的节点模块文件夹中打开 inky/lib/componentFactory.js 。寻找按钮组件，你会发现类似这样的东西：

    // <button>
case this.components.button:
  var expander = '';

  // Prepare optional target attribute for the <a> element
  var target = '';
  if (element.attr('target')) {
    target = ' target=' + element.attr('target');
  }

  // If we have the href attribute we can create an anchor for the inner of the button;
  if (element.attr('href')) {
    inner = format('<a href="%s"%s>%s</a>', element.attr('href'), target, inner);
  }


  // If the button is expanded, it needs a <center> tag around the content
  if (element.hasClass('expand') || element.hasClass('expanded')) {
    inner = format('<center>%s</center>', inner);
    expander = '\n<td class="expander"></td>';
  }

  // The .button class is always there, along with any others on the <button> element
  var classes = ['button'];
  if (element.attr('class')) {
    classes = classes.concat(element.attr('class').split(' '));
  }

  return format('<table class="%s"><tr><td><table><tr><td>%s</td></tr></table></td>%s</tr></table>', classes.join(' '), inner, expander);

添加以下代码块：

      // If we have the th:href attribute we can create an anchor for the inner of the button;
  if (element.attr('th:href')) {
    inner = format('<a th:href="%s"%s>%s</a>', element.attr('th:href'), target, inner);
  }

希望有用！

使用 thymeleaf 的电子邮件基础

Use foundation for email with thymleaf

href

zurb-foundation

thymeleaf