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)
撰写 html 电子邮件并不像撰写 html 网页那样简单,因为几乎所有电子邮件服务都以不同的方式处理传入的电子邮件。有些可能会忽略 <style ..> 引用,有些可能会忽略几个 css 属性。要制作跨平台电子邮件(在 Gmail、Outlook、Thunderbird 等中呈现相同的效果),您必须回滚到 2000 年的技术,例如基于表格的页面布局、内联 css 样式,<p style="..">
因此您最好看看到像Zurb这样的电子邮件框架。
使用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)\nUPD。还有其他用于撰写电子邮件的框架。例如\n MJML。无论如何,任何一个框架的开发流程都是完全相同的,所以请随意使用它们中的任何一个。
\n