菜单
开源
最后评审日期:2024 年 8 月 29 日

Grot 指南

Grot 指南是嵌入在文档页面中的交互式指南,用户可以按照这些指南获取主题方面的帮助和指导,以及文档资源的指引。

guide shortcode 将 Grot 指南嵌入到页面中。

markdown
{{< 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 guide introduction screen with default copy

Grot 指南的结构

指南内容由 Markdown front matter 中的各种 YAML 结构组成,用于定义指南的 meta、header、welcome 和 screens。

Meta

meta 部分包含有关指南的通用信息。自定义 nameapititle 字段,其余保持不变

yaml
name: <GUIDE NAME>
api: <GUIDE NAME>
title: <GUIDE TITLE>
type: guides
layout: single
_build:
  render: false
  list: true

header 结构定义了指南的图片和图片间距。以下示例设置了 srcalt 和图片尺寸

yaml
header:
  image:
    src: /media/guides/grafana-guides-whichgrafana-header.svg
    alt: Grot metrics wizard
    width: 221
    height: 131

Welcome

一个指南需要一个 welcome 对象,使用 welcome 字段和以下属性定义

yaml
welcome:
  type: welcome
  title: <WELCOME TITLE>
  body: <WELCOME BODY>
  ctas:
    - text: <CTA TEXT>
      screen_id: <SCREEN ID TO LINK TO>

Screens

screens 字段下将后续屏幕定义为一个对象列表

yaml
screens:
  - type: question
    id: <UNIQUE SCREEN ID>

  - type: result
    id: <UNIQUE SCREEN ID>

Question

问答屏幕是决策树中的分支节点,提供一个或多个选项以跳转到后续屏幕。问答屏幕具有以下结构

yaml
screens:
  - type: question
    id: <UNIQUE SCREEN ID>
    title: <SCREEN TITLE>
    options:
      - text: <OPTION TEXT>
        screen_id: <SCREEN ID TO LINK TO>

Result

结果屏幕是决策树中的叶节点,以一个或多个链接结束。结果屏幕具有以下结构,并包含文档链接和播放链接的示例

yaml
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>