要自定义keycloak页面，必要先熟悉其采用的模板引擎freemarker，读懂base模板代码。要理解其工作原理及术语，方便交流，有选择的使用前端技术替换实现。
工作原理
模板引擎 是一种基于模板和要改变的数据， 并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。 它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。
模板引擎基于已经准备好的数据和模板来渲染HTML。数据放在多层嵌套的map结构中，当模板中使用点符号取数据，本质是一层层的从map中get。模板解析器会读取模板的字符，解析模板引擎的标签，表达式等，替换或生成对应的数据。
数据模型
为模板准备的数据整体被称作为 数据模型。 数据模型是树形结构，在Java中实现就是多层map。
变量
模型中的key，取出对应的value替换变量。
方法
方法变量在存于实现了 TemplateMethodModel 接口的模板中。
public class IndexOfMethod implements TemplateMethodModel {
......
}
root.put("indexOf", new IndexOfMethod());
${indexOf("met", x)}
模板
.ftl文件，最简单的模板通常是普通的HTML文件，文件中自然可以包含html，css，js，vue代码。模板包含标签（指令），插值（表达式）和注释，不是这三部分的内容将被视为静态文本， 这些东西不会被FreeMarker所解析；会被按照原样输出出来。
表达式
格式为${...}， FreeMarker将会输出真实的值来替换大括号内的表达式，如**${latestProduct.url}**，则会从数据模型中查找对应的值。
指令
格式为<# > ，如**<#if user == "Big Joe">**，简单概括，指令包含逻辑判断，循环控制等。
注释
使用 <#-- and --> 来标识
内建函数
内建函数很像子变量(如果了解Java术语的话，也可以说像方法)， 它们并不是数据模型中的东西，是 FreeMarker 在数值上添加的。 为了清晰子变量是哪部分，使用 ?(问号)代替 .(点)来访问它们。常用内建函数的示例：
user?html 给出 user 的HTML转义版本， 比如 & 会由 & 来代替。
user?length 给出 user 值中 字符的数量(对于 "John Doe" 来说就是8)
来源：oschina
链接：https://my.oschina.net/wecanweup/blog/4299094