首先在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文件的内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title th:text="${#themes.code('blogOne.pageTitle')}"></title>
<link rel="stylesheet" th:href="@{${#themes.code('blogOne.css.file')}}"/>
<script th:src="@{${#themes.code('blogOne.js.file')}}"></script>
</head>
<body>
<h1 th:text="${#themes.code('blogOne.pageTitle')}"></h1>
<div>
<form method="post" th:object="${credential}">
<div th:if="${#fields.hasErrors('*')}">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</div>
<h2 th:utext="#{screen.welcome.instructions}"></h2>
<section class="row">
<label for="username" th:utext="#{screen.welcome.label.netid}"/>
<div th:unless="${openIdLocalId}">
<input class="required" id="username" size="25" tabindex="1" type="text" th:disabled="${guaEnabled}" th:field="*{username}" th:accesskey="#{screen.welcome.label.netid.accesskey}" autocomplete="off"/>
</div>
</section>
<section class="row">
<label for="password" th:utext="#{screen.welcome.label.password}"/>
<div>
<input class="required"
type="password"
id="password"
size="25"
tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"/>
</div>
</section>
<section>
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input type="hidden" name="geolocation"/>
<input class="btn btn-submit btn-block"
name="submit"
accesskey="l"
th:value="#{screen.welcome.button.login}"
tabindex="6"
type="submit"/>
<a th:href="@{/reg}">点我注册</a>
</section>
</form>
</div>
<script type="text/javascript">
alert(123);
</script>
</body>
</html>
至此，自定义登录主题（样式）已完成
1288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
