iPortal 提供了一套可视化定制系统以便于您对 iPortal 首页进行外观的定制。在可视化定制系统中，您可以使用 iPortal 内置提供的多种组件，以拖拽式操作积木式地搭建 iPortal 首页。另外，当可视化定制系统无法满足您的定制需求时，iPortal 还提供了一种“全代码”的深度定制方式，允许用户对 iPortal 首页进行完全的重写。
深度定制 iPortal 首页的一般流程包括：页面内容开发、配置启用定制页面。
页面内容开发
页面内容实现的核心为开发一个首页所对应的 HTML 文件。您可以自行选用 Vue、React、Angular 等主流的前端开发框架或原生 JavaScript/JQuery 进行开发，具体的开发过程在此不作介绍，只需将您开发完成的工程放置在 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home 目录下即可。如果您不具备相应的前端开发经验，iPortal 提供了一个基于 Vue 的首页定制范例工程以指导您进行扩展开发。
iPortal 首页定制范例工程
如果您知晓前端开发的流程并具有相应的开发经验，可选择略过该节内容。
针对缺乏前端开发经验的项目实施人员，为协助您进行扩展开发，iPortal 在 Gitee 上开源了一个首页定制范例工程，实现了三套不同的门户首页：
- iPortal 默认经典首页
- iPortal 深红主题首页
- “一张图”国土资源信息系统首页
图1 iPortal 深红主题首页
图2 “一张图”国土资源信息系统首页
该工程选用 Vue 技术栈进行开发，因此请您在开发前学习 Vue 的相关基础知识。下面简要介绍如何使用 iPortal 首页定制范例工程：
一、安装开发环境
请在扩展开发前安装好 Node.js 环境，这里推荐您安装 10.X 版本的 Node.js 以避免可能产生的兼容性问题。
二、抓取项目代码
在 Gitee 上下载 iPortal 示范工程代码至本地，其中 custom-home 文件夹为首页定制范例工程。以下是工程结构示意图：
根目录 custom-home：
部分关键文件（夹）说明如下：
- public：静态资源文件夹（如图片、svg 符号等）
- src：项目主体开发代码文件夹
- package.json：项目依赖描述文件
- vue.config.js：webpack 配置文件
其中 src 目录结构如下：
- components：首页组件类目录
- utils：工具方法目录
- DefHomePage.vue：iPortal 经典首页源代码文件
- DefHomePage1.vue：iPortal 深红主题首页源代码文件
- HomePage.vue：“一张图”国土资源信息系统首页源代码文件
- router.js：路由配置文件
utils 目录结构如下：
- HomePageUtil.js：首页工具方法文件
- RequestUtil.js：接口请求工具方法文件
三、启动示范工程项目
在 custom-home 目录下执行如下命令安装项目的依赖：
npm install
运行如下命令启动项目：
npm run serve
启动项目后，即可通过 http://<ip>:8080 访问首页，默认情况下访问的是“一张图”国土资源信息系统首页。您可以通过 router.js 文件中配置的路由访问其它两套首页，例如访问 iPortal 经典首页时，地址为：http://<ip>:8080/#/defhome。
四、进行定制开发
完成以上步骤后，您可以开始在 Vue.js 编辑器中编写代码：
- HomePage.vue、DefHomePage.vue、DefHomePage1.vue 为三套首页源代码，您可以基于其中任意一套门户首页进行二次开发，也可创建一个新的 Vue 文件，进行完全独立的页面开发。范例中内置的三套首页均选用了 iPortal Components 中的某些组件，iPortal Components 是 iPortal 提供的一个 Vue 组件库，封装了数种常用的 UI 组件，您在开发时可按需调用以提高开发效率，具体可参考：iPortal Components 入门
- components 目录下的多个 vue 文件为首页组件类文件，您可以修改这些文件以更改首页组件的默认属性信息
- HomePageUtil.js 为首页工具方法文件，您可以将自定义的工具方法写入到该文件中以供调用
- RequestUtil.js 为接口请求工具方法文件，您可以将向 iPortal 后端发送的请求写入到该文件中以供调用，点击这里查看 iPortal 完整的 REST API。
- router.js 为路由配置文件。通过该路由文件，可以为不同页面配置不同的路由地址，代码如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
const DefHomePage = () => import(/* webpackChunkName: "DefHomePage" */ './DefHomePage');
const DefHomePage1 = () => import(/* webpackChunkName: "DefHomePage1" */ './DefHomePage1');
const HomePage = () => import(/* webpackChunkName: "HomePage" */ './HomePage');
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/defhome',
name: 'defHome',
component: DefHomePage,
meta: {
title: '首页'
}
},
{
path: '/defhome1',
name: 'defhome1',
component: DefHomePage1,
meta: {
title: '首页'
}
},
{
path: '/home',
name: 'home',
component: HomePage,
meta: {
title: '首页'
}
},
]
})
export default router;
您可以通过更改 path 以改变自带的三套首页的路由地址；如果您是通过添加一个新的 Vue 文件进行完全独立的开发，则需要仿照已有内容，在文件头中引入创建的 Vue 文件并在 routes 数组中添加其对应的路由。
五、打包项目工程
代码编写完成并通过调试后，即可进行编译打包，执行如下命令进行编译：
npm run build
生成的 home-page 文件夹即为打包后的文件。
更多信息可以参阅首页定制开发指南。
配置启用定制页面
完成首页的定制开发后，需按以下步骤配置启用定制后的首页：
一、将打包后的工程文件夹放置在 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home 目录中
注意：iPortal 默认已将示范工程打包后的成果放置在产品包该路径下（ %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home\home-page ）以供您试用 ，您在自定义扩展开发完成后需将其替换为自己的工程。
二、修改扩展开发配置文件 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home\config.json ，将定制后的首页应用至 iPortal，config.js 代码如下：
{
"enable": true,
"useDefaultHeader": true,
"homeUrl": "{portalRoot}/resources/web-ui/extend/home/home-page/index.html"
}
- enable：是否启用自定义开发的 iPortal 首页。默认值：false，使用 iPortal 的默认首页。使用用户扩展开发的首页时，需要将该值设置为：true。
- userDefaultHeader：是否使用 iPortal 内置导航栏。默认值：true，使用 iPortal 的内置导航栏。iPortal 内置导航栏提供了登录与注册、各内置 WebApps、全局搜索等的入口，如果您将该值设置为 false，可在定制开发的首页中按需实现上述功能。
- homeUrl：定制的首页 HTML 文件路径。可以通过在其后添加 #path 值切换不同的首页，其中 path 为 router.js 文件中设置的路由。例如将 homeUrl 设置为 {portalRoot}/resources/web-ui/extend/home/home-page/index.html#/defhome1，将默认首页设置为 iPortal 深红主题首页。
修改并保存上述配置后，即可在 iPortal 中访问定制开发的首页。