一、前言
我們搭建了CAS-Server，在瀏覽器中輸入http://ip:port/cas/login之后，跳轉到了統一認證中心的登陸界面。
如下圖所示：
但是這個頁面的logo和布局都是默認apereo的，我們希望自己編輯頁面布局。
自己去定義布局，比如完成如下圖:
- 1.修改瀏覽器標簽頁圖標icon
- 2.修改瀏覽器標簽標題文本
- 3.修改logo信息,點擊logo跳轉到指定頁面
- 4.修改登陸頁面的布局
- 5.修改底部的版權信息
二、實現
我們使用的是cas-overlay-template來搭建服務端的，這個項目已經是集成了CAS Server相關的代碼和頁面，如果我們想修改頁面或代碼，只需要在主項目中建立同名的文件就會把默認的文件給覆蓋。因為cas-overlay-template內部使用的視圖層技術是：thymeleaf，如果不懂thyeleaf的同學先簡單了解一下thymeleaf官網的demo寫法；overlays/org.apereo.cas.cas-server-webapp-tomcat-5.2.3/WEB-INF/templates存放的頁面相關的信息，其中這幾個文件和登陸頁面有關，也是我們待會需要修改的內容：
layout.html：登陸頁面布局模板
casLoginView.html：登陸的頁面
目錄fragments下存放的是頁面片段
fragments/logo.html：logo的頁面片段
fragments/loginform.html：登陸表單的頁面片段
fragments/footer.html：頁面腳部的版權信息頁面片段
頁面中很多地方用到#{cas.login.pagetitle}，這個表單是是取cas.login.pagetitle對應的值，這些值是存儲在messages_xx.properties配置中的，而且是做了國際化的。
步驟：
1.修改瀏覽器標簽頁圖標icon
只需要把你公司的favicon.ico放到目錄src/main/resources/static/即可。如下圖所示：
當打開瀏覽器時,圖標就已經變成你們公司的圖標.
2.修改瀏覽器標簽標題文本
拷貝overlays/org.apereo.cas.cas-server-webapp-tomcat-5.2.3/WEB-INF/messages_zh_CN.properties到src/main/resources/目錄下,修改
cas.login.pagetitle=wolfcode Login
3.修改logo信息,點擊logo跳轉到指定頁面
把公司的logo文件命名為logo.png,直接放在src/main/resources/static目錄下即可.或者可以覆蓋原文件cas.css,自己去定義對應的樣式.
4.修改登陸頁面的布局
拷貝casLoginView.html文件到src/main/resources/temlates下,內容修改成這樣：
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}"> <head> <title th:text="#{cas.login.pagetitle}"></title> </head> <body id="cas" class="login"> <div layout:fragment="content"> <div class="row"> <div> <div th:replace="fragments/loginform" /> </div> </div> </div> </body> </html>
5.修改底部的版權信息
拷貝footer.html到src/main/resources/temlates/fragments目錄下，修改內容如下：
<footer> <div id="copyright" class="container"> 版權所有：2017-2018 江蘇南大先騰信息產業股份有限公司 ICP備案：蘇ICP備10211477號 </div> </footer>
總結：
其實自定義的登陸頁面是非常簡單的，只需要找到需要修改的文件，然后在主項目的相同位置覆蓋該文件即可。