首页定制

发送反馈


iPortal 首页的头部(header)、内容(body)、底部(footer)均支持可视化定制。其中头部和底部作用于门户全站。

 

 

以管理员身份登录 iPortal 后,进入“首页”>“管理”>“站点配置”>“站点定制”,点击“首页定制”链接,或直接访问 http://<server>:<port>/iportal/web-ui/home/edit,即可进入首页编辑界面。此时,首页内容均以编辑状态展示,您可所见即所得地移动、编辑、删除组件。点击左侧的齿轮图标,展开的侧边栏面板支持首页国际化定制、开启预览、常规内容设置、及从布局构建器添加组件到右侧编辑区、恢复默认设置和保存。完成首页定制并确认保存后,您可以点击页面左上角的门户 Logo,退出首页定制模式。注意您在进行首页定制时,首页国际化定制默认选中的是中文,即默认是定制中文环境下的首页内容。下面详细介绍各项设置。

常规内容

在首页编辑界面,点击左上角的齿轮,在展开的侧边栏中点击“常规内容”设置如下各项内容。设置完成后点击下方的“确定”按钮,界面右侧编辑面板即会更新修改项。也可点击侧边栏右上角的全局保存按钮进行保存。

门户Logo

iPortal 提供了默认 Logo,你可以通过“上传Logo”进行更改,图片要求 gif、png 或 jpg 格式,图片大小建议为 43px*43px。如果您更换 Logo 后,还想换回 iPortal 的默认Logo,点击“使用默认 Logo”按钮即可。

站点名称

定制门户的站点名称,如:地理信息共享平台,显示在“门户Logo”右侧。也可为空。

导航栏模式

提供了默认和天地图两种模式。切换为天地图模式,点击“确定”生效后,门户站点的 header 和 footer 均切换为天地图风格,此时在右侧界面编辑区可对 footer 组件可视化地编辑。

帮助文档

勾选或取消勾选“帮助文档”复选框,以控制站点头部右侧是否显示帮助文档链接。支持更改帮助文档路径

导航栏

在常规内容中,您可更改导航栏的模式。在界面编辑区支持编辑导航栏的内容。鼠标移动至导航栏组件,点击“编辑组件”按钮,打开导航栏编辑对话框,支持如下操作:

设置好后点击“保存”按钮,即可生效。

使用导航栏编辑能方便地集成项目自定义的栏目,如示例:自定义添加“开发中心”导航栏

布局和组件

布局设置

组件添加到右侧编辑区后,您可对该组件所在行进行12栅格布局,即1行按照12等分的原则进行划分。下面简单介绍下栅格布局的原理:

具体操作:

在右侧编辑区,鼠标悬停在具体组件所在行,会显示“编辑行”按钮,点击“编辑行”按钮,左侧会展开该组件所在行的布局构建器,即可进行布局设置。系统提供自适应自定义两种对齐方式,默认使用自适应对齐方式,即一行中组件与组件是等宽对齐的。您也可以选择自定义对齐方式,手动调整组件在一行中跨越的范围,即在“栅格布局”选项中,输入数值,以英文逗号(,)隔开,数值总和必须等于12,数值个数与组件数相等,一行中最多允许添加六个组件。

您还可以调整当前行与下一行的间距、当前行背景色(默认未打开)、设置行内组件以固定大小居中显示(默认行内组件随屏幕大小拉伸并居中显示)。

组件

在首页编辑界面,点击左上角的齿轮,在展开的侧边栏中点击“布局构建器”,可看到门户提供的组件,支持以单击或拖拽的方式添加至右侧编辑区,单行最多允许添加6个组件。添加到右侧编辑区中的组件默认使用了行布局,您将鼠标悬停在组件所在的行进行行布局设置;鼠标悬停在组件上,会显示编辑、删除和拖拽组件按钮,您可以编辑组件、移除组件、拖动组件调整布局。每行中多个组件之间可以左右互换位置,行与行之间可以上下互换位置。

横幅

该组件包含一张背景图,支持修改背景图上的标题、副标题、按钮文字及超链接。若标题、或描述、按钮文字等为空,横幅组件仅会显示背景图。

快捷链接

该组件包含图标、标题、描述和超链接。支持修改默认的图标、标题文字、描述内容和超链接地址。

快捷链接 2

功能及操作同上述快捷链接组件。仅使用了不同的排版风格。

资源卡片

热门资源组件,含标题、资源类别和各类资源的缩略图。支持修改标题文字、改变各类资源缩略图的排列方式,也支持显示或隐藏某类资源。

资源卡片 2

功能及操作同上述资源卡片组件。仅使用了不同的排版风格。

地图

地图组件允许添加天地图或门户中公开且可查看的地图,默认添加了天地图。添加地图方式:鼠标在地图组件上点击“编辑组件”,在左侧地图设置面板,选择要添加的地图类型、地图id、天地图密钥(如果门户地图使用了天地图作为底图,或选择的地图类型是天地图需填写)、组件高度、地图中心点的经纬度及地图级别。 注意:iPortal 默认提供了一个临时的天地图密钥,但是建议您单独申请一个用于实际生产环境中的正式密钥。

图标列表

默认包含六个列表项,每项包含图标及标题,且支持点击。您可增加或删除列表项,但最多能添加六项内容。每项内容支持上传新图标、修改标题文字和超链接地址。

内联框架

您可通过内联框架 iframe 方式内嵌第三方应用。支持修改该组件的高度和超链接地址。

标题

用于在门户首页添加文本标题和文本链接信息。支持修改标题文字、链接文本和超链接地址。

图片列表

默认是一个包含四张图片的列表组件。支持更改图片、图片的超链接,添加、删除图片。

图标内容

默认是一行两列,共三行内容的组件。每项包含图标、标题、描述及超链接。支持修改各项内容、添加新的列表项、删除列表项。添加新列表项后,组件按一行两列将新列表项添加到底部。

文本块

该组件包含文本标题、按钮及超链接。支持修改文本标题、按钮文字和超链接地址。

文本列表

该组件包含五列文本,每列包含标题、超链接和子文本项。支持修改组件的背景图、显示或隐藏每列文本、修改父列表和子列表项的标题和超链接地址。

新闻

该组件可设置标题名称、链接文本、超链接、新闻行数、新闻排序方式(最新、最多访问)和组件高度。当新闻行数所占的高度超过组件高度时,新闻条目自动以滚动方式显示。

卡片轮播

该组件可设置一组轮播的卡片,每张卡片由背景图片与字幕组成。支持设置组件的高度、播放方式、指示箭头与指示点等,还可对每张卡片单独设置背景图片、超链接、字幕内容以及布局样式。

文本

用于在首页中添加一段文本。支持修改文本的字体、字号、粗细、字形、对齐方式、行高、缩进、颜色等,支持为文本添加超链接。

视频

用于在首页中添加一段视频,支持设置视频的尺寸、播放方式、是否静音等,还可为视频添加控制条。

柱状图

用于在首页中添加一幅柱状图,提供的柱状图类型有常规柱状图、正方体柱状图、长方体柱状图、圆柱体柱状图,支持设置柱状图x轴、y轴的颜色、轴线、刻度、网格和标签等,支持设置图表内容的颜色、标签、高度、背景和内边距等。

条形图

用于在首页中添加一幅条形图,支持设置条形图x轴、y轴的颜色、轴线、刻度、网格和标签等,支持设置图表内容的颜色、标签、高度、背景和内边距等。

Footer

iPortal 提供了数套不同样式的 footer,可在左侧边栏的 Footer 样式选项卡中进行切换,不同样式的 footer 具有不同的设置项,可用于搭建各种风格的门户站点。

默认样式

iPortal 默认 footer 采用单行布局模式,适合较为简洁的门户站点搭建。

本样式设置项包括:

样式1

本样式设置项包括:内容宽度、Logo、二维码、下拉列表、文本链接、联系信息、备案信息、语言切换、版权信息等。切换到本样式后,可在右侧界面编辑区将鼠标悬停在 footer 所在位置,点击浮现的编辑按钮,对 footer 进行可视化的编辑。

样式2

本样式设置项包括:内容宽度、二维码、网站列表、联系信息、备案信息、语言切换、版权信息等。切换到本样式后,可在右侧界面编辑区将鼠标悬停在 footer 所在位置,点击浮现的编辑按钮,对 footer 进行可视化的编辑。

样式3

本样式为天地图风格,将导航栏模式切换为天地图样式后,footer 将随之自动切换为天地图样式且无法更换为其他样式。在右侧界面编辑区将鼠标悬停在 footer 所在位置,点击浮现的编辑按钮,可对天地图 footer 的内容进行可视化的编辑。

国际化

iPortal 默认支持中/英版的首页站点定制。默认首页定制选择的国际化定制语言选项是中文,您可切换为英文定制英文首页。若您有其他语言的定制需求,可先为门户站点进行多语言配置,配置完成重启 iPortal 后,首页编辑页面左侧边栏“首页国际化定制”下拉列表会列出新添加语言选项,选择要定制的站点语言,即可开始定制。注意:定制不同语言环境下的首页时,内容区(body)的组件是共用的,即在英文环境定制时删除了某个组件,中文环境首页也会删掉这个组件。不同语言环境下首页的头部(header)、底部(footer)中的内容项可以不一致。

保存和预览

首页定制完成后,可打开左侧面板的预览开关进行预览,点击面板右上角的“保存”按钮可进行保存发布。建议您在进行每个组件的编辑后,及时保存。注意:预览状态下不允许添加编辑、删除组件。

恢复默认设置

若您对定制效果不满意,希望恢复到 iPortal 默认站点模板时,可点击左侧面板右上角的“恢复默认设置”按钮,将首页还原至 iPortal 的默认状态。需要注意的是,还原默认设置后,您先前所做的所有更改均会丢失,建议您慎重操作。