第 8 章 重新品牌 Fuse 在线用户界面
您可以通过替换 Fuse Online 应用程序名称、徽标、图标和其他用户界面详情来重新品牌 Fuse Online。您可以在 syndesis-ui
部署文件中将自定义资源挂载为 ConfigMap
对象。
先决条件
- Fuse Online 在客户管理的环境中安装并在 OpenShift Container Platform 上运行。
-
oc
客户端工具连接到安装 Fuse Online 的 OCP 集群。 - 有安装 Fuse Online 的权限。
流程
运行以下命令,获取安装 Fuse Online 的
syndesis-ui
pod 的名称:oc get pods
通过调用以下命令来获取可自定义的徽标、图标、字体和背景,并将 SYNDESIS_UI_POD_NAME 替换为运行
syndesis-ui
的 pod 的实际名称:oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/static/media ~/
这会将用户界面资源放在
~/media/
文件夹中。-
编辑并保存包含标头徽标的文件,即
~/media/syndesis_logo_full_darkbkg.9c467d96.svg
。 通过创建包含更新的徽标文件的
ConfigMap
对象,将修改的文件上传到集群:cd ~/ oc create configmap syndesis-ui-custom-logo --from-file=media/syndesis_logo_full_darkbkg.9c467d96.svg
修改
syndesis-ui
部署文件,以挂载syndesis-ui-custom-logo
ConfigMap
对象。通过调用oc edit dc/syndesis-ui
,选择 Applications > Deployments > syndesis-ui > Actions > Edit YAML 来完成此操作。在
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
在
spec.template.volumes
下,添加以下内容:-name: syndesis-ui-custom-logo-volume configMap: name: syndesis-ui-custom-logo
-
保存
syndesis-ui
部署文件。
-
对位于
'~/media
文件夹和您要自定义的每个文件重复步骤 3 到 5。 编辑并保存包含应用程序标题的文件:
创建要更新该文件的目录:
mkdir ~/syndesis-custom/src
通过调用以下命令来获取应用程序标题文件,并将 SYNDESIS_UI_POD_NAME 替换为运行
syndesis-ui
的 pod 的实际名称:oc rsync SYNDESIS_UI_POD_NAME:/opt/app-root/src/index.html ~/syndesis-custom/src
替换应用标题。例如:
sed -i 's/<title>.*<\/title>/<title>NEW_TITLE<\/title>/g' ~/syndesis-custom/src/index.html
通过创建包含更新文件的
ConfigMap
对象,将修改后的应用程序标题文件上传到集群:cd ~/syndesis-custom/src oc create configmap syndesis-ui-custom-index --from-file=index.html
通过挂载
syndesis-ui
-index
部署:ConfigMap
对象来修改 syndesis-ui在
spec.template.containers.volumeMounts
下添加以下内容:-name: syndesis-ui-custom-vindex-olume mountPath: /opt/app-root/src/index.html subPath: index.html
在
spec.template.volumes
下,添加以下内容:-name: syndesis-ui-custom-index-volume configMap: name: syndesis-ui-custom-index
-
保存
syndesis-ui
部署文件。
结果
保存 syndesis-ui
部署文件会自动使用反映您的更改的用户界面重新部署 Fuse Online。Fuse Online 的后续重新部署也反映了您的更改。