3.4. 주제 생성

Theme consists of:

HTML 템플릿 (Freemarker 템플릿)
이미지
메시지 번들
스타일시트
스크립트
meme 속성

각 페이지를 교체하지 않는 한 다른 주제를 확장해야합니다. 대부분의 경우 Red Hat Single Sign-On 주제를 확장하려고 하지만 페이지의 모양과 느낌은 크게 변경되는 경우 기본 Theme를 확장할 수도 있습니다. 기본 주제는 주로 HTML 템플릿과 메시지 번들로 구성되며 Red Hat Single Sign-On Theme에는 주로 이미지와 스타일 대결이 포함되어 있습니다.

주제를 확장할 때 개별 리소스(templates, 스타일 대시 등)를 덮어쓸 수 있습니다. HTML 템플릿을 재정의하려면 새 릴리스로 업그레이드할 때 사용자 지정 템플릿을 업데이트해야 할 수 있습니다.

주제를 만드는 동안 캐싱을 비활성화하는 것이 좋습니다. 따라서 Red Hat Single Sign-On을 다시 시작하지 않고도 themes 디렉토리에서 직접mes 리소스를 편집할 수 있습니다.

절차

standalone.xml 을 편집합니다.

Theme 에서 staticMaxAge 를 -1 로 설정하고 cacheTemplates 및 cacheThemes 를 false 로 설정합니다.

<theme>
    <staticMaxAge>-1</staticMaxAge>
    <cacheThemes>false</cacheThemes>
    <cacheTemplates>false</cacheTemplates>
    ...
</theme>

themes 디렉터리에 디렉터리를 생성합니다.
디렉터리의 이름은 topic의 이름이 됩니다. 예를 들어 mytheme 이라는 주제를 생성하면 디렉토리 themes/mytheme 가 생성됩니다.
주제 디렉터리 내에서 주제가 제공할 각 유형에 대한 디렉터리를 생성합니다.
예를 들어, mytheme topic에 로그인 유형을 추가하려면 디렉토리 themes/mytheme/login 을 만듭니다.
각 유형에 대해 Theme에 대한 일부 구성을 설정할 수 있는 파일 topic.properties 를 생성합니다.
예를 들어, 주제 주제/mytheme/login을 구성하여 기본 주제를 확장하고 몇 가지 공통 리소스를 가져오려면 다음 내용을 사용하여 파일 themes/mytheme/login /theme.properties 를 생성합니다.
```
parent=base
import=common/keycloak
```
이제 로그인 유형을 지원하는 주제를 생성했습니다.
관리 콘솔에 로그인하여 새 주제를 점검합니다.
사용자 영역 선택
메뉴에서 CloudEvent Settings 을 클릭합니다.
Themes 탭을 클릭합니다.
Login Theme 은 mytheme 을 선택하고 저장 을 클릭합니다.
영역의 로그인 페이지를 엽니다.
애플리케이션을 통해 로그인하거나 계정 관리 콘솔(/realms/{realm name}/account)을 열어 이 작업을 수행할 수 있습니다.
부모 주제를 변경하는 효과를 보려면 topic .properties 에서 parent=keycloak 을 설정하고 로그인 페이지를 새로 고칩니다.

참고

성능에 큰 영향을 미치기 때문에 프로덕션에서 캐싱을 다시 활성화해야 합니다.

3.4.1. meme 속성

Themes 속성은 topic 디렉터리의 <THEME TYPE>/theme.properties 파일에 설정되어 있습니다.

부모 - 확장하려는 주제
가져오기 - 다른me에서 리소스 가져오기
style - 공백으로 구분된 스타일 목록을 포함합니다.
로케일 - 지원되는 로케일의 쉼표로 구분된 목록

특정 요소 유형에 사용되는 css 클래스를 변경하는 데 사용할 수 있는 속성 목록이 있습니다. 이러한 속성 목록은 keycloak의 해당 유형에서 topic.properties 파일을 참조하십시오 (themes/keycloak/<THEME TYPE>/theme.properties).

사용자 지정 속성을 추가하고 사용자 지정 템플릿에서 사용할 수도 있습니다.

이렇게 하면 다음 형식을 사용하여 시스템 속성 또는 환경 변수를 대체할 수 있습니다.

${some.system.property} - 시스템 속성의 경우
${env.ENV_VAR} - 환경 변수의 경우.

시스템 속성 또는 환경 변수가 ${foo:defaultValue} 에서 찾을 수 없는 경우에도 기본값을 제공할 수 있습니다.

참고

기본값이 제공되지 않고 해당 시스템 속성 또는 환경 변수가 없으면 아무것도 교체되지 않고 템플릿의 형식으로 끝납니다.

가능한 작업의 예는 다음과 같습니다.

javaVersion=${java.version}

unixHome=${env.HOME:Unix home not found}
windowsHome=${env.HOMEPATH:Windows home not found}

3.4.2. 제목에 스타일 워크시트 추가

제목에 하나 이상의 스타일시트를 추가할 수 있습니다.

절차

주제의 < THEME TYPE>/resources/css 디렉터리에 파일을 만듭니다.
이 파일을 topic . properties 의 style 속성에 추가합니다.
예를 들어 mytheme 에 style .css 를 추가하려면 다음 콘텐츠를 사용하여 themes/mytheme/login/resources/css/styles.css 를 생성합니다.
```
.login-pf body {
    background: DimGrey none;
}
```
주제/mytheme/login/theme.properties 를 편집하고 다음을 추가합니다.
```
styles=css/styles.css
```
변경 사항을 확인하려면 영역의 로그인 페이지를 엽니다.
적용되는 유일한 스타일은 사용자 정의 스타일로 인한 것입니다.

부모 주제의 스타일을 포함하려면 해당 주제에서 스타일을 로드합니다. 주제/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

참고

부모 스타일 대결에서 style을 재정의하려면 스타일시트를 마지막에 나열해야 합니다.

3.4.3. 주제에 스크립트 추가

주제에 하나 이상의 스크립트를 추가할 수 있습니다.

절차

주제의 < THEME TYPE>/resources/js 디렉터리에 파일을 만듭니다.
파일을 topic .properties 의 scripts 속성에 추가합니다.
예를 들어 mytheme 에 script.js 를 추가하려면 다음 콘텐츠를 사용하여 themes/mytheme/login/resources/js/script.js 를 생성합니다.
```
alert('Hello');
```
그런 다음 themes/mytheme/login/theme.properties 를 편집하고 다음을 추가합니다.
```
scripts=js/script.js
```

3.4.4. meme에 이미지 추가

주제에서 이미지를 사용할 수 있도록 하려면 주제의 < THEME TYPE>/resources/img 디렉터리에 이미지를 추가합니다. 스타일시트 내에서 또는 HTML 템플릿에서 직접 사용할 수 있습니다.

예를 들어 mytheme에 이미지를 추가하려면 이미지를 themes/ mytheme /login/resources/img/image.anchor 에 복사합니다.

그런 다음 다음을 사용하여 사용자 정의 스타일시트 내에서 이 이미지를 사용할 수 있습니다.

body {
    background-image: url('../img/image.jpg');
    background-size: cover;
}

또는 HTML 템플릿에서 직접 사용하려면 사용자 지정 HTML 템플릿에 다음을 추가합니다.

<img src="${url.resourcesPath}/img/image.jpg">

3.4.5. 메시지

템플릿의 텍스트는 메시지 번들에서 로드됩니다. 다른me을 확장하는 주제는 부모의 메시지 번들의 모든 메시지를 상속하며, < THEME TYPE>/ECDHE/ECDHE_en.properties를 귀하의 Theme에 추가하여 개별 메시지를 덮어쓸 수 있습니다.

예를 들어 로그인 양식의 Username 을 mytheme 의 Username 으로 교체하려면 파일 themes/mytheme/login/ECDHE_en.properties 를 다음 콘텐츠로 생성합니다.

usernameOrEmail=Your Username

메시지를 사용할 때 {0} 및 {1} 와 같은 메시지 값 내에서 인수로 교체됩니다. 예를 들어 로그인에서 {0} {0} 은(는) 영역 이름으로 교체됩니다.

이러한 메시지 번들의 텍스트는 영역별 값으로 덮어쓸 수 있습니다. 영역별 값은 UI 및 API를 통해 관리할 수 있습니다.

3.4.6. 영역에 언어 추가

사전 요구 사항

영역에 대한 국제화를 활성화하려면 서버 관리 가이드를 참조하십시오.

절차

주제 디렉토리에 < THEME TYPE>/Forwarded/ECDHE_<LOCALE>.properties 파일을 만듭니다.
이 파일을 < THEME TYPE>/theme.properties 의 locales 속성에 추가합니다. 사용자의 로그인 영역,계정 및 이메일에 사용할 수 있는 언어를 사용하려면, 주제에서 해당 언어를 지원해야 하므로 해당 주제 유형에 대해 언어를 추가해야 합니다.
예를 들어, Norwegian 번역을 mytheme topic에 추가하려면 다음 콘텐츠와 함께 themes/mytheme/login/ECDHE_no.properties 파일을 생성합니다.
```
usernameOrEmail=Brukernavn
password=Passord
```
메시지에 대한 번역을 생략하면 영어가 사용됩니다.
주제/mytheme/login/theme.properties 를 편집하고 다음을 추가합니다.
```
locales=en,no
```
계정 및 이메일 주제 유형에 대해 동일하게 추가합니다. 이렇게 하려면 주제 /mytheme/account/ECDHE_no.properties 및 themes/mytheme/email/ECDHE/knative_no.properties 를 만듭니다. 이러한 파일을 비워 두면 영어 메시지가 사용됩니다.
themes/mytheme/login/theme.properties 를 themes/mytheme/account/theme.properties 및 themes/mytheme/email/theme.properties 에 복사합니다.
언어 선택기에 대한 번역을 추가합니다. 이 작업은 영어 번역에 메시지를 추가하여 수행됩니다. 이렇게 하려면 themes/mytheme/account/ECDHE_en.properties 및 themes/mytheme/login/ECDHE_en.properties에 다음을 추가합니다.
```
locale_no=Norsk
```
기본적으로 메시지 속성 파일은 ISO-8859-1을 사용하여 인코딩해야 합니다. 특수 헤더를 사용하여 인코딩을 지정할 수도 있습니다. 예를 들어 UTF-8 인코딩을 사용합니다.
```
# encoding: UTF-8
usernameOrEmail=....
```

추가 리소스

현재 로케일이 선택된 방법에 대한 자세한 내용은 Locale Selector 를 참조하십시오.

3.4.7. 사용자 정의 ID 공급자 아이콘 추가

Red Hat Single Sign-On은 로그인 화면에 표시되는 사용자 정의 ID 공급자의 아이콘을 추가할 수 있습니다.

절차

키 패턴 kcLogoIdP-<alias>를 사용하여 로그인she .properties 파일에서 아이콘 클래스를 정의합니다.
myProvider 별칭이 있는 ID 공급자의 경우 사용자 정의 주제의 topic.properties 파일에 행을 추가할 수 있습니다. 예를 들면 다음과 같습니다.
```
kcLogoIdP-myProvider = fa fa-lock
```

모든 아이콘은 PatternFly4의 공식 웹 사이트에서 사용할 수 있습니다. 소셜 공급자의 아이콘은 이미 기본 로그인 주제 속성 (themes/keycloak/login/theme.properties)에 정의되어 있습니다.

3.4.8. 사용자 정의 HTML 템플릿 생성

Red Hat Single Sign-On은 Apache Freemarker 템플릿을 사용하여 HTML을 생성합니다. < THEME TYPE>/<TEMPLATE>.ftl 을 생성하여 자체 주제에서 개별 템플릿을 덮어쓸 수 있습니다. 사용된 템플릿 목록은 themes/base/<THEME TYPE>.

절차

템플릿을 기본 주제에서 고유한 주제로 복사합니다.
필요한 수정 사항을 적용합니다.
예를 들어 mytheme topic에 대한 사용자 지정 로그인 양식을 생성하려면 themes/base/login/login 을 themes/mytheme/login 에 복사하여 편집기에서 엽니다.
첫 번째 줄(<#import …> 뒤에 < h1>HELLO WORLD!</h1 >을 추가합니다.
```
<#import "template.ftl" as layout>
<h1>HELLO WORLD!</h1>
...
```
수정된 템플릿을 백업합니다. 새 버전의 Red Hat Single Sign-On으로 업그레이드할 때 해당하는 경우 원래 템플릿에 변경 사항을 적용하려면 사용자 지정 템플릿을 업데이트해야 할 수 있습니다.

추가 리소스

템플릿을 편집하는 방법에 대한 자세한 내용은 FreeMarker 매뉴얼을 참조하십시오.

3.4.9. email

이메일의 제목과 내용(예: 암호 복구 이메일)을 편집하려면 주제의 이메일 유형에 메시지 번들을 추가합니다. 각 이메일에는 세 개의 메시지가 있습니다. 하나는 제목에 대한 것이며, 하나는 일반 텍스트 본문에, 하나는 HTML 본문에 대한 것입니다.

사용 가능한 모든 이메일을 보려면 themes/base/email/Forwarded/Forwarded_en.properties 를 참조하십시오.

예를 들어 mytheme 의 암호 복구 이메일을 변경하려면 다음 콘텐츠를 사용하여 주제/mytheme/email/ECDHE_en.properties 를 생성합니다.

passwordResetSubject=My password recovery
passwordResetBody=Reset password link: {0}
passwordResetBodyHtml=<a href="{0}">Reset password</a>

3.4. 주제 생성

3.4.1. meme 속성

3.4.2. 제목에 스타일 워크시트 추가

3.4.3. 주제에 스크립트 추가

3.4.4. meme에 이미지 추가

3.4.5. 메시지

3.4.6. 영역에 언어 추가

3.4.7. 사용자 정의 ID 공급자 아이콘 추가

3.4.8. 사용자 정의 HTML 템플릿 생성

3.4.9. email

자세한 정보

평가판, 구매 및 판매

커뮤니티

Red Hat 문서 정보

보다 포괄적 수용을 위한 오픈 소스 용어 교체

Red Hat 소개

Red Hat legal and privacy links

Red Hat legal and privacy links