Html 有没有办法将样式添加到我的自定义KeyClope电子邮件主题中？_Html_Css_Freemarker_Keycloak

Html 有没有办法将样式添加到我的自定义KeyClope电子邮件主题中？

html css keycloak

Html 有没有办法将样式添加到我的自定义KeyClope电子邮件主题中？,html,css,freemarker,keycloak,Html,Css,Freemarker,Keycloak,标题说明了一切我尝试了很多方法，但似乎都不管用我尝试在我的theme.properties中导入样式表样式=css/styles.css 我试着直接在我的html标签中创建我的样式我尝试在ftl文件中使用我的样式，如下所示： <html> <style type="text/css"> body { margin: 0; font-family: 'Source Sans Pro'; font-weight: 400; font-si

标题说明了一切

我尝试了很多方法，但似乎都不管用

我尝试在我的theme.properties中导入样式表<代码>样式=css/styles.css

我试着直接在我的html标签中创建我的样式<代码>

我尝试在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>


身体{
保证金：0；
字体系列：“源Sans-Pro”；
字体大小：400；
字体大小：16px；
}
.标题{
背景色：#B70E0C；
宽度：100%；
高度：96px；
}
.页脚{
弹性收缩：0；
宽度：100%；
填充：20px0；
文本对齐：居中；
字体大小：16px；
背景色：#2d；
z指数：1；
位置：绝对位置；
底部：0；
}
.页脚a{
颜色：白色！重要；
}
a:参观了{
颜色：首字母；
}
.激活btn{
边界半径：8px；
填充：12px28px；
背景色：#FDC300；
颜色：黑色；
边框样式：隐藏；
}
${kcSanitize（msg（“emailVerificationBodyHtml”），链接，链接，realmName，
linkExpirationFormatter（linkExpiration））？否_esc}

撰写html电子邮件不像撰写html网页那样简单，因为几乎所有电子邮件服务都以不同的方式处理传入的电子邮件。有些可能会忽略引用，有些可能会忽略几个css属性。要制作一封跨平台的电子邮件（在Gmail、Outlook、Thunderbird等中都会呈现相同的效果），你必须回到2000年的技术，比如基于表格的页面布局，内联css样式，比如

，所以你最好看看像这样的电子邮件框架

使用，您可以像npm world中的任何其他UI应用程序一样，在浏览器中创建和调试电子邮件模板。然后，您可以将Zurb输出切片到KeyClope 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>



${msg（“requiredAction.${reqActionItem}”）}

${msg（“executeActionsBodyIntro”，realmName）？否esc}
${msg（“executeActionsList”，requiredActionsText）？否\u esc}
${msg（“ExecuteActionsClickinKnote”）？否esc}
${kcSanitize（msg（“expirationNote”，linkExpirationFormatter（linkExpiration）））？否}
${msg（“mistakeDeleteText”）？否{esc}

您可以使用此代码

正文{
保证金：0；
字体系列：“源Sans-Pro”；
字体大小：400；
字体大小：16px；
}
.标题{
背景色：#B70E0C；
宽度：100%；
高度：96px；
}
.页脚{
弹性收缩：0；
宽度：100%；
填充：20px0；
文本对齐：居中；
字体大小：16px；
背景色：#2d；
z指数：1；
位置：绝对位置；
底部：0；
}
.页脚a{
颜色：白色！重要；
}
a:参观了{
颜色：首字母；
}
.激活btn{
边界半径：8px；
填充：12px28px；
背景色：#FDC300；
颜色：黑色；
边框样式：隐藏；
}

lorem ipsum dolor
${kcSanitize（msg（“emailVerificationBodyHtml”，链接，linkExpiration，realmName，linkExpirationFormatter（linkExpiration）））？否}
lorem ipsum dolor sit amet

这看起来确实是一条路要走，我只是不太确定“可以将Zurb输出切片到Keyclope freemarker模板”部分。有没有一种方法可以自动做到这一点？不幸的是没有，但它并不像看上去那么难。只需开始创建布局，并使用Zurb将其作为web页面进行测试（注意，Zurb还允许使用通用框架模板，因此其他电子邮件布局可以继承它并仅修改“业务内容”）。对我来说，我只需要一整天的时间就可以为公司的所有KeyClope电子邮件创建Zurb布局。还有一天把它们移植到freemarker并进行调试。如果考虑到我不是一个前端人员，这也不错。这只适用于kcSanitize之外的内容。