Apereo CAS | 修改登录页样式

本文介绍单点登录系统CAS自定义登录页样式。

本文基于CAS 6.3.4，并基于cas-overlay-template搭建的cas项目

1、下载源码

去官网下载cas源码

国内的朋友，可以试试这款Github加速插件

2、解压源码，找到cas-server-support-thymeleaf

$ cd cas-master
$ ls
api/          core/  gradle/            gradlew.bat    NOTICE       settings.gradle  testcas.sh*
build.gradle  docs/  gradle.properties  LICENSE        README.md    style/           webapp/
ci/           etc/   gradlew*           lombok.config  release.sh*  support/
$ cd support/cas-server-support-thymeleaf/src/main/resources/
cas-theme-default.properties --> cas主题配置
messages_fr.properties --> 
...
META-INF/ 
static/ --> 静态内容
templates/ --> thymeleaf模板
$ cd static
css/  favicon.ico  images/  js/
$ cd ../templates/
...
layout.html
error.html

3、复制到项目，修改

修改的时候，遵循以下原则

• 只复制需要修改的文件到src/main/resources/，避免项目冗余和向上兼容
• 尽量不更改模板文件结构，例如id，class元素
• 不使用的部分，用注释代替删除，方便还原

一般来说，我们只需要修改以下几个文件即可

• cas-master/support/cas-server-support-thymeleafsrc/main/resources/static/css/cas.css\
• cas-master/support/cas-server-support-thymeleaf/src/main/resources/templates/layout.html
• cas-master/support/cas-server-support-thymeleaf/src/main/resources/templates/login/casLoginView.html

注意，虽然login/casLoginView.html位于login目录下，但是复制到cas-overlay时，需要位于src/main/resources

最终cas-overlay的目录结构

相关资料

• User-Interface-Customization
• Thymeleaf