H__D  
【CAS】CAS 源码解析- 登录界面与自定义主题（十）

修改登录界面样式

前端模板资源主要在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博客






	

		posted on 
2025-07-13 14:17 
H__D 
阅读(66) 
评论(0) 
 
收藏 
举报

	



	
	






    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    







                    
 

                

            		
        

    

    

    

        
    

    

        
            博客园
              ©  2004-2025


    浙公网安备 33010602011771号
    浙ICP备2021040463号-3