修改登錄界面樣式
前端模板資源主要在cas-server-support-thymeleaf項目中（E:\git-repository\cas-server\support\cas-server-support-thymeleaf）
1、查看主題默認配置
E:\git-repository\cas-server\support\cas-server-support-thymeleaf\src\main\resources\cas-theme-default.properties
多個樣式文件，后面的樣式會覆蓋前面的樣式
2、新增自定義樣式文件
E:\git-repository\cas-server\webapp\cas-server-webapp-native\src\main\resources\static\css\custom.css
內容如下：
/*
This CSS file is meant to be customized by deployments
and is intentionally left empty. Any style that is added
here should override the default styles in the application.
*/
.text-center {
color: green;
text-align: left;
}
3、啟動項目
訪問：https://localhost:8443/cas/login，效果如下：
自定義頁面主題
1、主題配置屬性文件
E:\git-repository\cas-server\webapp\cas-server-webapp-native\src\main\resources\mytheme.properties
#保留原來樣式
# Path to theme CSS file; `/themes/[theme_name]/css/cas.css`.
# Multiple files may be comma-separated.
cas.standard.css.file=/css/cas.css,/css/custom.css,/themes/mytheme/css/cas.css
# Path to theme JavaScript file; `/themes/[theme_name]/js/js/css`
# Multiple files may be comma-separated.
cas.standard.js.file=/js/cas.js,/js/material.js,/js/custom.js,/themes/mytheme/js/cas.js
2、主題頁面
我的主題是： mytheme
主題布局頁面，覆蓋默認布局頁面
E:\git-repository\cas-server\webapp\cas-server-webapp-native\src\main\resources\templates\mytheme\layout.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" th:lang="${#locale}">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title layout:title-pattern="$LAYOUT_TITLE $CONTENT_TITLE"
th:text="${#strings.defaultString(#themes.code('cas.theme.name'), 'CAS - Central Authentication Service')}">
</title>
<!--/* Core CAS CSS */-->
<span th:remove="tag" th:if="${#cas.isTrue(#themes.code('cas.css.core.enabled'))}">
<span th:replace="~{fragments/includes :: stylesheets}">
<a href="fragments/includes.html">Theme</a> stylesheet fragment will go here
</span>
</span>
<span th:remove="tag" th:each="file : ${#strings.setSplit(#themes.code('cas.standard.css.file'), ',')}">
<link rel="stylesheet" type="text/css" href="../static/css/cas.css" th:href="@{${file}}" />
</span>
<link rel="shortcut icon" th:href="@{${#strings.defaultString(#themes.code('cas.favicon.file'), '/favicon.ico')}}" />
<span th:remove="tag" th:each="name : ${#strings.setSplit(#themes.code('cas.standard.fragments.head'), ',')}">
<span th:replace="~{fragments/custom :: ${name}}" th:remove="tag" />
</span>
</head>
<body>
<script th:replace="~{fragments/scripts}"></script>
<!-- 布局header~ -->
<!-- <div th:replace="~{fragments/header :: header}">-->
<!-- <a href="fragments/header.html">Header</a> fragment will go here-->
<!-- </div>-->
<!-- <div class="mdc-drawer-scrim"></div>-->
<div class="fade-in mdc-drawer-app-content mdc-top-app-bar--fixed-adjust d-flex justify-content-center bgimage">
<main id="main-content" th:attr="class=*{mainContentClass ?: 'container-lg' + ' py-4'} ">
<div layout:fragment="content" id="content">
CAS content will go here
</div>
</main>
</div>
<div th:replace="~{fragments/footer :: footer}">
<a href="fragments/footer.html">Footer</a> fragment will go here
</div>
</body>
</html>
View Code 主題登錄頁面，覆蓋默認登錄頁面
E:\git-repository\cas-server\webapp\cas-server-webapp-native\src\main\resources\templates\mytheme\login\casLoginView.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
<head>
<title th:text="#{cas.login.pagetitle}">CAS Login View</title>
<link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>
<body class="login mdc-typography">
<div layout:fragment="content" class="d-flex justify-content-center">
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content card flex-grow-1"
th:with="loginFormEnabled=${#cas.isTrue(#themes.code('cas.login-form.enabled'))},
loginFormViewable=${#cas.isLoginFormViewable(#vars)}">
<section id="loginSidePanel"
th:if="${loginFormViewable and loginFormEnabled and #cas.isTrue(#themes.code('cas.login-side-panel.enabled'))}"
class="login-section d-xs-none d-md-block card-body">
<div th:replace="~{fragments/loginSidePanel :: loginSidePanel}">
<a href="fragments/loginSidePanel.html">loginSidePanel</a>
</div>
</section>
<!-- 主登錄表單~ (loginForm) -->
<section id="loginForm"
th:if="${loginFormViewable and loginFormEnabled}"
class="login-section login-form card-body">
<div th:replace="~{fragments/loginform :: loginform}">
<a href="fragments/loginform.html">Login Form goes here</a>
</div>
</section>
<!-- 第三方登錄提供者 (loginProviders) -->
<section id="loginProviders" class="login-section login-providers card-body"
th:if="${(#bools.isFalse(delegatedAuthenticationDynamicProviderSelection)
&& #bools.isFalse(delegatedAuthenticationDisabled))
&& (#cas.isTrue(delegatedAuthenticationProviderConfigurations)
|| #cas.isTrue(wsfedUrls))}">
<div th:replace="~{fragments/loginProviders :: loginProviders}">
<a href="fragments/loginProviders.html">loginProviders</a>
</div>
</section>
<!-- 二維碼登錄 (qrlogin) -->
<section id="qrlogin" class="login-section login-qr d-xs-none d-md-block card-body" th:if="${qrAuthenticationEnabled}">
<div th:replace="~{fragments/qrAuthentication :: qrAuthentication}">
<a href="fragments/qrAuthentication.html">qrAuthentication</a>
</div>
</section>
</div>
</div>
</body>
</html>
View Code
3、主題CSS
E:\git-repository\cas-server\webapp\cas-server-webapp-native\src\main\resources\static\themes\mytheme\css\cas.css
.text-center {
color: red;
text-align: right;
}
4、主題JS
E:\git-repository\cas-server\webapp\cas-server-webapp-native\src\main\resources\static\themes\mytheme\js\cas.js
空文件
5、注冊服務，使用主題mytheme
增加依賴
// 增加主題配置依賴
implementation project(":support:cas-server-support-themes")
增加配置
cas:
service-registry:
core:
init-from-json: true
# 修改默認主題
# theme:
# default-theme-name: "mytheme"
增加服務json文件
{
"@class" : "org.apereo.cas.services.CasRegisteredService",
"serviceId": "^(https|imaps)://app.test.com",
"name" : "AppTest",
"theme" : "mytheme",
"id" : 10001,
"evaluationOrder" : 10
}
6、啟動項目
訪問：https://localhost:8443/cas/login?service=https://app.test.com
效果如下：無header，以及改變的樣式
參考：CSS & JavaScript - User Interface Customization - CAS
參考：CAS_逆天壁虎的博客-CSDN博客
浙公網安備 33010602011771號
浙ICP備2021040463號-3