# a_门户模板定制
我们可以用集团管理员或单位管理员登录系统，进入V-Portal配置平台，分别对下述内容进行导入导出定制。
# 门户模板ZIP包介绍
进入【整体样式库】，选择“网站式信息门户”导出，如下图：
导出的ZIP包目录结构如下图所示：
- portal/images：该目录存放门户模板用到的所有图片文件；
- portal/pagelayout/layout/layout02：该目录存放门户布局相关文件，其中layout02为门户布局代码。这个目录下会存放3个文件：layout02_b.html、layout02_b.css和layout02_b.js。layout02_b.html文件为门户布局html文件，layout02_b.css为门户布局样式文件，layout02_b.js为该门户特有的JavaScript脚本。后面会对门户布局的概念进行专门介绍，在这里记住门户布局由1个html文件、1个css文件和1个js文件组成即可。门户布局html文件，只包含html内容，但在html的dom元素上会有致远门户自定义属性，以layout02_b.html为例，内容如下：
注意：主要是红色框中的内容, 标识门户头部区class='seeyon-portal-header'；标识门户内容区:class='seeyon-portal-body'；标识门户元素分组:class='seeyonElementGroup'，门户元素分组中可以包含多个门户元素；标识门户元素:class='seeyonElement'，门户元素中的id和data-tpl两个属性必须指定，其中id的值必须保证唯一性，data-tpl的值必须跟门户元素的文件名相同，门户元素包含哪些内容，后面马上会介绍到
portal/pagelayout/element：该目录存放门户元素相关文件，每个门户元素包含3个文件：1个html文件、1个js文件、1个css文件。例如幻灯片元素tpl-slideVPortal.html、tpl-slideVPortal.js、tpl-slideVPortal.css。 门户元素的这三个文件要求必须以tpl-开头，除了后缀不通外，文件名称必须相同。 门户元素html文件需要符合laytpl前端模板引擎规范。例如tpl-slideVPortal.html内容如下：
注意：上面文件内容中 <script id="tpl-slideVPortal" type="text/html"> ，id必须跟文件名称保持一致
门户元素js文件，需要按照门户规范实现，以tpl-slideVPortal.js文件为例，内容如下图所示：
vPortalMainFrameElements.slideVPortal = {
config: true, // 标识该门户元素是否可以在门户设计器中对元素属性进行设置：true标识可以， false标识不>可以
getData: function() {
// 此方法需要返回一个json格式的数据， 数据格式必须与tpl-slideVPortal.html中使用的数据结构匹>配，如果元素不需要在tpl中渲染， 可以**return** false或者不写getData。
},
afterInit: function(_domId) {
// _domID为门户元素在门户中惟一dom标识
},
getProp: function (_dataJson){
// 在门户设计器中可配置的属性
// 此方法需要返回一个Json格式数据， 数据格式见《附录2：门户属性配置Json数据格式》
},
onPropChange: function(json, id, key, value){
// 在门户设计器使用，在门户元素属性发生变化时，会调用此方法，但注意止方法不需要对数据进行持>久化
},
saveProp: function(){
// 保存门户元素属性值， 注意此方法需要对数据进行持久化,例如保存到数据库中
}
}
门户元素css文件，主要对门户元素的外观进行配置，需要按照CSS规范实现，且这些css样式只能在tpl-slideVPortal.html文件中用到，以tpl-slideVPortal.css文件为例，内容如下图所示：
- portal/pagelayout/skin：该目录存放门户模板样式CSS文件，这个文件内容遵循CSS标准。
- portal/sections/skin：该目录存放门户栏目外框样式CSS文件，这个文件内容遵循CSS标准。
- skin/dist/components：该目录存放二级页面样式CSS文件，这个文件内容遵循CSS标准。
- upload：该目录存放导出的门户模板中包含的图片文件。
- import.xml：该文件为导入内容元数据描述文件，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<portal version="1.0" vendor="www.seeyon.com" type="0">
<theme>
<name>门户模板名称: 网站式信息门户</name>
<icon>门户模板图标: theme_pc_06.png</icon>
<layout>
... 门户模板布局 ...
</layout>
<skinSet>
<name>门户模板使用的整体皮肤名称: 曙光之晨</name>
<icon>门户模板使用的整体皮肤图标: skin_pc_06.png</icon>
<mainSkin>
... 门户模板使用的主样式风格 ...
</mainSkin>
<sectionSkin>
... 门户模板使用的栏目外框样式 ...
</sectionSkin>
<componentSkin>
... 门户模板使用的二级页面组件样式 ...
</componentSkin>
<iconSkin>
... 门户模板使用的图标风格 ...
</iconSkin>
<echartStyle>
... 门户模板使用的图表风格 ...
</echartStyle>
</skinSet>
<elements>
... 门户模板含有的元素集合 ...
</elements>
<hotspots>
... 门户模板热点数据 ...
</hotspots>
</theme>
</portal>
从上面的内容可以看出：
(1) portal根标签表示一个门户模板，这个标签下的标签表示门户模板的名称，注意门户名称不能含有特殊字符，标签表示门户模板的图标，它的值是一个图片文件名称，这个图片文件必须放到前面提到的portal/images目录下；为门户模板中CSS、JS和HTML文件中直接引用的图片资源文件路径。
(2) layout这个标签中定义门户模板使用的布局文件，这个标签包含的定义内容如下：
<layout>
<code>layout02</code>
<styleCode>layout02_b</styleCode>
<icon>layout02_b.jpg</icon>
<name>layout02</name>
</layout>
标签中的内容为门户模板布局唯一标识，这个值必须与ZIP包中的路径portal/pagelayout/layout/layout02中的layout02目录名称保持一致，注意这里layout02只是一个例子，也可以是其它英文标识。标签中的内容为门户布局特定样式标识，且也必须唯一，这个值必须与ZIP包中的路径portal/pagelayout/layout/layout02目录下的文件名称相同。 标签中的内容为门户模板的示意图标，这个值是一个图片文件名称，，这个图片文件必须放到前面提到的portal/images目录下。 标签中的内容为门户模板的名称，不能含有特殊字符，这里建议使用与标签中相同的值。
(3)：
- mainSkin标签中的内容为整体皮肤的主皮肤内容，这个标签下的name标签表示主皮肤的名称，注意主皮肤名称不能含有特殊字符。这个标签下的code标签内容标识主皮肤样式文件，必须与ZIP压缩包中portal/pagelayout/skin下的CSS文件名称保持一致。（注意：系统预制的门户模板导出的ZIP包中，这个文件名称跟code可能会不一样，但如果我们想修改这个文件内容，并将这个文件导入，则这个文件名称必须跟code保持一致）
- sectionSkin标签中的内容为整体皮肤的栏目外框样式内容，这个标签下的name标签表示栏目外框样式的名称，注意栏目外框样式名称不能含有特殊字符。这个标签下的code标签内容标识栏目外框样式文件，必须与ZIP压缩包中portal\sections\skin下的CSS文件名称保持一致。（注意：系统预制的门户模板导出的ZIP包中，这个文件名称跟code可能会不一样，但如果我们想修改这个文件内容，并将这个文件导入，则这个文件名称必须跟code保持一致）,icon标签表示整体皮肤的示意图标，它的值是一个图片文件名称，这个图片文件必须放到前面提到的portal/images目录下。
- componentSkin标签中的内容为整体皮肤的栏目外框样式内容，这个标签下的name标签表示栏目外框样式的名称，注意栏目外框样式名称不能含有特殊字符。这个标签下的code标签内容标识栏目外框样式文件，必须与ZIP压缩包中portal\sections\skin下的CSS文件名称保持一致。（注意：系统预制的门户模板导出的ZIP包中，这个文件名称跟code可能会不一样，但如果我们想修改这个文件内容，并将这个文件导入，则这个文件名称必须跟code保持一致）
- iconSkin标签中的内容为整体皮肤的图标风格，这个标签下的name标签表示图标风格的名称，注意图标风格名称不能含有特殊字符。这个标签下的code标签内容标识图标风格：0标识线性；1标识面型，目前系统只支持这两种类型的图标风格。（如果输入其他内容，则系统图标风格将出现问题）
- echartStyle标签中的内容为整体皮肤的图表风格，这个标签下的name标签表示图表风格的名称。这个标签下的code标签内容标识图表风格。code和name的值要求有对应关系，系统只支持下表中的图表风格（如果输入其他内容，则系统图标风格将出现问题）
(4)elements标签表示门户模板中的门户元素集合，这个标签下包含一个或多个标签。每个标签有code和name两个字标签。code标签的值必须与ZIP压缩包中portal/pagelayout/element下的存在对应的三个文件：tpl-xxxx.html、tpl-xxxx.js、tpl-xxxx.css。
(5)hotspots：标签表示门户模板中的热点数据集合，这个标签下包含一个或多个标签。每个标签有key和value两个字标签。key标签的值标识某个热点，value是热点数据，热点数据的格式为JSON，JSON数据中含有的数据跟具体热点有关，这里不做详细说明。
最后附上一个完整的import.xml文件，如下图所示：
# 可以定制化的内容
- 修改门户模板的布局
- 修改门户模板的主皮肤
- 修改门户模板的栏目外框样式
- 修改门户模板的二级页面组件样式
- 修改门户模板的图标风格
- 修改门户模板的图表风格
- 新增门户元素
- 去掉门户元素，例如去掉幻灯片元素。
上面列出的可定制化内容，1、2、3、4主要是修改css文件内容或者是热点数据中的某个热点值来实现，这个比较简单，不做详细说明；5和6是指定一个风格即可，也比较简单。对于7这种情况来说稍微复杂点，但代码开发工作也并不大，关键是遵循我们前面介绍的内容进行扩展。
# 举个例子
下面以一个具体例子来说明：比如我们要把现有【网站式信息门户】门户模板的幻灯片元素替换为一个新元素，为了降低学习门槛，我们还是以helloworld作为入门例子，假设这个元素我们叫做helloworld，元素代码为tpl-helloworld，这个门户元素的展现效果为只输出一个文本hello world！
开发步骤：
第一步：解压导出的门户ZIP包； 第二步：在目录portal/pagelayout/element中新建门户元素的三个文件：tpl-helloworld.html、tpl-helloworld.js、tpl-helloworld.css。内容分别如下所示： tpl-helloworld.html文件的内容如下：
<script id="tpl-helloworld" type="text/html"> <div class="helloworld" onclick="vPortalMainFrameElements.helloworld.showMessage();" title="{{ d.name }}" >{{ d.name }} {{ d.age }}</div></script>
tpl-helloworld.js文件的内容如下：
vPortalMainFrameElements.helloworld = {
config: true,
//获取数据
getData: function() {
return {
name: 'Jully',
age: '20'
}
},
//初始化，元素如果有初始化的事件请写在这里面
init: function(_elementId) {
return;
},
//设计器中获取可设置属性
getProp : function(_dataJson){
window.parent.changeRightTitle("hello world 设置");
return {};
},
showMessage: function () {
alert("hello!")
}
}
tpl-helloworld.css文件的内容如下：
.helloworld {
color:red;
text-align:center;
}
第三步：修改门户布局html文件layout02_b.html，将helloworld元素绑定到门户模板布局上，内容如下图红框中的内容：
第四步：修改门户布局文件名称，将layout02_b.html修改为layout02_001.html，将layout02_b.js修改为layout02_001.js，将layout02_b.css修改为layout02_001.css，修改后的文件如下图所示：
第五步：修改import.xml文件中的下述helloworld相关部分的内容：
<?xml version="1.0" encoding="UTF-8"?>
<portal version="1.0" vendor="www.seeyon.com" type="0">
<theme>
<name>helloworld门户</name>
<icon>helloworld.jpg</icon>
<layout>
<code>layout02</code>
<styleCode>layout02_001</styleCode>
<icon>layout02_b.jpg</icon>
<name>layout02</name>
</layout>
<elements>
<element>
<code>tpl-wideLogo</code>
<name>宽尺寸的单位logo元素</name>
</element>
<element>
<code>tpl-concurrentAccount</code>
<name>兼职单位元素</name>
</element>
<element>
<code>tpl-topRightsystemOperation</code>
<name>顶部系统操作按钮元素</name>
</element>
<element>
<code>tpl-miniNav</code>
<name>顶部极简版导航-包含门户、空间、菜单、第三方系统、项目空间等</name>
</element>
<element>
<code>tpl-helloworld</code>
<name>helloworld</name>
</element>
<element>
<code>tpl-showNavSpaceMenu</code>
<name>导航-空间下的菜单,当鼠标hover至空间时展现</name>
</element>
<element>
<code>tpl-messageBottom</code>
<name>底部弹出的消息盒子</name>
</element>
......
注意：helloworld.jpg为我们自己找的一张图片，作为我们这个新的门户模板的示例图标，需要放到目录portal/images下。
第六步：重新打包成ZIP包，文件名称无特殊要求。假设我们的压缩包名称为“portal_template.zip”，双击打开后，显示应该如下图所示， 所有文件都是压缩包根目录下，否则会导入时会报错：
第七步：以集团管理员或单位管理员登录系统，将ZIP导入门户模板。
至此，门户模板定制完毕，效果如下
← 10 注册门户模板热点 b_栏目布局定制 →
