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


您可以通过替换 Fuse Online 应用程序名称、徽标、图标和其他用户界面详情来重新品牌 Fuse Online。您可以在 syndesis-ui 部署文件中将自定义资源挂载为 ConfigMap 对象。

先决条件

  • Fuse Online 在客户管理的环境中安装并在 OpenShift Container Platform 上运行。
  • oc 客户端工具连接到安装 Fuse Online 的 OCP 集群。
  • 有安装 Fuse Online 的权限。

流程

  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,选择 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 - 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 部署文件。

结果

保存 syndesis-ui 部署文件会自动使用反映您的更改的用户界面重新部署 Fuse Online。Fuse Online 的后续重新部署也反映了您的更改。

Red Hat logoGithubRedditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务,以及可以信赖的内容,帮助红帽用户创新并实现他们的目标。

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情,请参阅红帽博客.

關於紅帽

我们提供强化的解决方案,使企业能够更轻松地跨平台和环境(从核心数据中心到网络边缘)工作。

© 2024 Red Hat, Inc.