Absorb LMS中HTML邮件模板嵌入课程URL按钮失效问题求助

问题背景 #

在Absorb LMS中制作学员课程提醒邮件模板时，尝试将课程URL通过按钮形式嵌入，但直接使用href="{{{CourseUrl}}}"生成的按钮无法正常跳转。平台会自动修改href={{{CourseUrl}}}为带引号的格式，且仅支持基础HTML与CSS。已知{{{CourseUrl}}}会输出带<a>标签的完整链接，也可通过{{CourseId}}获取课程ID。

可行解决方案 #

方案1：手动拼接课程URL（推荐） #

利用固定的平台域名前缀+{{CourseId}}构造完整课程链接，避开平台对{{{CourseUrl}}}的解析限制：

<div style="text-align: center; padding: 20px;">
  <a style="font-size: 16px; font-family: Roboto, Helvetica, sans-serif; color: #FFFFFF; text-align: center; text-decoration: none; display: inline-block; background-color: #25477B; border: 1px solid #5D5D5D; padding: 10px 20px; border-radius: 3px;" 
     href="https://company.myabsorb.us/#/online-courses/{{CourseId}}" 
     target="_blank">
    Click here to complete your course!
  </a>
</div>

注意：需将https://company.myabsorb.us/替换为你的Absorb LMS实例实际域名前缀。

方案2：为自动生成的链接添加按钮样式 #

由于{{{CourseUrl}}}会直接输出带<a>标签的完整链接，可通过内联样式将其渲染为按钮：

<div style="text-align: center; padding: 20px;">
  <span style="font-size: 16px; font-family: Roboto, Helvetica, sans-serif; color: #FFFFFF; text-align: center; text-decoration: none; display: inline-block; background-color: #25477B; border: 1px solid #5D5D5D; padding: 10px 20px; border-radius: 3px;">
    {{{CourseUrl}}}
  </span>
</div>

如果平台允许修改生成的<a>标签样式，也可以在模板中定义全局样式（部分平台支持）：

a {
  font-size: 16px;
  font-family: Roboto, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
}

方案3：表格模拟按钮（邮件客户端兼容） #

考虑到不同邮件客户端对CSS的支持差异，用表格布局模拟按钮，同时结合URL拼接：

<div style="text-align: center; padding: 20px;">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td style="background-color: #25477B; border: 1px solid #5D5D5D; border-radius: 3px;">
        <a href="https://company.myabsorb.us/#/online-courses/{{CourseId}}" 
           style="font-size: 16px; font-family: Roboto, Helvetica, sans-serif; color: #FFFFFF; text-align: center; text-decoration: none; display: inline-block; padding: 10px 20px;"
           target="_blank">
          Click here to complete your course!
        </a>
      </td>
    </tr>
  </table>
</div>

这种方式能最大程度保证按钮样式在各类邮件客户端中正常显示，且跳转链接有效。

内容的提问来源于stack exchange，提问作者EYS