教程：针对 Developer Portal 创建定制主题

通过生成子主题、配置 overrides.css 文件并安装新定制的主题，定制 Developer Portal 主页的外观。

在开始之前

您必须启用 Developer Portal，而且必须具有管理员访问权才能完成本教程。教程创建门户网站阐述如何启用门户网站（如果尚未启用）。

要点：不允许在创建的任何定制主题中包含任何 IBM® API Connect 代码。

关于此教程

创建定制主题的方法就是创建 Developer Portal 在缺省情况下使用的标准 API Connect 主题的定制子主题。子主题继承父主题的所有资源，然后您可以覆盖特定资源以配置必需的定制。

本教程将指导您完成以下课程：

创建子主题（使用主题生成器）。
定制 overrides.css 文件.
安装和启用定制主题.

创建子主题

以管理员身份登录到 Developer Portal。
如果不显示管理员仪表板，请单击管理来显示。
单击外观 > 生成子主题。这样会显示“生成子主题”窗口。
输入子主题名称，然后针对子主题类型选择 CSS。（如果您喜欢，可以选择 SCSS，但是此 CSS 扩展针对于高级主题开发者，本教程并未涵盖。）
选择子主题所基于的缺省模板。您可以基于颜色模板创建子主题，但是，对于本教程，我们将使用缺省的 connect_theme 模板。
单击生成。
将生成的子主题下载到选择的位置，并从 .zip 文件抽取所有文件。

定制 overrides.css 文件

在选中的编辑器中打开 overrides.css 文件（文件位于下载的子主题的 css 文件夹中）。

通过将以下元素输入到 overrides.css 文件，定制子主题：

/* Body of the home page */
body.path-frontpage.contexthome {
  color: #152935;
  background-color: #d1f0f7;
}

/* Header of the home page */
.navbar {
  background-color: #a0a0a0;
}

/* Footer of the home page */
footer.footer {
background-color: #dee0e2;}

footer.footer ul.nav > li > a {
color: #454A4C;}

保存 overrides.css 文件。

安装和启用定制主题

在完成更新 overrides.css 文件后，将所有主题文件压缩回最初下载的 .zip 子主题文件。
请注意，您还可以在主题文件中包含自己的定制徽标和收藏图标，然后在安装主题时它们将包含在主题中。这些文件必须分别使用命名约定 logo.svg 和 favicon.ico。您还可以在以后更改徽标和收藏图标，请参阅更改站点徽标和更改快捷方式图标。
在 Developer Portal 中，单击外观 > 安装新主题。这样会显示“安装新主题”窗口。
在上载要安装的模块或主题归档中，单击选择文件，然后选择新更新的压缩主题文件。
单击安装以将主题安装到站点。
单击启用新添加的主题，并在“禁用的主题”列表中查找新主题。单击启用并设置为缺省值以将新的定制子主题设置为站点的缺省主题。
通过单击屏幕左上角中的返回至站点，返回至 Developer Portal 主页。您现在可以查看自己的定制主题。

您在此教程中执行的操作

在此教程中，您完成了以下任务：

使用主题生成器创建了 Developer Portal 站点的子主题。
在子主题的 overrides.css 文件中配置了某些定制的主页元素。
在 Developer Portal 站点中上载并安装了定制主题。
成功定制了 Developer Portal 主页的外观。

上次更新时间：2019-06-21