有没有办法向我的自定义 Keycloak 电子邮件主题添加样式?

Dav*_*ume 4 html css freemarker keycloak

标题说明了一切。

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

我尝试在 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>
Run Code Online (Sandbox Code Playgroud)

sol*_*eMe 5

撰写 html 电子邮件并不像撰写 html 网页那样简单,因为几乎所有电子邮件服务都以不同的方式处理传入的电子邮件。有些可能会忽略 <style ..> 引用,有些可能会忽略几个 css 属性。要制作跨平台电子邮件(在 Gmail、Outlook、Thunderbird 等中呈现相同的效果),您必须回滚到 2000 年的技术,例如基于表格的页面布局、内联 css 样式,<p style="..">因此您最好看看到像Zurb这样的电子邮件框架。

\n

使用zurb,您可以在浏览器中创建和调试电子邮件模板,就像 npm 世界中的任何其他 UI 应用程序一样。然后,您可以将 Zurb 输出切片到 keycloak freemarker 模板。最后你会得到主要的 freemarker 模板(带有公共标题、底部链接等),以及一堆用于段落、链接的 freemarker 宏...这个 \xd1\x81omponents 将封装所有丑陋的内容,如内联 css、表格等,这样你的业务模板就会很简单而且看起来很漂亮。这是我收到的执行所需操作电子邮件

\n
<#import "template.ftl" as layout>\n<@layout.emailLayout title=msg(\'executeActionsSubject\')?no_esc; section>\n\n    <#if section = "header">\n        <@layout.header text=msg("executeActionsSubject")?no_esc icon="status-icon-green%403x.png"/>\n\n    <#elseif section = "content">\n\n        <#outputformat "plainText">\n            <#assign requiredActionsText>\n                <#if requiredActions??>\n                    <ul>\n                    <#list requiredActions>\n                        <#items as reqActionItem><li>${msg("requiredAction.${reqActionItem}")}</li></#items>\n                    </#list>\n                    </ul>\n                </#if>\n            </#assign>\n        </#outputformat>\n\n        <@layout.paragraph>\n            ${msg("executeActionsBodyIntro", realmName)?no_esc}\n        </@layout.paragraph>\n\n        <b>\n            ${msg("executeActionsList", requiredActionsText)?no_esc}\n        </b>\n\n        <@layout.paragraph>\n            ${msg("executeActionsClickLinkNote")?no_esc}\n        </@layout.paragraph>\n\n        <@layout.mainAction text=msg("executeActionsButtonText")?no_esc href=link/>\n\n        <@layout.secondaryText>\n            ${kcSanitize(msg("expirationNote", linkExpirationFormatter(linkExpiration)))?no_esc}\n        </@layout.secondaryText>\n\n        <@layout.secondaryText>\n            ${msg("mistakeDeleteText")?no_esc}\n        </@layout.secondaryText>\n\n    </#if>\n\n</@layout.emailLayout>\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n