cas 5.3.x 服务端搭建（三）自定义登录主题（样式）

首先在service目录下创建一个json文件形式为[theme-id].json

其中内容配置如下：

{
  "@class" : "org.apereo.cas.services.RegexRegisteredService",
  "serviceId" : "^(https|imaps|http)://(localhost|www.hanyalei.com).*",
  "name" : "blogOne",
  "id" : 10000003,
  "description" : "自定义登录主题",
  "evaluationOrder" : 1,
  "theme": "blogOne"
}

其中  @class 是写死的，不能改的

serviceId是配置具体哪个客户端请求时，执行该登录主题（样式）

name：自定义

id：这个ID的值必须和你定义该json文件时的id一致，否则cas会找不到该文件，且不能重复

description：描述

evaluationOrder：主题加载顺序（个人理解），当存在两个相同的主题时，默认加载小的那个，并且值不能重复

theme：主题名称

然后在application.properties文件中添加

#设置默认主题
cas.theme.defaultThemeName=设置的主题名称

然后创建在application.properties文件的同级目录下创建properties文件，并按照 主题名.properties的形式命名

在该properties文件中可添加：

cas.standard.css.file=/css/cas.css
blogOne.css.file=/themes/blogOne/css/login.css
blogOne.pageTitle=博客之家 登录
blogOne.javascript.file=/themes/blogOne/js/jquery-3.3.1.min.js
blogOne.loginH1=博客之家
blogOne.username=请输入用户名
blogOne.password=请输入密码

用来设置自定义登录页面的css样式和js文件，并把对应的css和js文件如下图的目录创建

然后创建casLoginView.html文件，该HTML文件名不能改动，并按照上图目录显示位置创建

该html文件必须遵循thymeleaf 模板引擎的规则

该html文件的内容如下：

   
   
   
   
   
   

   

       

           
       

       

       

           
           

               
           

       

       

           
           

                                       type="password"
                       id="password"
                       size="25"
                       tabindex="2"
                       th:accesskey="#{screen.welcome.label.password.accesskey}"
                       th:field="*{password}"
                       autocomplete="off"/>
           

       

       

           
           
           
                               name="submit"
                   accesskey="l"
                   th:value="#{screen.welcome.button.login}"
                   tabindex="6"
                   type="submit"/>
            点我注册
       

   

至此，自定义登录主题（样式）已完成