如何在Apereo CAS中定制用户界面

看看这个简化指南，开始使用Apereo CAS，学习如何定制CAS应用程序的用户界面。

在这篇文章中，我们将看到如何定制一个CAS应用程序的用户界面。

正如你可能已经知道的，我们正在处理CAS项目的WAR覆盖安装。在这个叠加项目中，没有可供我们修改的视图页面。因此，首先，我们需要从CAS源代码中把我们需要修改的CAS视图带入我们的覆盖项目。

如何定制一个CAS视图

第一步，在命令提示符下，进入你的CAS叠加项目的根文件夹，并给出以下命令，以便看到所有可用的CAS视图。

gradlew listTemplateViews

如果你想把CAS登录视图下放到我们的覆盖项目中，使用以下命令:

gradlew getResource –P resourceName= casLoginView.html

然后 "casLoginView.html" 应该在你的覆盖项目的 "src/main/resources/templates/" 文件夹中可用。

如果你喜欢，你可以使用以下命令解压CAS网络应用程序和内部资源jar。

graldew explodeWar

现在你可以手动复制所需的HTML文件到"src/main/resources/templates/"，然后修改它。

注意：在解压缩资源罐后，"getResource "命令可能会失败，提示 "cas-server-webapp-resources-XXX.jar'不存在。在这种情况下，所有的视图都可以在 "build\cas\WEB-INF\classes\templates"文件夹中找到。

你可以看到CAS视图由较小的片段组成，这些片段在 "src/main/resources/templates/fragments"文件夹中可用。如果你需要修改登录页面的一个特定部分，例如页眉或页脚，那么你需要修改这个文件夹中的相关片段。你甚至可以在这个文件夹中添加你自己的片段，然后按以下方式修改 "casLoginView.html" 。

HTML

<div th:if="${headersList}">
   <div class="row">
	<div id="headers" class="headerlist-panel col-12" th:if="${headersList != null}">
		<div th:replace="fragments/headerslist :: headerslist">
		  <a href="fragments/headerslist.html">headers list goes here</a>
		</div>
 	</div>
   </div>
</div>

在上面的例子中 "headerList" 是一个从后台传来的项目列表（当登录页面加载时）。如果 "headerList" 参数有一个值，那么 "headerlist.html" 片段将显示在登录页面。在 "headerlist.html" 片段中，你可以编写代码来迭代列表并显示它们。

注意：CAS使用"Thymeleaf"进行标记渲染。所以要修改CAS视图，你必须有一点Thymeleaf的基础知识。

CSS、图像和JavaScript文件应该在"src/main/resources/static/"文件夹中，它们应该有自己的文件夹，分别是 "css"、"图像 "和 "js"。如果你想修改默认的 "cas.css "文件，你可以把它拿下来，把该文件放在 "src/main/resources/static/css" 文件夹里。如果你不想修改上述默认的 "cas.css "文件，而是想拥有自己的cutom.css文件，那么你要修改位于 "src/main/resources/"文件夹内的 "cas-theme-default.properties"文件内的 "cas.standard.css.file "属性。

所有出现在视图中的UI信息都可以在资源文件夹中的"messages.properties"文件中找到。然而，如果你想覆盖这些默认信息或添加一些额外的信息，CAS推荐的方法是将它们放在 "custom_messages.properties"文件中，你应该把它放在 "src/main/resources"文件夹中。

下面是CAS覆盖项目中 "src/main/resources"文件夹的结构，它看起来是这样的:

现在我们对修改CAS视图和在项目中放置这些文件有了一些概念。下一次当我们建立我们的覆盖项目时，它将在覆盖项目的 "src/main/resources" 文件夹中接收可用的文件（即我们所做的视图的修改）。 因此，一旦它启动并运行，我们就可以看到我们所做的修改。