$ oc get -o yaml consolequickstart spring-with-s2i > my-quick-start.yaml
如果您正在为 OpenShift Container Platform Web 控制台创建快速入门教程,请遵循以下指南,以保持所有快速入门的一致用户体验。
快速入门是一个包含用户任务的引导式教程。在 Web 控制台中,您可以在**帮助**菜单下访问快速入门。它们对于熟悉应用程序、操作符或其他产品非常有用。
快速入门主要由任务和步骤组成。每个任务有多个步骤,每个快速入门有多个任务。例如
任务 1
步骤 1
步骤 2
步骤 3
任务 2
步骤 1
步骤 2
步骤 3
任务 3
步骤 1
步骤 2
步骤 3
当您与现有的快速入门教程交互时,这是预期的工作流程体验
在**管理员**或**开发者**视角下,单击**帮助图标**并选择**快速入门**。
单击快速入门卡片。
在出现的面板中,单击**开始**。
完成屏幕上的说明,然后单击**下一步**。
在出现的**检查您的工作**模块中,回答问题以确认您已成功完成任务。
如果您选择**是**,单击**下一步**继续执行下一个任务。
如果您选择**否**,请重复任务说明并再次检查您的工作。
重复上述步骤 1 到 6 以完成快速入门中的其余任务。
完成最终任务后,单击**关闭**以关闭快速入门。
快速入门包含以下部分
**卡片**: 提供快速入门基本信息的目录磁贴,包括标题、描述、时间承诺和完成状态
**简介**: 快速入门目标和任务的简要概述
**任务标题**: 快速入门中每个任务的超链接标题
**检查您的工作模块**: 用户在继续执行快速入门中的下一个任务之前,确认已成功完成任务的模块
**提示**: 帮助用户识别产品特定区域的动画
按钮
**下一步和上一步按钮**: 用于在快速入门每个任务的步骤和模块之间导航的按钮
最终屏幕按钮:用于关闭快速入门、返回快速入门中的先前任务以及查看所有快速入门的按钮
快速入门的主要内容区域包括以下部分
卡片文案
简介
任务步骤
模态框和应用内消息
检查您的工作模块
OpenShift Container Platform 引入了快速入门自定义资源,该资源由一个ConsoleQuickStart
对象定义。运营商和管理员可以使用此资源向集群贡献快速入门。
您必须拥有集群管理员权限。
要创建新的快速入门,请运行
$ oc get -o yaml consolequickstart spring-with-s2i > my-quick-start.yaml
运行
$ oc create -f my-quick-start.yaml
使用本文档中概述的指导更新 YAML 文件。
保存您的编辑。
要查看快速入门 API 文档,请运行
$ oc explain consolequickstarts
运行oc explain -h
以获取有关oc explain
用法的更多信息。
此部分帮助您直观地将快速入门自定义资源 (CR) 的部分与它们在 Web 控制台的快速入门中的显示位置进行映射。
...
summary:
failed: Try the steps again.
success: Your Spring application is running.
title: Run the Spring application
conclusion: >-
Your Spring application is deployed and ready. (1)
1 | 结论文本 |
结论显示在快速入门的最后一部分。
apiVersion: console.openshift.io/v1
kind: ConsoleQuickStart
metadata:
name: spring-with-s2i
spec:
description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.' (1)
...
1 | 描述文本 |
描述显示在快速入门页面上快速入门的介绍性标题中。
apiVersion: console.openshift.io/v1
kind: ConsoleQuickStart
metadata:
name: spring-with-s2i
spec:
description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.'
displayName: Get started with Spring (1)
durationMinutes: 10
1 | displayName 文本。 |
显示名称显示在快速入门页面上快速入门的介绍性标题中。
apiVersion: console.openshift.io/v1
kind: ConsoleQuickStart
metadata:
name: spring-with-s2i
spec:
description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.'
displayName: Get started with Spring
durationMinutes: 10 (1)
1 | durationMinutes 值(以分钟为单位)。此值定义快速入门应完成所需的时间。 |
durationMinutes 元素显示在快速入门页面上快速入门的介绍性标题中。
...
spec:
description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.'
displayName: Get started with Spring
durationMinutes: 10
icon: >- (1)
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMTUzZDNjO30uY2xzLTJ7ZmlsbDojZDhkYTlkO30uY2xzLTN7ZmlsbDojNThjMGE4O30uY2xzLTR7ZmlsbDojZmZmO30uY2xzLTV7ZmlsbDojM2Q5MTkxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+c25vd2Ryb3BfaWNvbl9yZ2JfZGVmYXVsdDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAxMi42OSw1OTNjLTExLjEyLTM4LjA3LTMxLTczLTU5LjIxLTEwMy44LTkuNS0xMS4zLTIzLjIxLTI4LjI5LTM5LjA2LTQ3Ljk0QzgzMy41MywzNDEsNzQ1LjM3LDIzNC4xOCw2NzQsMTY4Ljk0Yy01LTUuMjYtMTAuMjYtMTAuMzEtMTUuNjUtMTUuMDdhMjQ2LjQ5LDI0Ni40OSwwLDAsMC0zNi41NS0yNi44LDE4Mi41LDE4Mi41LDAsMCwwLTIwLjMtMTEuNzcsMjAxLjUzLDIwMS41MywwLDAsMC00My4xOS0xNUExNTUuMjQsMTU1LjI0LDAsMCwwLDUyOCw5NS4yYy02Ljc2LS42OC0xMS43NC0uODEtMTQuMzktLjgxaDBsLTEuNjIsMC0xLjYyLDBhMTc3LjMsMTc3LjMsMCwwLDAtMzEuNzcsMy4zNSwyMDguMjMsMjA4LjIzLDAsMCwwLTU2LjEyLDE3LjU2LDE4MSwxODEsMCwwLDAtMjAuMjcsMTEuNzUsMjQ3LjQzLDI0Ny40MywwLDAsMC0zNi41NywyNi44MUMzNjAuMjUsMTU4LjYyLDM1NSwxNjMuNjgsMzUwLDE2OWMtNzEuMzUsNjUuMjUtMTU5LjUsMTcyLTI0MC4zOSwyNzIuMjhDOTMuNzMsNDYwLjg4LDgwLDQ3Ny44Nyw3MC41Miw0ODkuMTcsNDIuMzUsNTIwLDIyLjQzLDU1NC45LDExLjMxLDU5MywuNzIsNjI5LjIyLTEuNzMsNjY3LjY5LDQsNzA3LjMxLDE1LDc4Mi40OSw1NS43OCw4NTkuMTIsMTE4LjkzLDkyMy4wOWEyMiwyMiwwLDAsMCwxNS41OSw2LjUyaDEuODNsMS44Ny0uMzJjODEuMDYtMTMuOTEsMTEwLTc5LjU3LDE0My40OC0xNTUuNiwzLjkxLTguODgsNy45NS0xOC4wNSwxMi4yLTI3LjQzcTUuNDIsOC41NCwxMS4zOSwxNi4yM2MzMS44NSw0MC45MSw3NS4xMiw2NC42NywxMzIuMzIsNzIuNjNsMTguOCwyLjYyLDQuOTUtMTguMzNjMTMuMjYtNDkuMDcsMzUuMy05MC44NSw1MC42NC0xMTYuMTksMTUuMzQsMjUuMzQsMzcuMzgsNjcuMTIsNTAuNjQsMTE2LjE5bDUsMTguMzMsMTguOC0yLjYyYzU3LjItOCwxMDAuNDctMzEuNzIsMTMyLjMyLTcyLjYzcTYtNy42OCwxMS4zOS0xNi4yM2M0LjI1LDkuMzgsOC4yOSwxOC41NSwxMi4yLDI3LjQzLDMzLjQ5LDc2LDYyLjQyLDE0MS42OSwxNDMuNDgsMTU1LjZsMS44MS4zMWgxLjg5YTIyLDIyLDAsMCwwLDE1LjU5LTYuNTJjNjMuMTUtNjQsMTAzLjk1LTE0MC42LDExNC44OS0yMTUuNzhDMTAyNS43Myw2NjcuNjksMTAyMy4yOCw2MjkuMjIsMTAxMi42OSw1OTNaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzY0LjE1LDE4NS4yM2MxNy44OS0xNi40LDM0LjctMzAuMTUsNDkuNzctNDAuMTFhMjEyLDIxMiwwLDAsMSw2NS45My0yNS43M0ExOTgsMTk4LDAsMCwxLDUxMiwxMTYuMjdhMTk2LjExLDE5Ni4xMSwwLDAsMSwzMiwzLjFjNC41LjkxLDkuMzYsMi4wNiwxNC41MywzLjUyLDYwLjQxLDIwLjQ4LDg0LjkyLDkxLjA1LTQ3LjQ0LDI0OC4wNi0yOC43NSwzNC4xMi0xNDAuNywxOTQuODQtMTg0LjY2LDI2OC40MmE2MzAuODYsNjMwLjg2LDAsMCwwLTMzLjIyLDU4LjMyQzI3Niw2NTUuMzQsMjY1LjQsNTk4LDI2NS40LDUyMC4yOSwyNjUuNCwzNDAuNjEsMzExLjY5LDI0MC43NCwzNjQuMTUsMTg1LjIzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUyNy41NCwzODQuODNjODQuMDYtOTkuNywxMTYuMDYtMTc3LjI4LDk1LjIyLTIzMC43NCwxMS42Miw4LjY5LDI0LDE5LjIsMzcuMDYsMzEuMTMsNTIuNDgsNTUuNSw5OC43OCwxNTUuMzgsOTguNzgsMzM1LjA3LDAsNzcuNzEtMTAuNiwxMzUuMDUtMjcuNzcsMTc3LjRhNjI4LjczLDYyOC43MywwLDAsMC0zMy4yMy01OC4zMmMtMzktNjUuMjYtMTMxLjQ1LTE5OS0xNzEuOTMtMjUyLjI3QzUyNi4zMywzODYuMjksNTI3LDM4NS41Miw1MjcuNTQsMzg0LjgzWiIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTEzNC41OCw5MDguMDdoLS4wNmEuMzkuMzksMCwwLDEtLjI3LS4xMWMtMTE5LjUyLTEyMS4wNy0xNTUtMjg3LjQtNDcuNTQtNDA0LjU4LDM0LjYzLTQxLjE0LDEyMC0xNTEuNiwyMDIuNzUtMjQyLjE5LTMuMTMsNy02LjEyLDE0LjI1LTguOTIsMjEuNjktMjQuMzQsNjQuNDUtMzYuNjcsMTQ0LjMyLTM2LjY3LDIzNy40MSwwLDU2LjUzLDUuNTgsMTA2LDE2LjU5LDE0Ny4xNEEzMDcuNDksMzA3LjQ5LDAsMCwwLDI4MC45MSw3MjNDMjM3LDgxNi44OCwyMTYuOTMsODkzLjkzLDEzNC41OCw5MDguMDdaIi8+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNNTgzLjQzLDgxMy43OUM1NjAuMTgsNzI3LjcyLDUxMiw2NjQuMTUsNTEyLDY2NC4xNXMtNDguMTcsNjMuNTctNzEuNDMsMTQ5LjY0Yy00OC40NS02Ljc0LTEwMC45MS0yNy41Mi0xMzUuNjYtOTEuMThhNjQ1LjY4LDY0NS42OCwwLDAsMSwzOS41Ny03MS41NGwuMjEtLjMyLjE5LS4zM2MzOC02My42MywxMjYuNC0xOTEuMzcsMTY3LjEyLTI0NS42Niw0MC43MSw1NC4yOCwxMjkuMSwxODIsMTY3LjEyLDI0NS42NmwuMTkuMzMuMjEuMzJhNjQ1LjY4LDY0NS42OCwwLDAsMSwzOS41Nyw3MS41NEM2ODQuMzQsNzg2LjI3LDYzMS44OCw4MDcuMDUsNTgzLjQzLDgxMy43OVoiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik04ODkuNzUsOTA4YS4zOS4zOSwwLDAsMS0uMjcuMTFoLS4wNkM4MDcuMDcsODkzLjkzLDc4Nyw4MTYuODgsNzQzLjA5LDcyM2EzMDcuNDksMzA3LjQ5LDAsMCwwLDIwLjQ1LTU1LjU0YzExLTQxLjExLDE2LjU5LTkwLjYxLDE2LjU5LTE0Ny4xNCwwLTkzLjA4LTEyLjMzLTE3My0zNi42Ni0yMzcuNHEtNC4yMi0xMS4xNi04LjkzLTIxLjdjODIuNzUsOTAuNTksMTY4LjEyLDIwMS4wNSwyMDIuNzUsMjQyLjE5QzEwNDQuNzksNjIwLjU2LDEwMDkuMjcsNzg2Ljg5LDg4OS43NSw5MDhaIi8+PC9zdmc+Cg==
...
1 | 定义为 base64 值的图标。 |
图标显示在快速入门页面上快速入门的介绍性标题中。
...
introduction: >- (1)
**Spring** is a Java framework for building applications based on a distributed microservices architecture.
- Spring enables easy packaging and configuration of Spring applications into a self-contained executable application which can be easily deployed as a container to OpenShift.
- Spring applications can integrate OpenShift capabilities to provide a natural "Spring on OpenShift" developer experience for both existing and net-new Spring applications. For example:
- Externalized configuration using Kubernetes ConfigMaps and integration with Spring Cloud Kubernetes
- Service discovery using Kubernetes Services
- Load balancing with Replication Controllers
- Kubernetes health probes and integration with Spring Actuator
- Metrics: Prometheus, Grafana, and integration with Spring Cloud Sleuth
- Distributed tracing with Istio & Jaeger tracing
- Developer tooling through Red Hat OpenShift and Red Hat CodeReady developer tooling to quickly scaffold new Spring projects, gain access to familiar Spring APIs in your favorite IDE, and deploy to Red Hat OpenShift
...
1 | 介绍部分介绍了快速入门并列出了其中的任务。 |
点击快速入门卡片后,会滑入一个侧面板,其中介绍了快速入门并列出了其中的任务。
所有快速入门都提供默认图标。您可以提供您自己的自定义图标。
找到要用作自定义图标的.svg
文件。
在 YAML 文件中,添加icon: >-
,然后在下一行中包含data:image/svg+xml;base64
,后跟 base64 转换的输出。例如
icon: >-
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld.
并非所有快速入门都应该对所有人可用。YAML 文件的accessReviewResources
部分提供了限制对快速入门访问的功能。
要仅在用户能够创建HelmChartRepository
资源时才允许用户访问快速入门,请使用以下配置
accessReviewResources:
- group: helm.openshift.io
resource: helmchartrepositories
verb: create
要仅在用户能够列出 Operator 组和包清单(从而能够安装 Operator)时才允许用户访问快速入门,请使用以下配置
accessReviewResources:
- group: operators.coreos.com
resource: operatorgroups
verb: list
- group: packages.operators.coreos.com
resource: packagemanifests
verb: list
在 YAML 文件的nextQuickStart
部分,提供要链接到的快速入门的name
,而不是displayName
。例如
nextQuickStart:
- add-healthchecks
使用这些标签以 Markdown 格式编写您的快速入门内容。Markdown 将转换为 HTML。
标签 | 描述 |
---|---|
|
定义粗体文本。 |
|
嵌入图像。 |
|
定义斜体文本。 |
|
定义删除线文本。 |
|
定义较小文本 |
|
定义较小文本。 |
|
定义强调文本。 |
|
定义重要文本。 |
|
定义锚点标签。 |
|
定义段落文本。 |
|
定义一级标题。 |
|
定义二级标题。 |
|
定义三级标题。 |
|
定义四级标题。 |
|
定义无序列表。 |
|
定义有序列表。 |
|
定义列表项。 |
|
将文本定义为代码。 |
|
定义预格式化文本块。 |
|
在文本中定义按钮。 |
高亮显示或提示功能使快速入门能够包含一个链接,该链接可以高亮显示和动画化 Web 控制台的组件。
Markdown 语法包含
带括号的链接文本
highlight
关键字,后跟要动画化的元素的 ID
[Home]{{highlight qs-nav-home}}
[Operators]{{highlight qs-nav-operators}}
[Workloads]{{highlight qs-nav-workloads}}
[Serverless]{{highlight qs-nav-serverless}}
[Networking]{{highlight qs-nav-networking}}
[Storage]{{highlight qs-nav-storage}}
[Service catalog]{{highlight qs-nav-servicecatalog}}
[Compute]{{highlight qs-nav-compute}}
[User management]{{highlight qs-nav-usermanagement}}
[Administration]{{highlight qs-nav-administration}}
[Add]{{highlight qs-nav-add}}
[Topology]{{highlight qs-nav-topology}}
[Search]{{highlight qs-nav-search}}
[Project]{{highlight qs-nav-project}}
[Helm]{{highlight qs-nav-helm}}
[Builds]{{highlight qs-nav-builds}}
[Pipelines]{{highlight qs-nav-pipelines}}
[Monitoring]{{highlight qs-nav-monitoring}}
[CloudShell]{{highlight qs-masthead-cloudshell}}
[Utility Menu]{{highlight qs-masthead-utilitymenu}}
[User Menu]{{highlight qs-masthead-usermenu}}
[Applications]{{highlight qs-masthead-applications}}
[Import]{{highlight qs-masthead-import}}
[Help]{{highlight qs-masthead-help}}
[Notifications]{{highlight qs-masthead-notifications}}
您可以自定义快速入门卡片的标题和描述,但无法自定义状态。
请将描述控制在一到两句话以内。
以动词开头,并传达用户的目标。 正确示例
Create a serverless application.
点击快速入门卡片后,会滑入一个侧面板,其中介绍了快速入门并列出了其中的任务。
请确保您的简介内容清晰、简洁、信息丰富且友好。
说明快速入门的预期结果。用户在开始之前应该了解快速入门的目的。
对用户进行操作指导,而不是对快速入门本身进行操作指导。
正确示例:
In this quick start, you will deploy a sample application to {product-title}.
错误示例:
This quick start shows you how to deploy a sample application to {product-title}.
简介最多应包含四到五句话,具体取决于功能的复杂性。冗长的简介可能会让用户感到不知所措。
在简介内容之后列出快速入门任务,并以动词开头每个任务。不要指定任务数量,因为每次添加或删除任务都需要更新文本。
正确示例:
Tasks to complete: Create a serverless application; Connect an event source; Force a new revision
错误示例:
You will complete these 3 tasks: Creating a serverless application; Connecting an event source; Forcing a new revision
用户点击**开始**后,会显示一系列他们必须执行才能完成快速入门的步骤。
撰写任务步骤时,请遵循以下一般准则
对于按钮和标签,使用“点击”。对于复选框、单选按钮和下拉菜单,使用“选择”。
使用“点击”代替“点击”。
正确示例:
Click OK.
错误示例:
Click on the OK button.
告诉用户如何在**管理员**和**开发者**视角之间导航。即使您认为用户可能已经处于适当的视角,也请提供相应的操作指导,确保他们到达所需的位置。
示例
Enter the Developer perspective: In the main navigation, click the dropdown menu and select Developer. Enter the Administrator perspective: In the main navigation, click the dropdown menu and select Admin.
使用“位置,操作”结构。在告诉用户做什么之前,先告诉他们去哪里。
正确示例:
In the node.js deployment, hover over the icon.
错误示例:
Hover over the icon in the node.js deployment.
保持产品术语大小写的一致性。
如果必须将菜单类型或列表指定为下拉菜单,请将“下拉菜单”写成一个词,不使用连字符。
清晰地区分用户操作和关于产品功能的其他信息。
用户操作:
Change the time range of the dashboard by clicking the dropdown menu and selecting time range.
附加信息:
To look at data in a specific time frame, you can change the time range of the dashboard.
避免使用方向性语言,例如“在右上角点击图标”。每次UI布局更改时,方向性语言都会过时。此外,针对桌面用户的指示可能对屏幕尺寸不同的用户不准确。相反,请使用其名称标识某个内容。
正确示例:
In the navigation menu, click Settings.
错误示例:
In the left-hand menu, click Settings.
不要仅通过颜色来识别项目,例如“点击灰色圆圈”。颜色标识符对视力受限的用户,尤其是色盲用户没有用。相反,请使用其名称或文本(例如按钮文本)来识别项目。
正确示例:
The success message indicates a connection.
错误示例:
The message with a green icon indicates a connection.
始终使用第二人称视角“您”。
正确示例:
Set up your environment.
错误示例:
Let's set up our environment.
有关语音和语调要求,请参阅PatternFly 的品牌语音和语调指南。
有关其他UX内容指南,请参阅PatternFly 的UX写作风格指南的所有部分。