二. CAS5.3X 单点登录-自定义风格主题开发

本章内容介绍cas项目自定义风格主题开发

---

我用到的cas版本为5.3.1，代码存放在github

开发环境

• Jdk1.8
• Maven3.x
• IDEA

官方文档:https://apereo.github.io/cas/5.3.x/installation/User-Interface-Customization.html

经过上一章，我们已经搭建了最基础的工程。能够通过静态用户登录并跳转登录成功页面。

但在不同的项目中，用户的登录页面样式是不同的，甚至登录验证的某些字段也不一样，

那么如何去自定义一个登录页面的样式？如何自定义登录页面的字段？

我们本章要去解决登录页面的样式，至于自定义登录页面的字段，涉及到spring webflow流程定义，这个到后面讲

1.

简略看完后，会有以下的规范：

• 静态资源(js,css)存放目录为src/main/resources/static
• html资源存(thymeleaf)放目录为src/main/resources/templates
• 主题配置文件存放在src/main/resources并且命名为[theme_name].properties
• 主题页面html存放目录为src/main/resources/templates/

可能看完上面的规范会有一些疑问

主题渲染是怎么样的？

官方文档明确说明，登录页渲染文件为casLoginView.html,那意味我们在主题具体目录下新增改文件并且按照cas要求写那就可以了

新建landingone-1000.json 文件

{
  "@class" : "org.apereo.cas.services.RegexRegisteredService",
  "serviceId" : "^(https|imaps|http)://(localhost|192.168).*",
  "name" : "Landing One",
  "id" : 1000,
  "description" : "landingone 项目访问过来，跳转到demo主题",
  "evaluationOrder" : 10,
  "theme": "landingone"
}

theme为key指定配置文件id

设置默认主题

修改application.properties文件
#设置默认主题
cas.theme.defaultThemeName=landingone

新建主题配置文件

在src/main下新建landingone.properties

landingone.css.file=/themes/landingone/css/landingone.css
landingone.pageTitle=landingone 网站

#standard.custom.css.file=/themes/[theme_name]/css/cas.css
#cas.javascript.file=/themes/[theme_name]/js/cas.js

standard.custom.css.file=/css/cas.css
admin.custom.css.file=/css/admin.css
cas.javascript.file=/js/cas.js

css配置，js配置，默认保存在/src/main/resources/static 路径下

而我们的登录页面 casLoginView.html ，需要遵循themeleaf的游戏规则

没接触过的可以看一下官方文档，还是很具体的，官方文档：https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

而我们之前创建的landingone.properties，则是配置我们登录页面的样式文件及js文件相对路径

我们通过themeleaf 的配置方式，例如：

即可引入样式，同样的，

直接在花括号中写路径也没什么影响，根据自己的风格来

那么再次启动项目，就是我们自定义的登录页面了。

 

联系方式

如果对文章内容有疑惑或者开发过程中有什么问题可以邮件交流。

邮箱：[email protected]

参考文章：https://blog.csdn.net/yelllowcong/article/details/79236506