1. 概述
随着網際網路行業的迅速發展，在實際開發中也越來越趨于靈活化快速化，對于前台與背景的開發各式各樣的架構體系應運而生，友善開發的同時也大大的縮短了開發周期，而Portal作為門戶平台實作了以元件的形式對門戶網站進行快速配置，也正是這種獨特的方式使得Portal備受推崇。
Portal與定制網頁的不同在于定制網頁開發隻會根據需求進行開發，Portal則可以根據需求對不同的主題及色調進行切換，其中的主題可以根據需求進行定制開發，也就是說隻需要對主題單獨的進行開發就可以完成頁面不同樣式之間的切換，而内容則是通過需求進行元件的配置，實作了内容與主題的分離，對于頁面的展示更加靈活，本文則是對Portal的主題開發進行诠釋。
2. AEAI PORTAL
2.1 産品介紹
AEAI Portal作為數通暢聯的核心産品之一，其主要功能在于門戶平台的展現，實作了對頁面，菜單的內建以及統一門戶認證實作單點登入的功能。對于多個異構系統内容實作了通過門戶平台的一次性展現，而且使用者可以根據需求對展現的内容實作自由的配置，具有靈活可變的特性。
2.2主題應用
在數通暢聯的AEAI Portal産品中預置了多個個性主題可供選擇，針對于不同的客戶也可根據客戶的需求對相應的主題進行修改和二次開發，而不是對整個頁面進行重新編寫，這樣的操作既滿足了客戶的需求也大大的縮短了開發周期，真正意義上實作了靈活開發的核心思想。
3. 實作過程
1. 進入Portal控制台選擇“主題管理”功能（本文代碼以背景标準主題為例，雖然主題的代碼編寫方式不同但結構基本相同）；
2. 進入“主題管理”後找到需要修改的主題所對應的jsp頁面（主題頁面位于theme包下）；
3.進入MiscdpStudio找到需要修改的jsp頁面，按照需求對内容進行修改；
4.進入主題jsp頁面，根據需求修改顯示内容
當需要修改頭部顯示的資訊時需要對以下代碼進行修改：
<header class="main-header">
<a href="javascript:void(0)" class="logo">
<span class="logo-mini">數通暢聯</span>
<span class="logo-lg">企業應用中心</span>
</a>
<nav class="navbar navbar-static-top">
<a class="sidebar-toggle">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!--
<li class="dropdown messages-menu">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o "></i><span class="label label-success">4</span>測試連接配接
</a>
</li>
-->
<li class="dropdown user user-menu">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<img src="<%=themeRelativePath%>/images/System.jpg" class="user-image" alt="User Image">
<span class="hidden-xs"><%=userName%><i class="fa fa-caret-down" style="padding-left:5px;"></i></span>
</a>
<ul class="dropdown-menu pull-right">
<li><a class="menuItem" href="javascript:openModifyPasswordBox()"><i class="fa fa-user"></i><%=resourceBundle.getString("CommonMenu.changedPassword")%></a></li>
<li><a class="menuItem" href="javascript:openPersonalThemeBox('<%=navigaterId%>')"><i class="fa fa-puzzle-piece"></i><%=resourceBundle.getString("CommonMenu.themeSetting")%></a></li>
<li><a class="menuItem" href="javascript:openPersonalColorBox('<%=navigaterId%>','<%=themeId%>')"><i class="fa fa-delicious"></i>色調設定</a></li>
<%if (isAdmin){%>
<li><a id="portletConfigA" οnclick="changeInnerMode()"><i class="fa fa-pencil-square"></i><%=modeText%></a></li>
<li><a href="/portal/entry/00"><i class="fa fa-wrench"></i>門戶管理</a></li>
<%}%>
<li class="divider"></li>
<li><a href="javascript:void(0);" οnclick="logout()"><i class="ace-icon fa fa-power-off"></i>安全退出</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header> 當需要修改左側導航資訊時需要對以下代碼進行修改：
<div class="main-sidebar">
<div class="sidebar">
<ul class="sidebar-menu" id="sidebar-menu">
<li class="header" style="padding-left:19px;font-size:13px"><i class="fa fa-th-large" style="margin-right: 5px;"></i>導航菜單</li>
</ul>
</div>
</div> 當需要修正文處顯示的樣式時需要對以下代碼進行修改：
<div id="content-wrapper" class="content-wrapper">
<div class="content-tabs">
<button class="roll-nav roll-left tabLeft">
<i class="fa fa-backward"></i>
</button>
<nav class="page-tabs menuTabs">
<div class="page-tabs-content" style="margin-left: 0px;">
</div>
</nav>
<button class="roll-nav roll-right tabRight" style="right:120px;">
<i class="fa fa-forward" style="margin-left:3px;"></i>
</button>
<button class="roll-nav roll-right fullscreen" style="right:80px;">
<i class="fa fa-arrows-alt"></i>
</button>
<div class="roll-nav roll-right" style="right: 40px;">
<button class="dropdown" data-toggle="dropdown" style="right: 0px;" aria-expanded="false">
<i class="fa fa-gear" style="padding-left: 3px;"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="tabReload" href="javascript:void(0);">重新整理目前</a></li>
<li><a class="tabCloseCurrent" href="javascript:void(0);">關閉目前</a></li>
<li><a class="tabCloseAll" href="javascript:void(0);">全部關閉</a></li>
<li><a class="tabCloseOther" href="javascript:void(0);">關閉其它</a></li>
</ul>
</div>
<div class="roll-nav roll-right" style="right: 0px;">
<button class="dropdown" data-toggle="dropdown" style="right: 0px;" aria-expanded="false">
<i class="fa fa-heart" style="padding-left: 3px;"></i>
</button>
<ul id="favoriteMenu" class="dropdown-menu dropdown-menu-right">
<li><a οnclick="addMyFavoritePage('<%=navigaterId%>')" href="javascript:void(0);">加入收藏夾</a></li>
<li><a οnclick="setupPersonalFavorite('<%=navigaterId%>');" href="javascript:void(0);">管理收藏夾</a></li>
<li class="divider"></li>
</ul>
</div>
</div>
<div class="content-iframe" style="overflow: hidden;">
<div class="mainContent" id="content-main">
</div>
</div>
</div>
</div> 4. 注意事項
1. 由于主題頁面無對應的控制層，是以其顯示内容基本為作用域擷取的，一般情況下在主題的區域不建議放置過多的動态資料，如無法避免需要在主題内擴充顯示動态資料可通過js調用rest服務進行擷取。