Keycloak: Keycloak 主題結構說明

本文件是自訂外觀指南的一部分。請在此處查看完整指南：輕鬆在 Stackhero 上為您的 Keycloak 登入頁面、帳戶主控台及電子郵件進行品牌化：設定您的顏色、Logo、文字，甚至可透過內建線上編輯器建立完整的自訂主題。。

👋 歡迎來到 Stackhero 文件中心！

Stackhero 提供 Keycloak cloud 服務，讓您只需 2 分鐘即可輕鬆部署可用於生產環境的身分識別服務：

• 無限制的使用者、realm 及 client 數量
• 支援 OpenID Connect、OAuth 2.0、SAML 2.0、社群登入、LDAP 及 Active Directory 聯邦整合
• 自訂網域名稱，內建 HTTPS，確保安全存取（例如 https://login.your-company.com）
• 自訂主題：透過內建線上編輯器，輕鬆自訂登入頁面、帳號主控台及電子郵件的品牌風格
• 專屬 Email 伺服器，支援 SPF、DKIM 及 DMARC，協助您自動處理帳號確認與密碼重設
• 內建 PostgreSQL 資料庫，管理主控台可於獨立且可關閉的連接埠上存取
• 一鍵更新，讓您的系統隨時保持最新，無需手動操作

專注於開發，而非設定：您可以在 5 分鐘內體驗 Stackhero 的 Keycloak cloud 解決方案。

主題是一個目錄，內含各頁面類型的子目錄：

themes/
  acme/
    login/                             # 使用者登入頁
      theme.properties                 # 主題繼承與 CSS 引用
      resources/css/stackhero.css      # 您的 CSS
      resources/img/logo.svg           # 您的圖片
      messages/messages_en.properties  # 您的文字
    account/                           # 使用者個人資料管理
    admin/                             # 管理主控台外觀
    email/                             # 電子郵件模板

主題會繼承標準 Keycloak 主題，只需覆蓋必要部分。典型的 login/theme.properties 如下：

parent=keycloak.v2
styles=css/styles.css css/stackhero.css

• parent 設定基礎主題。
• styles 列出要載入的 CSS 檔案。請將您的 CSS 放在最後，以確保變更生效。

styles 列表會取代父主題的設定，而非擴充。請務必包含父主題的樣式表（css/styles.css），否則頁面將失去預設樣式。

只有在需變更 HTML 結構時才需 FreeMarker 模板（.ftl 檔）。顏色、Logo、背景、文字及語言等調整皆無需編輯模板。詳情請參閱 Keycloak 主題官方文件。