技术平台

# 门户

适用版本：V7.0及其以上版本

# 关于门户的定制方式

门户支持三种定制模式：基于门户设计器界面的定制、基于门户模板导入导出的定制和基于代码开发的定制。

  • 基于门户界面的定制：这种定制方式，主要通过设计器界面对门户的相关属性进行修改，比如门户模板样式、皮肤样式、栏目外框样式等，这种定制方式无需重启服务即可生效。
  • 基于导入导出的定制：这种定制方式，主要通过将门户组成的所有资源导出一个ZIP包，用户可以用WINRAR工具解开这个ZIP包，可以对相关的门户资源进行修改，然后重新打一个ZIP包，再重新导入系统中形成一个新的门户模板，这种定制方式也无需重启服务即可生效。
  • 基于代码开发的定制：这种定制方式，主要是开发人员通过遵循门户规范，去开发实现门户的各个组成部分，从而开发出一套新的门户模板。这种定制方式需要重启服务才能生效。

# 本手册包含的内容

本手册主要以具体例子来对第二种【基于导入导出的定制】和第三种【基于代码开发的定制】定制方式进行详细说明，以指导开发人员进行门户的定制开发实战。但可能会顺带介绍一些门户规范和原理，但不会对这块进行专门的介绍。​ 同时本手册也对门户对外提供的其它API如何使用也进行了说明。

# 对阅读者的要求

本手册主要面向开发人员，你需要熟练掌握如下开发知识和技术：

  • HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

  • CSS: 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

  • JAVASCRIPT：JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行预编译）。主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

  • JSON：JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation），是轻量级的文本数据交换格式。JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

  • LAYTPL：laytpl 是 JavScript 模板引擎，在字符解析上有着比较出色的表现，laytpl 的模板可与数据分离，集中把逻辑处理放在 View 层，提升代码可维护性，尤其是针对大量模板渲染的情况。

  • XML：XML 指可扩展标记语言(eXtensible Markup Language)。 XML 被设计用来传输和存储数据。

  • AJAX：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

  • JAVA：Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。Java可运行于多个平台，如Windows, Mac OS，及其他多种UNIX版本的系统。

上面列出来的是一个比较全面的门户开发知识和技术要求，是进行第3种门户定制开发必须具备的，但如果您只是进行第2种门户定制开发，不涉及新增门户后台数据接口，则掌握了上面提到的：HTML、CSS、JAVASCRIPT、JSON、LAYTPL、XML、AJAX即可。

# 开始定制开发

# 基于导入导出的定制

我们可以用集团管理员或单位管理员登录系统，进入V-Portal配置平台，分别对下述内容进行导入导出定制。

门户模板定制 门户模板ZIP包介绍 进入【整体样式库】，选择“网站式信息门户”导出，如下图：

1706671329684.png

1706671336374.png

1706671344532.png

1706671353682.png

1、portal/images：该目录存放门户模板用到的所有图片文件；

2、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文件组成即可。

对门户布局的解释

产品中自带了常见的门户布局，能够满足大部分需求，详细见《附录1：门户布局规范》。

开发建议：在定义门户布局时尽量使用产品自带的门户布局，在这个基础上在进行扩展，这样的好处是可以在门户设计器中对门户布局的各个区域的属性进行配置定义，例如门户布局中个区域的背景色和背景图片等。

通过门户布局规范可以知道，门户布局是指将门户页面划分为若干区域，如何划分门户区域，这个跟客户对门户的需求有关系，举个例子：比如客户希望单位LOGO和名称放在最上面靠左，退出按钮放在最右上角，菜单摆在单位LOGO和单位名称的下面，菜单内容下面为内容区。根据这个描述，我们可以将门户布局划分如下图所示：

1706671655635.png

门户布局html文件，只包含html内容，但在html的dom元素上会有致远门户自定义属性，以layout02_b.html为例，内容如下：

1706671677304.png

注意：主要是红色框中的内容：class=”seeyon-portal-header”标识门户头部区；class=” seeyon-portal-body”标识门户内容区；class=” seeyonElementGroup”标识门户元素分组，门户元素分组中可以包含多个门户元素；class=” seeyonElement”标识门户元素，门户元素中的id和data-tpl两个属性必须指定，其中id的值必须保证唯一性，data-tpl的值必须跟门户元素的文件名相同，门户元素包含哪些内容，后面马上会介绍到。

1、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内容如下：

1706671723217.png

注意：上面文件内容中