为电子邮件的 html erb 中的 link_to 创建按钮答案

【问题标题】：create button for link_to in html erb for email为电子邮件的 html erb 中的 link_to 创建按钮
【发布时间】：2016-12-23 09:22:14
【问题描述】：

我正在从我的 rails 应用程序中的 html.erb 文件生成一封电子邮件，供用户确认他们的电子邮件地址。我正在尝试将 link_to 行设置为绿色按钮下方，就像我在其他电子邮件中使用的那样。但是它显示为纯文本链接。

这是我遇到问题的链接

      <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
      <td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
          <%= link_to 'Confirm Email', confirmation_url(@resource, confirmation_token: @token), class: 'btn-sm-mpgreen' %>
      </td>
      </tr>

在电子邮件中看起来像这样

这是我创建的另一封电子邮件中的绿色按钮，我也想在上面使用。

                    <a href="<%= ENV['EXTERNAL_URL'] %>/#/new_match" class="btn-primary" itemprop="url" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #13904B; margin: 10px 0; border-color: #13904B; border-style: solid; border-width: 10px 20px;">Schedule Match</a>

在电子邮件中看起来像这样

【问题讨论】：

标签： html ruby-on-rails email

【解决方案1】：

这是因为您尚未将样式添加到您正在设计电子邮件的 html.erb。写head类似：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Rails Email</title>
  <style type="text/css">
  .background { background-color:#555555; height:2px; }
  /* Some of your css code */
  </style>
</head>

【讨论】：

我尝试将下面的代码添加到 html.erb 文件的头部，但没有任何区别。 .btn-sm-mpgreen { font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #13904B; margin: 10px 0; border-color: #13904B; border-style: solid; border-width: 10px 20px; }
@calilonghorn 嗯，你有<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 设置吗？
[Aleks] 是的，我有那套。

【解决方案2】：

为您的课程添加样式

.btn-sm-mpgreen {
 font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; 
 font-size: 14px; color: #FFF; text-decoration: none; line-height: 2em;
 font-weight: bold; text-align: center; cursor: pointer; display: inline-block;
 border-radius: 5px; text-transform: capitalize; background-color: #13904B; margin: 10px 0; 
 border-color: #13904B; border-style: solid; border-width: 10px 20px;
}

【讨论】：

我尝试将上述代码添加到 html.erb 文件的头部，但没有任何区别。