Grot 指南
Grot 指南是嵌入在文档页面中的交互式指南,用户可以按照这些指南获取主题方面的帮助和指导,以及文档资源的指引。
guide
shortcode 将 Grot 指南嵌入到页面中。
{{< guide name="<NAME>" title="<TITLE>" text="<TEXT>" button="<BUTTON>" >}}
网站会在网站仓库的 content/guides
文件夹中查找 guide Markdown 文件。该 shortcode 接受以下参数
参数 | 描述 | 必需 |
---|---|---|
name | 网站 content/guides 文件夹中的 guide Markdown 文件名。 | 是 |
title | 用于覆盖默认指南标题的自定义指南标题。 | 否 |
text | 用于覆盖默认指南文本的自定义正文文本。 | 否 |
button | 用于覆盖默认指南按钮文本的自定义按钮文本。 | 否 |
如果您未设置自定义 title、text 和 button 值,指南介绍屏幕将使用以下默认文本
Grot 指南的结构
指南内容由 Markdown front matter 中的各种 YAML 结构组成,用于定义指南的 meta、header、welcome 和 screens。
Meta
meta 部分包含有关指南的通用信息。自定义 name
、api
和 title
字段,其余保持不变
name: <GUIDE NAME>
api: <GUIDE NAME>
title: <GUIDE TITLE>
type: guides
layout: single
_build:
render: false
list: true
Header
header 结构定义了指南的图片和图片间距。以下示例设置了 src
、alt
和图片尺寸
header:
image:
src: /media/guides/grafana-guides-whichgrafana-header.svg
alt: Grot metrics wizard
width: 221
height: 131
Welcome
一个指南需要一个 welcome 对象,使用 welcome
字段和以下属性定义
welcome:
type: welcome
title: <WELCOME TITLE>
body: <WELCOME BODY>
ctas:
- text: <CTA TEXT>
screen_id: <SCREEN ID TO LINK TO>
Screens
在 screens
字段下将后续屏幕定义为一个对象列表
screens:
- type: question
id: <UNIQUE SCREEN ID>
- type: result
id: <UNIQUE SCREEN ID>
Question
问答屏幕是决策树中的分支节点,提供一个或多个选项以跳转到后续屏幕。问答屏幕具有以下结构
screens:
- type: question
id: <UNIQUE SCREEN ID>
title: <SCREEN TITLE>
options:
- text: <OPTION TEXT>
screen_id: <SCREEN ID TO LINK TO>
Result
结果屏幕是决策树中的叶节点,以一个或多个链接结束。结果屏幕具有以下结构,并包含文档链接和播放链接的示例
screens:
- type: result
id: <UNIQUE SCREEN ID>
title: <SCREEN TITLE>
body: <SCREEN BODY>
links:
- type: docs
title: <LINK TITLE>
link_text: <LINK TEXT>
href: <ABSOLUTE DOCS LINK>
- type: play
title: <LINK TITLE>
link_text: <LINK TEXT>
href: <FULL GRAFANA PLAY LINK>