陈真 发表于 2020-12-16 14:55:21

二次开发-调整门户-门户调整示例-改变门户显示风格

门户:如何使用改变门户显示风格在本操作方法中,默认的门户引导程序主题(组合菜单)将替换为在线上找到的另一个主题。
名称:如何变更引导程序主题
类型:[ ttps://www.itophub.io/wiki/page?id=type&dataflt%5B0%5D=type_%3DHow%20To]如何
听众:[ ttps://www.itophub.io/wiki/page?id=audience&dataflt%5B0%5D=audience_%3DAdministrator]管理员, [ ttps://www.itophub.io/wiki/page?id=audience&dataflt%5B0%5D=audience_%3DIntegrator]Integrator, [ ttps://www.itophub.io/wiki/page?id=audience&dataflt%5B0%5D=audience_%3DDeveloper]Developer
水平:[ ttps://www.itophub.io/wiki/page?id=level&dataflt%5B0%5D=level_%3DIntermediate]中等
持续时间:30分钟
关键词:[ ttps://www.itophub.io/wiki/page?id=keyword&dataflt%5B0%5D=keyword_%3DPortal]portal,[ ttps://www.itophub.io/wiki/page?id=keyword&dataflt%5B0%5D=keyword_%3DCustomization]Customization
iTop版本:[ ttps://www.itophub.io/wiki/page?id=itop_version&dataflt%5B0%5D=itop%20version_%3D2.3.0]2.3.0
先决条件您将需要:

[*]知道如何将iTop扩展和升级用作系统,
[*]装有安装了演示数据和增强门户的iTop系统,
[*]可以访问具有足够权利的账号来连接到门户(通常这意味着拥有门户用户描述)。


该教程的目的
在此教程中,您将学习如何:

[*]变更的门户引导程序主题以变更的外观为准,如以下多个屏幕截图所示:
https://www.itophub.io/wiki/media?w=800&tok=8d1c14&media=2_7_0%3Acustomization%3Asample-portal-changebstheme-0.png分步说明创建扩展

首先,我们需要创建一个iTop扩展,它将更改门户XML配置来定义要使用的主题。从自定义指南中检查扩展模块部分(iTop定制)(如有必要)。

[*]将该扩展命名为sample-portal-new-theme。
[*]删除main.sample-portal-new-theme.php文件,因为我们不需要任何PHP代码。

您应该具有以下结构:
https://www.itophub.io/wiki/media?w=300&tok=f82333&media=2_7_0%3Acustomization%3Asample-portal-changebstheme-2.png
选择一个新主题

现在已经进行了扩展,我们需要获得一个新的Bootstrap主题,它将替换Combodo。对于我们的示例,我们将使用来自bootswatch.com 但是您可以使用任何与Bootstrap 3兼容的主题。
去bootswatch.com,下载预编译的css文件 并将其放入新扩展名的文件夹中。
您应该具有以下结构:
https://www.itophub.io/wiki/media?w=300&tok=9370ce&media=2_7_0%3Acustomization%3Asample-portal-changebstheme-3.png
请注意,Bootstrap模板与Bootstrap主题不同。 Bootstrap模板更加复杂,因为它不仅更改CSS样式,而且更改HTML标记。有关如何为门户使用新的Bootstrap模板的信息,请检查此其他示例扩展(https://www.itophub.io/lib/images/smileys/fixme.gif)
更改门户配置

现在我们有了新的主题,我们只需要制作一个XML增量,并使用变更和门户配置即可。打开datamodel.sample-portal-new-theme.xml文件并粘贴以下代码:
[ ttps://www.itophub.io/wiki/page?do=export_code&id=2_7_0%3Acustomization%3Aportal_howto_changebstheme&codeblock=0]datamodel.sample-portal-new-theme.xml


<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="2001/XMLSchema-instance" version="1.3">
<module_designs>
    <module_design id="itop-portal" xsi:type="portal">
      <properties>
      <themes>
          <theme id="bootstrap" _delta="define_if_not_exists">sample-portal-new-


theme/css/bootstrap.min.css</theme>
      </themes>
      </properties>
    </module_design>
</module_designs>
</itop_design>gn>


这将主题节点添加到门户。只需确保包含扩展名和文件名的路径与系统上的路径相同,即可进入最后一步。
升级系统

最后,运行iTop系统的升级,并选中新扩展名选项,然后访问门户。
等等!
https://www.itophub.io/wiki/media?w=800&tok=87d066&media=2_7_0%3Acustomization%3Asample-portal-changebstheme-5.png资料下载


您可以在此处找到一些示例主题的扩展:sample-portal-new-theme-1.0.1-147.zip

页: [1]
查看完整版本: 二次开发-调整门户-门户调整示例-改变门户显示风格