第 8 章 重新品牌 Fuse 在线用户界面

流程

1. 通过调用以下命令，获取安装 Fuse Online 的 syndesis-ui pod 的名称：

   oc get pods

2. 通过运行以下命令来获取可自定义的徽标、图标、字体和背景，并将 SYNDESIS_UI_POD_NAME 替换为运行 syndesis-ui 的 pod 的实际名称：

   oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/static/media ~/

   这会将用户界面资源放在 ~/media/ 文件夹中。

3. 编辑 并保存包含标头徽标的文件，即 ~/media/syndesis_logo_full_darkbkg.9c467d96.svg。

4. 通过创建一个包含更新的徽标文件的 ConfigMap 对象，将修改的文件上传到集群：

   cd ~/
   oc create configmap syndesis-ui-custom-logo --from-file=media/syndesis_logo_full_darkbkg.9c467d96.svg

5. 修改 syndesis-ui 部署文件，以挂载 syndesis-ui-custom-logo ConfigMap 对象。通过调用 oc edit dc/syndesis-ui 或使用 OpenShift Web 控制台，选择 Applications > Deployments > syndesis-ui > Actions > Edit YAML 来完成此操作。

   1. 在 spec.template.containers.volumeMounts 下，添加以下内容：

      -name: syndesis-ui-custom-logo-volume
       mountPath: /opt/app-root/src/static/media/syndesis_logo_full_darkbkg.9c467d96.svg
       subPath: syndesis_logo_full_darkbkg.9c467d96.svg

   2. 在 spec.template.volumes 下，添加以下内容：

      -name: syndesis-ui-custom-logo-volume
       configMap:
        name: syndesis-ui-custom-logo

   3. 保存 syndesis-ui 部署文件。
6. 对位于 '~/media 文件夹中的每个文件以及您要自定义的每个文件重复步骤 3 到 5。

7. 编辑并保存包含应用程序标题的文件：

   1. 创建一个目录来更新该文件：

      mkdir ~/syndesis-custom/src

   2. 调用以下命令并将 SYNDESIS_UI_POD_NAME 替换为运行 syndesis-ui 的 pod 的实际名称来获取应用程序标题文件：

      oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/index.html ~/syndesis-custom/src

   3. 替换应用标题。例如：

      sed -i 's/<title>.*<\/title>/<title>NEW_TITLE<\/title>/g' ~/syndesis-custom/src/index.html

8. 通过创建一个包含更新文件的 ConfigMap 对象，将修改后的应用程序标题文件上传到集群：

   cd ~/syndesis-custom/src
   oc create configmap syndesis-ui-custom-index --from-file=index.html

9. 通过挂载 syndesis-ui - custom-index ConfigMap 对象来修改 syndesis-ui 部署：

   1. 在 spec.template.containers.volumeMounts 下，添加以下内容：

      -name: syndesis-ui-custom-vindex-olume
       mountPath: /opt/app-root/src/index.html
       subPath: index.html

   2. 在 spec.template.volumes 下，添加以下内容：

      -name: syndesis-ui-custom-index-volume
       configMap:
        name: syndesis-ui-custom-index

   3. 保存 syndesis-ui 部署文件。