自定义主题

<ph type="x-smartling-placeholder"></ph> 您正在查看 Apigee Edge 文档。
转到 Apigee X 文档
信息

主题背景是定义网站外观和风格的文件集合。通过 Developer Services 门户最初使用默认主题进行定义,您可以自定义该主题。 这样,您就可以根据需要选择门户外观和风格。更多 具体来说,您可以更改链接、背景、文字和其他主题元素的颜色。您 也可以更改开发者门户首页显示的欢迎辞。

您可以通过开发者门户界面自定义主题,也可以在自定义的 主题文件以替换默认主题文件。

<ph type="x-smartling-placeholder">

根据您的开发者门户版本,您将有多个主题可供选择 发件人:

主题 说明

Apigee 自适应主题

基于 Bootstrap 3, 新版本的门户此主题支持宽度从 768 像素到 1400 像素。此主题提供所有 Bootstrap 3 功能。

注意:要使用 Apigee 自适应主题背景,请确保引导加载程序 7.x-3.0 主题背景已启用。

Apigee DevConnect 主题

Apigee 自适应主题之前的默认门户主题。

现有门户可以升级到新的 Apigee 自适应主题,但必须先升级 确保所有块、模板和其他内容都与 Bootstrap 3 和 Bootstrap 7.x-3.0 主题已启用。

Apigee 基本主题

Apigee DevConnect 主题的父主题,不应用于其 。

设置默认主题

如果您的门户仍在使用旧版 Apigee DevConnect 主题,您可能会看到警告 形式为:

"Apigee DevConnect theme" is out of date 

您可以使用以下步骤为该门户设置默认主题。您应该 务必先在非生产系统上测试新主题,然后再将主题部署到 生产环境。

<ph type="x-smartling-placeholder">

如需设置默认主题,请执行以下操作

  1. 以拥有管理员或内容创建权限的用户身份登录门户。
  2. 在 Drupal 管理菜单中选择 Appearance。已启用的 主题。
  3. 对于您想用作默认主题背景,选择设为默认
    要使用 Apigee 自适应主题背景,请确保 Bootstrap 7.x-3.0 主题背景 该页面上也启用了这项功能
  4. 保存配置。

自定义 Apigee 自适应主题

本部分介绍如何配置 Apigee 自适应主题,包括:

  • 自定义模态表单
  • 自定义常规设置

如需自定义模态表单支持,请执行以下操作

该门户使用 Drupal 引导加载程序 模态表单沙盒模块,用于将 Drupal 表单显示为模态。登录和注册表单的 默认函数作为模态。您可以停用此功能,让这些表单显示为 各个页面

  1. 以拥有管理员权限的用户身份登录开发者门户。
  2. 选择配置 >界面 >引导加载程序模态表单, Drupal 管理菜单。
  3. 启用或停用表单的模态支持。
  4. 选择保存配置

要自定义 Apigee 自适应主题的常规设置,请执行以下操作

  1. 以拥有管理员或内容创建权限的用户身份登录门户。
  2. 在 Drupal 管理菜单中选择“Appearance”。已启用的主题背景列表 。
  3. 在页面的 Apigee 自适应(默认主题)区域中,选择 设置(请勿选择页面顶部的“设置”按钮)。
  4. 系统随即会显示 Apigee 自适应主题的设置页面。
  5. 下表介绍了该页面上可用于配置 主题。如果您更改了以上任何设置,请选择“保存配置”。

    领域 部分 说明

    引导设置

    组件

    控制面包屑导航的显示、主菜单的位置(称为 设置中的 Navbar),以及区域井的显示:

    • 面包屑导航:隐藏/显示面包屑导航,启用/停用首页链接 路径内。
    • Navbar:将导航栏(主菜单)的位置更改为 固定/静态/正常位置,使布局更具动态性。
    • 区域井:向网站上的任何区域添加井类, 为该区域添加颜色更深的背景。

    JavaScript

    控制锚点、弹出式窗口和提示的显示:

    • 锚点:修复锚点位置并实现流畅播放 滚动。
    • 弹出式窗口:弹出式窗口可在任意内容上添加 元素。启用/停用弹出式窗口,并配置弹出式窗口的使用方式。
    • 工具提示:配置提示的使用方式。您可以强制每个 显示在每个表单元素的右侧、左侧、顶部或底部的提示,并设置 其他显示选项。

    高级

    控制门户如何使用 BootstrapCDN 更新引导主题文件您可以停用对门户的依赖, BootstrapCDN,但之后必须提供自己的 Bootstrap 实现 框架。

    DevConnect 设置

    设置欢迎辞、默认颜色和显示的徽标大小 。

    覆盖全局设置

    切换显示模式

    允许和禁止显示入口的不同区域。

    徽标图片设置

    指定在主菜单中显示的图片。

    快捷方式图标设置

    指定浏览器地址栏中显示的图片或 打开该门户

自定义 Apigee DevConnect 主题

Apigee DevConnect 主题是旧版本门户的默认门户主题,并且 可以升级到新的 Apigee 自适应主题。不过,您必须先确保 在执行 升级。

自定义 Apigee DevConnect 的常规设置 主题

  1. 以拥有管理员或内容创建权限的用户身份登录门户。
  2. 选择外观 >Apigee DevConnect 主题 >设置 管理菜单。这会显示主题的初始设置。颜色设置 指定为十六进制值。

  3. 根据您的偏好更改设置。
    例如,添加或更改欢迎信息,或更改标头背景颜色。通过 标头背景颜色最初设置为接近橙色 (#FF4300)。您可以更改 更改为其他颜色,例如蓝色 (#0000FF)。
  4. 更改完设置后,点击保存

通过创建子主题来自定义主题

定义门户随附的默认主题的所有文件和资源都位于 profiles/apigee/themes 目录 安装在门户安装目录下。此目录位于 /var/www/html/profiles/apigee/themes 已将门户安装到默认位置。

要编辑主题以修改网站的外观和风格,请不要修改位于 profiles/apigee/themes。 否则,您下次升级门户时将覆盖您所做的更改。

您可以复制默认主题,为要修改的主题创建子主题 将文件复制到 /sites/all/themes 目录。有关子主题的说明,请参阅 Drupal 文档,请访问 https://www.drupal.org/node/225125

上面指定的 Drupal 文档包含有关创建子主题的详细信息, 但下面列出了创建 Apigee 自适应主题的子主题的常规步骤:
  1. 复制 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 文件夹 添加到 /sites/all/themes 文件夹中。
  2. 重命名 apigee_responsive_starterkit 文件夹 至 YOUR_THEME_NAME。
  3. apigee_responsive_starterkit.info 文件重命名为 YOUR_THEME_NAME.info。
  4. css/apigee_responsive_starterkit.css 重命名为 css/YOUR_THEME_NAME.css。
  5. js/apigee_responsive_starterkit.js 重命名为 YOUR_THEME_NAME.js。
  6. 编辑 YOUR_THEME_NAME.info 文件并替换以下行:

    stylesheets[all][] = css/apigee_responsive_starterkit.css
    脚本 [] = js/apigee_response_starterkit.js


    替换为:

    stylesheets[all][] = css/YOUR_THEME_NAME.css
    脚本 [] = js/YOUR_THEME_NAME.js
  7. 将 YOUR_THEME_NAME.info 文件中的主题名称从 Apigee 自适应入门套件更改为“您的主题” NAME。
  8. 如果您要为主题添加新的屏幕截图,请替换现有 screenshot.png 文件。
  9. 如果您想为主题添加新徽标,请替换现有 logo.png 文件。
  10. 如果您要为主题添加新的网站图标,请替换现有的 favicon.ico 文件。