自定义主题

您正在查看的是 Apigee Edge 文档。
转到 Apigee X 文档。 信息

主题背景是定义网站外观和风格的一系列文件。开发者服务门户最初定义了一个默认主题，不过您可以自定义该主题。这样，您就可以选择门户外观和风格的偏好设置。更具体地说，您可以更改链接、背景、文本和其他主题元素的颜色。您还可以更改显示在开发者门户首页上的欢迎辞。

您可以通过开发者门户界面自定义主题背景，也可以在自定义主题背景文件中编写代码以替换默认主题背景文件。

根据开发者门户的版本，有多个主题可供选择：

主题 说明

Apigee 自适应主题

基于引导加载程序 3，这是门户后续版本的默认主题。此主题支持宽度介于 768 像素到 1400 像素之间的设备。所有 Bootstrap 3 功能在此主题中均可用。

注意：如需使用 Apigee 自适应主题，请确保已启用引导加载程序 7.x-3.0 主题。

Apigee DevConnect 主题

默认门户主题，位于 Apigee 自适应主题之前。

现有门户可以升级到新的 Apigee 自适应主题，但必须先确保所有块、模板和其他内容均与引导加载程序 3 兼容，并且已启用引导加载程序 7.x-3.0 主题。

Apigee 基础主题

Apigee DevConnect 主题的父级主题，不可单独使用。

设置默认主题

如果您的门户仍在使用旧版 Apigee DevConnect 主题，您可能会看到以下形式的警告：

"Apigee DevConnect theme" is out of date

您可以通过以下步骤设置门户的默认主题。请务必先在非生产系统上测试新主题，然后再将该主题部署到生产环境中。

如需设置默认主题，请按以下步骤操作：

  1. 以拥有管理员或内容创建权限的用户身份登录门户。
  2. 在 Drupal 管理菜单中选择 Appearance。系统会显示已启用的主题背景的列表。
  3. 针对要设为默认主题的主题，选择设为默认主题。
    如需使用 Apigee 自适应主题背景，请确保在该页面上也启用了 Bootstrap 7.x-3.0 主题背景。
  4. 保存配置。

自定义 Apigee 自适应主题

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

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

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

该门户使用 Drupal Bootstrap Modalforms 沙盒模块来将 Drupal 表单显示为模态。默认情况下，登录和注册表单用作模态。您可以停用此功能，使这些表单改为以单个页面的形式显示。

  1. 以拥有管理员权限的用户身份登录开发者门户。
  2. 在 Drupal 管理菜单中，依次选择配置 > 界面 > 引导模态窗口表单。
  3. 启用或停用表单的模态支持。
  4. 选择保存配置。

如需自定义 Apigee 自适应主题的常规设置，请执行以下操作：

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

    面积图 部分 说明

    引导设置

    组件

    控制面包屑导航的显示、主菜单的位置（在设置中称为 Navbar）以及区域井的显示：

    • 面包屑导航：隐藏/显示面包屑导航，开启/关闭面包屑导航中的“首页”链接。
    • Navbar：将 Navbar（主菜单）的位置更改为固定/静态/正常位置，使布局更具动态性。
    • 区域 Wells：向网站上的任何区域添加 Well 类，以向该区域添加颜色更深的背景。

    JavaScript

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

    • 锚点：固定锚点位置并启用平滑滚动。
    • 弹出式窗口：弹出式窗口可以向任何元素添加小型内容叠加层。启用/停用弹出式窗口并配置使用弹出式窗口的方式。
    • 工具提示：配置提示的使用方式。您可以强制每个提示显示在每个表单元素的右侧、左侧、顶部或底部，并设置其他显示选项。

    高级

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

    DevConnect 设置

    设置欢迎辞、默认颜色以及主菜单中显示的徽标大小。

    替换全局设置

    显示/隐藏状态

    启用和停用门户不同区域的显示。

    徽标图片设置

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

    快捷方式图标设置

    指定在浏览器的地址栏中显示的图片，或指定门户的书签的图片。

自定义 Apigee DevConnect 主题

Apigee DevConnect 主题是旧版门户的默认门户主题，可以升级到新的 Apigee 自适应主题。但是，在执行升级之前，您必须先确保所有块、模板和其他内容与引导加载程序 3 兼容。

如需自定义 Apigee DevConnect 主题的常规设置，请执行以下操作：

  1. 以拥有管理员或内容创建权限的用户身份登录门户。
  2. 在 Drupal 管理菜单中，依次选择 Appearance > Apigee DevConnect theme > Settings。这会显示主题的初始设置。颜色设置以十六进制值的形式指定。

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

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

定义门户附带的默认主题的所有文件和资源均位于门户安装目录下的 profiles/apigee/themes 目录中。如果您已将门户安装在默认位置，则此目录位于 /var/www/html/profiles/apigee/themes。

如需通过修改主题来修改网站的外观和风格，请勿直接修改 profiles/apigee/themes 下的主题文件，否则，在您下次升级门户时，您所做的更改将被覆盖。

而应创建要修改的主题的子主题，方法是将默认主题文件复制到 /sites/all/themes 目录。如需查看子主题的说明，请参阅位于 https://www.drupal.org/node/225125 的 Drupal 文档。

上面指定的 Drupal 文档详细介绍了如何创建子主题，但下面列出了创建 Apigee 自适应主题的子主题的一般步骤：
  1. 将 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 文件夹复制到 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 文件夹。
  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_response_starterkit.css
    scripts[] = js/apigee_response_starterkit.js

    替换为：

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