3.9. 品牌

第 3.9.1 节 “branding Che-Theia”

3.9.1. branding Che-Theia

本章论述了如何自定义 Che-Theia 接口和品牌。可以对以下元素进行自定义：

欢迎页面 和关于对话框：
- 产品名称
- 产品徽标
- 描述
- 有用资源列表（ Welcome 页的Help 部分）

要使用自定义的 Che-Theia 启动：

使用自定义 Che-Theia 构建容器镜像。
定义使用自定义镜像的编辑器 meta.yaml。
使用自定义编辑器从 devfile 创建工作区。

3.9.1.1. 为 Che-Theia 定义定制品牌值

本节论述了如何自定义 Che-Theia 的基本品牌元素的定义。

流程

在 Welcome 页面（ product.json 示例）上创建一个包含产品、徽标、描述和超链接列表的 product.json 文件：

{
    "name": "Red Hat OpenShift Dev Spaces", 1
    "icon": "icon.png", 2
    "logo": { 3
        "dark": "logo-light.png",
        "light": "logo-dark.png"
    },
    "welcome": { 4
        "title": "Welcome to Your Workspace",
        "links": ["website", "documentation"]
    },
    "links": { 5
        "website": {
            "name": "Discover Red Hat OpenShift Dev Spaces",
            "url": "https://developers.redhat.com/products/openshift-dev-spaces/overview"
        },
        "documentation": {
            "name": "Browse Documentation",
            "url": "https://www.redhat.com/docs"
        }
    }
}

1: 名称 ：标签标题是 欢迎页面 和 About 对话框。
2: 图标 ： 欢迎页面 选项卡标题的图标。
3: 徽标: dark 的产品徽标和 Welcome 页（最大高度 80 像 80 像素）和 About 对话框（最大高度 100 像 100 像素）。使用具有透明背景的镜像。定义镜像的相对路径、绝对路径或 URL。
4: 欢迎：欢迎页面 的行为。自定义帮助部分中的邀请标题和链接。当未定义 welcome/links 属性时，Welcome 页面会显示 links 部分中的链接。
5: 链接 ：此产品的有用资源列表。使用标签对链接进行分组，使其更易于查找。

注意

对于 dark 和 light themes 只使用一个徽标镜像：

{
    ...
    "logo": "product-logo.png"
    ...
}

3.9.1.2. 构建具有自定义品牌的 Che-Theia 容器镜像

本节论述了如何构建具有应用自定义品牌的 Che-Theia 容器镜像。

先决条件

带有自定义品牌定义的 product.json 文件。

流程

下载 Dockerfile 示例。
在 Dockerfile 目录中，创建一个 品牌/ 子目录。将自定义 product.json 文件和徽标镜像放在 品牌/ 目录中。

使用 Che-Theia 构建容器镜像，并将镜像推送到容器 registry：

$ podman build -t username/che-theia-devspaces:next .
$ podman push username/che-theia-devspaces:next

3.9.1.3. 测试 Che-Theia with custom branding

本节论述了如何通过打开带有自定义品牌的新工作区来测试自定义的 Che-Theia。

先决条件

Che-Theia 容器镜像，使用自定义品牌定义构建。

流程

要测试自定义 Che-Theia 镜像，请创建一个描述自定义 cheEditor 的新 meta.yaml 文件，并在 devfile 中将它用于测试工作区。

克隆 che-plugin-registry 存储库，并检查要部署的版本。请参见：
administration-guide:examples/snip_devspaces-clone-the-plug-in-registry-repository.adoc
打开 che-editors.yaml 文件。
编辑 id 等于 eclipse/che-theia/next 条目，并替换 containers 部分中的 image 值以指向自定义 Che-Theia 容器镜像。
构建 registry：
administration-guide:examples/snip_devspaces-build-a-custom-plug-in-registry.adoc
进入 ./dependencies/che-plugin-registry/v3/plugins/eclipse/che-theia/next 目录。
将这个目录中的 meta.yaml 文件发布到一个公开访问的位置，该位置可作为 HTTP 资源使用。

使用 che-theia-branding-example devfile 示例创建一个工作区来应用更改。

验证 reference 字段是否指向您公布的 meta.yaml 文件：

metadata:
  name: che-theia-all
projects:
  - name: che-cheia-branding-example
    source:
      location: 'https://github.com/che-samples/che-theia-branding-example.git'
      type: git
      branch: master
components:
  - type: cheEditor
    reference: >-
      https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/che-editor.meta.yaml
apiVersion: 1.0.0