有没有办法为我的自定义 Keycloak 电子邮件主题添加样式？答案

【问题标题】：Is there a way to add styles to my custom Keycloak Email theme?有没有办法为我的自定义 Keycloak 电子邮件主题添加样式？
【发布时间】：2020-02-12 12:01:36
【问题描述】：

标题说明了一切。

我尝试了多种方法，但似乎没有任何效果。

我尝试在我的 theme.properties 中导入样式表。 styles=css/styles.css

我尝试直接在我的 html 标签中做我的风格。 <h1 style="color:blue;">

我尝试在我的 ftl 文件中使用我的风格，如下所示：

<html>
<style type="text/css">
body {
    margin: 0;
    font-family: 'Source Sans Pro';
    font-weight: 400;
    font-size: 16px;
}
.header{
    background-color: #B70E0C;
    width: 100%;
    height: 96px;
}

.footer{
    flex-shrink: 0;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-size: 16px;
    background-color: #2D2D2D;
    z-index: 1;
    position: absolute;
    bottom: 0;
}

.footer a {
    color: white !important;
}

a:visited {
    color: initial;
}

.activate-btn{
    border-radius: 8px;
    padding: 12px 28px;
    background-color: #FDC300;
    color: black;
    border-style: hidden;
}
</style>
<body>
${kcSanitize(msg("emailVerificationBodyHtml", link, linkExpiration, realmName, 
linkExpirationFormatter(linkExpiration)))?no_esc}
</body>
</html>

【问题讨论】：

标签： html css freemarker keycloak

【解决方案1】：

编写 html 电子邮件不像编写 html 网页那样简单，因为几乎所有电子邮件服务都以不同的方式处理传入的电子邮件。有些人可能会忽略

使用zurb，您可以在浏览器中创建和调试电子邮件模板，就像来自 npm 世界的任何其他 UI 应用程序一样。然后，您可以将 Zurb 输出切片为 keycloak freemarker 模板。最后，您将获得主要的 freemarker 模板（带有通用标题、底部链接等），以及用于段落、链接的一堆 freemarker 宏...这些组件将封装所有丑陋的东西，如内联 css、表格等，因此您的业务模板将很简单，看起来很漂亮。这就是我得到的执行所需操作电子邮件

<#import "template.ftl" as layout>
<@layout.emailLayout title=msg('executeActionsSubject')?no_esc; section>

    <#if section = "header">
        <@layout.header text=msg("executeActionsSubject")?no_esc icon="status-icon-green%403x.png"/>

    <#elseif section = "content">

        <#outputformat "plainText">
            <#assign requiredActionsText>
                <#if requiredActions??>
                    <ul>
                    <#list requiredActions>
                        <#items as reqActionItem><li>${msg("requiredAction.${reqActionItem}")}</li></#items>
                    </#list>
                    </ul>
                </#if>
            </#assign>
        </#outputformat>

        <@layout.paragraph>
            ${msg("executeActionsBodyIntro", realmName)?no_esc}
        </@layout.paragraph>

        <b>
            ${msg("executeActionsList", requiredActionsText)?no_esc}
        </b>

        <@layout.paragraph>
            ${msg("executeActionsClickLinkNote")?no_esc}
        </@layout.paragraph>

        <@layout.mainAction text=msg("executeActionsButtonText")?no_esc href=link/>

        <@layout.secondaryText>
            ${kcSanitize(msg("expirationNote", linkExpirationFormatter(linkExpiration)))?no_esc}
        </@layout.secondaryText>

        <@layout.secondaryText>
            ${msg("mistakeDeleteText")?no_esc}
        </@layout.secondaryText>

    </#if>

</@layout.emailLayout>

UPD。还有其他用于撰写电子邮件的框架。例如 MJML。无论如何，任何这些框架的开发流程都是完全相同的，所以请随意使用其中任何一个。

【讨论】：

这看起来确实像要走的路，我只是不太确定“可以将 Zurb 输出切片到 keycloak freemarker 模板”部分。有没有办法自动做到这一点？
不幸的是没有，但它并不像看起来那么难。刚开始创建布局并用Zurb测试它作为网页（注意Zurb也允许有通用的骨架模板，所以其他电子邮件布局可以继承它并只修改“业务内容”）。至于我，我只需要一个完整的工作日来为我公司的所有 keycloak 电子邮件创建 Zurb 布局。还有一天将它们移植到 freemarker 和调试。如果考虑到我不是前端人员，这还不错。
@solveMe 您是否使用给定的解决方案实现了正确的电子邮件模板，我还需要创建重置密码电子邮件模板？
能否请您出示一下您的 template.ftl 文件，它是由 Zurb 创建的骨架吗？
@YachithaSandaruwan 我通过 zurb 创建了几个布局（zurb 还允许您为标题、徽标、底部链接创建基本模板）。然后我用浏览器对其进行了测试（查看 zurb 文档以运行测试/预览模式）。当我对结果感到满意时，我运行 Zurb build 并获得电子邮件的最终输出。下一步是从这个杂乱的输出中提取一些部分，并从中组成一个 template.ftl 和其他宏（例如段落）。关键提示：要在最终输出中检测结构元素的边界，您应该在使用 Zurb 标记时彻底注释它们。

【解决方案2】：

您可以使用此代码

body {
  margin: 0;
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-size: 16px;
}

.header {
  background-color: #B70E0C;
  width: 100%;
  height: 96px;
}

.footer {
  flex-shrink: 0;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
  background-color: #2D2D2D;
  z-index: 1;
  position: absolute;
  bottom: 0;
}

.footer a {
  color: white !important;
}

a:visited {
  color: initial;
}

.activate-btn {
  border-radius: 8px;
  padding: 12px 28px;
  background-color: #FDC300;
  color: black;
  border-style: hidden;
}

<h1 style="color:blue;">lorem ipsum dolor</h1>
${kcSanitize(msg("emailVerificationBodyHtml", link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc}
<p style="color:red;">lorem ipsum dolor sit amet</p>

【讨论】：

这仅适用于 kcSanitize 之外的内容。