本章内容介绍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/<theme-id>
可能看完上面的规范会有一些疑问
主题渲染是怎么样的?
官方文档明确说明,登录页渲染文件为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 的配置方式,例如:
<link rel="stylesheet" th:href="@{${#themes.code('landingone.css.file')}}"/>
即可引入样式,同样的,
<script type="text/javascript" th:src="@{/themes/landingone/js/main.js}"></script>
直接在花括号中写路径也没什么影响,根据自己的风格来
那么再次启动项目,就是我们自定义的登录页面了。
联系方式
如果对文章内容有疑惑或者开发过程中有什么问题可以邮件交流。
参考文章:https://blog.csdn.net/yelllowcong/article/details/79236506