Sie können ein Design lokal in Ihrem bevorzugten Code-Editor bearbeiten und eine Live-Vorschau Ihrer Änderungen in einem Webbrowser anzeigen. Sie brauchen die Dateien also nicht jedes Mal in Guide hochzuladen, wenn Sie Ihre Änderungen überprüfen möchten. Ihre Änderungen werden bei jedem lokalen Speichern einer Datei von einem auf Ihrem Computer laufenden Hintergrundprozess automatisch hochgeladen.
Beispiel:
Im vorliegenden Beitrag behandelte Themen:
Einrichten der lokalen Designvorschau
Zum Einrichten der lokalen Designvorschau müssen Sie die Designdateien herunterladen, den API-Zugriff in Ihrem Konto aktivieren und die Zendesk-Befehlszeilenschnittstelle (ZCLI) auf Ihrem Computer installieren. Über die ZCLI können Sie dann die lokale Designvorschau aufrufen.
So richten Sie die lokale Designvorschau ein
- Laden Sie die Designdateien von Guide herunter und entpacken Sie sie in einen Arbeitsordner.
Weitere Informationen finden Sie unter Herunterladen eines Help-Center-Designs.
- Falls noch nicht geschehen, aktivieren Sie den API-Zugriff in Ihrem Zendesk-Konto.
Klicken Sie in der Seitenleiste des Admin Centers auf
Apps und Integrationen und dann auf APIs > Zendesk-API. - Installieren Sie die ZCLI. Weitere Informationen finden Sie in der Dokumentation für Zendesk-Entwickler unter Installing and updating ZCLI (Englisch).
Starten der lokalen Designvorschau
Sie müssen die lokale Designvorschau starten, bevor Sie mit der Arbeit an den Designdateien auf Ihrem Computer beginnen.
So starten Sie die lokale Designvorschau
- Navigieren Sie im Befehlszeilenterminal Ihres Computers zu dem Ordner mit den exportierten und entpackten Designdateien. Beispiel:
cd guide_themes/newlook_theme - Melden Sie sich bei dem Zendesk-Konto an, in das Sie das Design heruntergeladen haben.
zcli login -iGeben Sie bei den entsprechenden Eingabeaufforderungen Ihre Subdomäne, Ihre E-Mail-Adresse und Ihr Kennwort ein:
Melden Sie sich bei der Standard-Zendesk-Subdomäne Ihres Kontos an. Verwenden Sie keine Subdomäne mit Host-Mapping.
Wenn Sie zur Anmeldung bei Zendesk Single-Sign-On (SSO) verwenden, können Sie sich mittels eines API-Tokens anmelden. Geben Sie als Benutzernamen Ihre_E-Mail-Adresse/token ein, wobei „/token“ kein Platzhalter, sondern die tatsächliche Zeichenfolge „/token“ ist. Geben Sie als Kennwort dann das API-Token ein. Beispiel:Email: jdoe@example.com/token Password: e8Pvy0pvGzE8meUQxWgjIYkjr - Starten Sie den Hintergrundprozess für die lokale Vorschau:
zcli themes:previewDieser ZCLI-Befehl startet die lokale Vorschau und lädt das lokale Design im Vorschaumodus in Ihr Help Center hoch. Alle Änderungen, die Sie lokal an den Dateien vornehmen, werden im Vorschaumodus in das Design übernommen.
- Kopieren Sie die URL, die in der Ausgabe nach „Ready“ erscheint, und fügen Sie sie in einem Webbrowser wie Chrome oder Firefox ein.
Der Browser muss gemischte HTTP- und HTTPS-Inhalte zulassen. Safari bietet keine Unterstützung für gemischte Inhalte und lässt keine lokale Vorschau von Designs zu.
Die „Ready“-URL sieht folgendermaßen aus: https://IhreSubdomäne.zendesk.com/hc/admin/local_preview/start.
Weitere Informationen zum ZCLI-Vorschaubefehl finden Sie auf GitHub unter zcli themes.
Anzeigen der Änderungen
Nachdem ZCLI Ihr Design im Vorschaumodus in Ihr Help Center hochgeladen hat, können Sie Ihre Designdateien lokal in Ihrem bevorzugten Code-Editor bearbeiten und eine Live-Vorschau der Änderungen in Ihrem Webbrowser anzeigen. Gehen Sie beim Entwickeln und Testen Ihres Designs iterativ vor. Nehmen Sie zum Beispiel einige Änderungen an einer Datei vor, speichern Sie die Datei und überprüfen Sie die Änderungen anschließend im Browser. Beheben Sie alle Probleme mit den Änderungen, bevor Sie weitere Änderungen vornehmen.
So zeigen Sie Änderungen an
- Speichern Sie die bearbeite(n) Datei(en) in Ihrem Code-Editor.
- Überprüfen Sie das Ergebnis in der Designvorschau in Ihrem Browser.
Wenn Sie eine Datei lokal speichern, wird das Design im Browser automatisch neu geladen. Sie brauchen die Seite also nicht von Hand zu aktualisieren.
ZCLI bietet eine Option zum Deaktivieren der Live-Reloads. Weitere Informationen finden Sie auf GitHub unter zcli themes.
Nach Abschluss Ihrer Arbeit können Sie den Vorschaumodus wie folgt beenden:
- Drücken Sie in der ZCLI-Terminalsitzung die Tastenkombinationen Strg+C.
- Geben Sie in die Adresszeile Ihrer Browsers https://IhreSubdomäne.zendesk.com/hc/admin/local_preview/stop mit Ihrer tatsächlichen Subdomäne ein.
- Klicken Sie im Browser oben auf der Designvorschauseite auf den Link Vorschau schließen.