3.4. 创建主题

流程

1. 在主题的 &lt ;THEME TYPE>/resources/css 目录中创建一个文件。

2. 将此文件添加到me .properties 中的 styles 属性中。

   例如，要在 mytheme 中添加 styles.css，请使用以下内容创建 themes/mytheme/login/resources/css/styles.css ：

   .login-pf body {
       background: DimGrey none;
   }

3. 编辑 themes/mytheme/login/theme.properties 并添加：

   styles=css/styles.css

4. 要查看更改，请打开域的登录页面。

   您会注意到，唯一应用风格的样式是自定义风格表中的。

5. 要包括父主题的样式，请从该主题加载样式。编辑 themes/mytheme/login/theme.properties 并将 风格 改为：

   styles=web_modules/@fontawesome/fontawesome-free/css/icons/all.css web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css css/login.css css/styles.css

   注意

   要覆盖父风格表的样式，请确保最后列出您的样式表。

流程

1. 在主题的 &lt ;THEME TYPE>/resources/js 目录中创建一个文件。

2. 将文件添加到me .properties 中的 scripts 属性中。

   例如，要将 script.js 添加到 mytheme，请使用以下内容创建 themes/mytheme/login/resources/js/script.js ：

   alert('Hello');

   然后编辑 themes/mytheme/login/theme.properties 并添加：

   scripts=js/script.js

流程

1. 在主题的目录中创建文件 <THEME TYPE>/messages/messages_<LOCALE>.properties。

2. 将此文件添加到 < THEME TYPE>/theme.properties 中的 区域设置 属性中。对于可供域 登录、帐户和 电子邮件 使用的语言，主题必须支持语言，因此您需要为这些主题类型添加您的语言。

   例如，要将 Norwegian 翻译添加到 mytheme 主题中，创建包含以下内容的文件 themes/mytheme/login/messages_no.properties ：

   usernameOrEmail=Brukernavn
   password=Passord

   如果您省略了消息的翻译，将使用英语。

3. 编辑 themes/mytheme/login/theme.properties 并添加：

   locales=en,no

4. 为 account 和 email 主题类型添加相同的内容。为此，请创建 themes/mytheme/account/messages/messages_no.properties 和 themes/mytheme/email/messages/messages_no.properties。将这些文件留空将导致使用英语消息。
5. 将 themes/mytheme/login/theme.properties 复制到 themes/mytheme/account/theme.properties 和 themes/mytheme/email/theme.properties。

6. 为语言选择器添加翻译。这可以通过向英语添加消息来完成。要做到这一点，将以下内容添加到 themes/mytheme/account/messages_en.properties 中，以及 themes/mytheme/login/messages_en.properties ：

   locale_no=Norsk

   默认情况下，消息属性文件应该使用 ISO-8859-1 进行编码。也可以使用特殊标头指定编码。例如，使用 UTF-8 编码：

   # encoding: UTF-8
   usernameOrEmail=....

流程

1. 在您的登录 主题.properties 文件中定义图标类（例如： themes/mytheme/login/theme.properties），带有键模式 kcLogoIdP-<alias>。

2. 对于别名为 myProvider 的身份提供程序，您可以在自定义 主题的me.properties 文件中添加一行。例如：

   kcLogoIdP-myProvider = fa fa-lock

流程

1. 将模板从基础主题复制到您自己的主题。

2. 应用您需要的修改。

   例如，要为 mytheme 主题创建自定义登录表单，请将 themes/base/login/login.ftl 复制到 themes/mytheme/login 并在编辑器中打开它。

   在第一行(<114import …​>)后，添加 <h1>HELLO WORLD!</h1& gt;，如下所示：

   <#import "template.ftl" as layout>
   <h1>HELLO WORLD!</h1>
   ...

3. 备份修改后的模板。当升级到新版本的 Keycloak 时，您可能需要更新您的自定义模板，以便在适用时对原始模板应用更改。