Schritt-für-Schritt-Anleitung zur Markdown-Referenz

Cloud Shell-Anleitungen werden auch als Schritt-für-Schritt-Anleitungen bezeichnet und geben Nutzern die Möglichkeit, sich schnell und effektiv in Ihr Projekt einzuarbeiten. Diese Anleitungen lassen sich einfach einrichten und anwenden. Eine Schritt-für-Schritt-Anleitung für Cloud Shell besteht aus einer Reihe von Anweisungen, die in CommonMark-Markdown geschrieben wurden. Eine solche Sammlung kann auch Anweisungen mit Schritt-für-Schritt-Anleitung-spezifischen Markdown-Ausdrücken für eine erweiterte Funktionalität enthalten, etwa für Hervorhebungen oder zur Projektauswahl.

Informationen zum Einrichten, Erstellen und Starten einer Schritt-für-Schritt-Anleitung in Cloud Shell finden Sie in der Anleitung für das Schreiben von Schritt-für-Schritt-Anleitungen.

Format von Anweisungen

Verwenden Sie das folgende Format, um eine Anweisung hinzuzufügen:

<walkthrough-directive-name param-name="param-value">
</walkthrough-directive-name>

In diesem Format sind "directive-name" und "param" Platzhalter. Wenn Sie beispielsweise die Direktive editor-open-file und den Parameter filePath verwenden möchten, verwenden Sie dieses Format:

<walkthrough-editor-open-file filePath="test/hello.md">
</walkthrough-editor-open-file>

Cloud Shell-Anweisungen

In den nachfolgend aufgeführten Tabellen sind die Anweisungen und ihre jeweiligen Parameter für das Erstellen einer Cloud Shell-Schritt-für-Schritt-Anleitung aufgeführt.

Metadaten und Layout von Schritt-für-Schritt-Anleitungen

Anweisung: Autor

<walkthrough-author></walkthrough-author>

Das author-Tag definiert Metadaten für einen Autor. Alle Parameter sind optional.

Parameter Beschreibung
name Name des Autors
repositoryUrl Link zum Repository für das Feedback
tutorialName ID der Schritt-für-Schritt-Anleitung

Anweisung: Dauer der Schritt-für-Schritt-Anleitung

<walkthrough-tutorial-duration></walkthrough-tutorial-duration>

Mit dem Tag für die Dauer der Schritt-für-Schritt-Anleitung können ein Uhrsymbol sowie die geschätzte Dauer der Schritt-für-Schritt-Anleitung angezeigt werden.

Parameter Beschreibung
duration Geschätzte Dauer der Schritt-für-Schritt-Anleitung in Minuten.

Anweisung: Vorgeschlagene Schritt-für-Schritt-Anleitungs-Karte

<walkthrough-tutorial-card></walkthrough-tutorial-card>

Das Tag für die Schritt-für-Schritt-Anleitungs-Karte definiert einen Link zu einer vorgeschlagenen Schritt-für-Schritt-Anleitung.

Parameter Beschreibung
url URL zur Schritt-für-Schritt-Anleitung.
icon Name des Symbols
label Label für Analysen von Klickereignissen

Anweisung: Fußnote

<walkthrough-footnote>Footnote text here</walkthrough-footnote>

Mit einer Fußnotenanweisung lässt sich Text als Fußnote am unteren Rand des Schritts anzeigen. Ein Fußnotentext wird als innerer Text geschrieben.

Projektauswahl

Anweisung: Projekteinrichtung

<walkthrough-project-setup></walkthrough-project-setup>

Die Komponente zur Projekteinrichtung unterstützt Nutzer beim Erstellen oder Auswählen eines Projekts. Bei diesem Schritt muss der Nutzer erst ein gültiges Projekt auswählen, bevor er fortfahren kann.

Das Tag für Projektberechtigungen legt die erforderlichen Projektberechtigungen für die Schritt-für-Schritt-Anleitung fest. Hat der Nutzer keine Berechtigungen für das ausgewählte Projekt, wird es als ungültig eingestuft.

Eine Beschreibung der Funktionsweise von Berechtigungen finden Sie in der Dokumentation.

Parameter Beschreibung
permissions (Optional) Durch Kommas getrennte Liste mit erforderlichen Berechtigungen

Anweisung: Projekt- und Abrechnungskonfiguration

<walkthrough-project-billing-setup></walkthrough-project-billing-setup>

Die Komponente zur Projekt- und Abrechnungseinrichtung unterstützt Nutzer beim Erstellen oder Auswählen eines Projekts. Bei diesem Schritt muss der Nutzer erst ein gültiges Projekt mit aktivierter Abrechnung auswählen, bevor er fortfahren kann.

Parameter Beschreibung
permissions (Optional) Durch Kommas getrennte Liste mit erforderlichen Berechtigungen

Spotlights und Schaltflächen

Anweisung: Spotlight-Hervorhebung

<walkthrough-spotlight-pointer>Label text here</walkthrough-spotlight-pointer>

Die Anweisung für eine Spotlight-Hervorhebung erstellt ein anklickbares Label, mit dem das jeweilige UI-Element auf dem Bildschirm hervorgehoben wird. Dafür wird nur ein Parameter benötigt. Wenn beide angegeben sind, wird spotlightId verwendet.

Mit der Hervorhebung kann ein Element durch eine Instrumentations-ID, ein Attribut des DOM-Elements, oder durch Verwendung eines CSS-Selektors ausgewählt werden. Für beide Selektortypen sind kommagetrennte Selektoren zur Auswahl von Elementen zulässig. Alle Elemente, die dem Selektor entsprechen, werden hervorgehoben.

Ein Labeltext wird als innerer Text erstellt.

Parameter Beschreibung
spotlightId Instrumentierungs-ID; es können mehrere durch Kommas getrennte IDs verwendet werden.
cssSelector Ein CSS-Selektor
Spotlight-Ziele/Instrumentierungs-IDs Beschreibung
console-nav-menu Navigationsmenü der Konsole, Dreistrich-Menü oben links
devshell-activate-button Schaltfläche zum Öffnen von Cloud Shell (oben rechts)
devshell-web-editor-button Schaltfläche zum Öffnen des Orion-Editors (in der oberen Leiste von Cloud Shell)
devshell-web-preview-button Schaltfläche zum Öffnen eines Web-Vorschaufensters für Cloud Shell

Informationen zu Spotlights innerhalb des Editorrahmens finden Sie im Abschnitt Editoranweisungen.

Anweisung: APIs aktivieren

<walkthrough-enable-apis></walkthrough-enable-apis>

Die Komponente zur Aktivierung von APIs erstellt eine Schaltfläche, mit der durch Anklicken APIs aktiviert werden. Dadurch erhält Ihr Projekt Zugriff auf die GCP APIs.

Weitere Informationen zu den APIs, die Sie aktivieren können, finden Sie in der Dokumentation.

Parameter Beschreibung
apis Durch Kommas getrennte Liste mit APIs, die aktiviert werden können

Anweisung: Cloud Shell öffnen

<walkthrough-open-cloud-shell-button></walkthrough-open-cloud-shell-button>

Die Komponente zum Öffnen von Cloud Shell erstellt eine Schaltfläche, die Cloud Shell öffnet, wenn Sie darauf klicken (wobei das aktuelle Projekt ausgewählt ist).

Parameter Beschreibung
open-cloud-shell Öffnet Cloud Shell, wenn der übergeordnete Schritt angezeigt wird

Anweisung: Cloud Shell im Hintergrund öffnen

<walkthrough-devshell-precreate></walkthrough-devshell-precreate>

Die Anweisung devshell-precreate stellt eine Cloud Shell-Instanz im Hintergrund bereit, damit das Laden schneller erfolgt. Wird bei Anzeige des Schritts ausgeführt

Dynamische Variablen

Anweisung: Datenbindung

<walkthrough-watcher-constant></walkthrough-watcher-constant>

Schritt-für-Schritt-Anleitungen ermöglichen eine Datenbindung für Schlüssel/Wert-Paare. Die Werte werden durch Anweisungen oder durch das Framework der Schritt-für-Schritt-Anleitung festgelegt. Sie können innerhalb der Sitzung der Schritt-für-Schritt-Anleitung mit der Anweisung watcher-constant definiert werden.

Danach kann folgendermaßen auf den Stringwert verwiesen werden:

{{<key>}}

Beispiel für eine Verwendung in Markdown:

# My Walkthrough

## Step 1

<walkthrough-watcher-constant key="my-key" value="Hello Google">
</walkthrough-watcher-constant>

My message: {{my-key}}

Es sind integrierte Schlüssel verfügbar:

Key Beschreibung des Werts
project-id Die aktuelle Projekt-ID des Nutzers
project-name Der Projektname des Nutzers

Anweisung: Watcher-Konstante

<walkthrough-watcher-constant></walkthrough-watcher-constant>

Ein Watcher ist eine dynamische Zeichenfolge, die für eine exemplarische Schritt-für-Schritt-Anleitung festgelegt werden kann. Der entsprechende Wert wird mithilfe einer Watcher-Konstante am Anfang der Schritt-für-Schritt-Anleitung definiert. Weitere Informationen finden Sie unter Datenbindung.

Parameter Beschreibung
key Schlüssel für den Watcher
value Wert des Watcher

Anweisung: Inline-Symbole

<walkthrough-inline-icon-name></walkthrough-inline-icon-name>

Der Platzhalter "inline-icon-name" gilt für das Symbol, das Sie angeben möchten (wie nav-menu-icon und conclusion-trophy).

Die im Folgenden aufgeführten Symbole werden als Inline-Symbole dargestellt.

Name des Inline-Symbols Symbol
cloud-shell-icon Cloud Shell-Symbol
web-preview-icon Symbol für Webvorschau
cloud-shell-editor-icon Symbol für den Cloud Shell-Editor
nav-menu-icon Symbol für das Navigationsmenü
notification-menu-icon Symbol für das Benachrichtigungsmenü
pin-section-icon Symbol für das Anheften des Menüabschnitts

Die im Folgenden aufgeführten Symbole werden als Grafiken dargestellt.

Name des Inline-Symbols Symbol
conclusion-trophy Abschlusstrophäe

Anweisungen für den Cloud Shell-Editor

Editoranweisungen sind auf der Seite Cloud Shell-Editor zu finden.

Anweisung: Datei öffnen

<walkthrough-editor-open-file></walkthrough-editor-open-file>

Die Anweisung zum Öffnen von Dateien erstellt ein anklickbares Label, um eine Datei von der Cloud Shell-Festplatte im Editor zu öffnen.

Ein Labeltext wird als innerer Text erstellt.

Parameter Beschreibung
filePath Relativer Dateipfad

Anweisung: Ausgewählten Text im Editor öffnen

<walkthrough-editor-select-line></walkthrough-editor-select-line>

Die Anweisung editor-select-line erstellt ein anklickbares Label, um eine Datei im Editor zu öffnen und eine Textzeile darin auszuwählen.

Parameter Beschreibung
filePath Relativer Dateipfad
startLine Startzeile
startCharacterOffset Startindex
endLine Endzeile
endCharacterOffset Endindex

Anweisung: Von Regex angegebenen Text im Editor öffnen

<walkthrough-editor-select-regex>Label text here</walkthrough-editor-select-regex>

Die Anweisung editor-select-regex erstellt ein anklickbares Label, um eine Datei im Editor zu öffnen, und wählt den darin enthaltenen Text basierend auf dem bereitgestellten Regex aus.

Parameter Beschreibung
filePath Relativer Dateipfad
regex Regex zum Abgleich

Ein Labeltext wird als innerer Text erstellt.

Anweisung: Spotlight-Hervorhebung

<walkthrough-editor-spotlight>Label text here</walkthrough-editor-spotlight>

Die Anweisung für eine Spotlight-Hervorhebung erstellt ein anklickbares Label, mit dem das jeweilige UI-Element auf dem Bildschirm hervorgehoben wird.

Mit der Hervorhebung können nur vordefinierte Ziele ausgewählt werden.

Parameter Beschreibung
spotlightId Editor-ID

Ein Labeltext wird als innerer Text geschrieben.

Editor-Spotlight-Ziele Beschreibung
fileMenu Markiert die Schaltfläche des Menüs "Datei"
editMenu Markiert die Schaltfläche des Menüs "Bearbeiten"
navigator Markiert eine Datei, die im Elementfeld angegeben ist