Apereo CAS | 修改登录页样式

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

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

1、下载源码

官网下载cas源码

image-20210623104839468

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ 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

image-20210623105623581

3、复制到项目,修改

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

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

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

  • 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的目录结构

image-20210623154807590

相关资料