Lokales Bearbeiten eines Designs

Eine der wichtigsten Designfunktionen in Guide ist die Möglichkeit, Designs zu importieren, herunterzuladen und lokal zu bearbeiten. Wenn Sie größere Änderungen an einem Design vornehmen oder ein eigenes Design erstellen möchten, bietet sich dieser optimierte Workflow für Entwickler an.

Der Workflow zum Erstellen eines neuen Designs bzw. zum Aktualisieren eines vorhandenen Designs auf Ihrem lokalen System sieht wie folgt aus:

1. Starten Sie ein neues Design, indem Sie das Design „Copenhagen“ hinzufügen oder ein vorhandenes Design duplizieren.
2. Laden Sie das Design herunter, um offline damit arbeiten zu können.
3. Bearbeiten Sie das Design lokal mit Ihren eigenen Entwicklungstools.
4. Importieren Sie das Design in Guide.
5. Veröffentlichen Sie das neue Design.
6. Führen Sie weitere Änderungen durch.

Starten eines neuen Designs

Wenn Sie ein neues Design erstellen möchten, empfiehlt es sich, eine neue Version des Standarddesigns „Copenhagen“ als Ausgangspunkt zu verwenden. Fügen Sie hierzu einfach ein neues Design in Guide hinzu. Dadurch wird eine saubere Kopie von „Copenhagen“ zur Seite „Design“ hinzugefügt. Eine saubere Kopie des Designs ist auch im Repository „Copenhagen“ auf GitHub zu finden.

Viele Entwickler bevorzugen es, ein vorhandenes Design als Ausgangspunkt zu verwenden und dort die gewünschten Änderungen vorzunehmen, um ein angepasstes Design zu erstellen. Wenn Sie die im vorhandenen Design verwendeten Stile zum größten Teil beibehalten möchten, ist es sinnvoll, das Design zu duplizieren und dann wie erforderlich anzupassen.

Um ein neues Design zu erstellen, das auf einer sauberen Kopie des Standarddesigns „Copenhagen“ oder einem vorhandenen Design basiert, lesen Sie  Hinzufügen eines Help-Center-Designs zu Guide.

Herunterladen des Designs

Sie können jetzt das Design aus Guide herunterladen. Der Download ist ein ZIP-Archiv mit Vorlagen, JavaScript, CSS und Assets. Damit Sie das Design außerhalb von Guide mit Ihren eigenen Entwicklungstools bearbeiten.

Weitere Informationen zum Herunterladen des Designs finden Sie unter Herunterladen eines Help-Center-Designs.

Lokales Bearbeiten eines Designs

Jetzt können Sie das Design auf Ihrem lokalen System mit Ihren eigenen Entwicklungstools bearbeiten.

Damit Sie nicht jedes Mal, wenn Sie eine Vorschau der Änderungen sehen möchten, die Dateien komprimieren und in Guide importieren müssen, können Sie mit den Zendesk Apps Tools (ZAT) eine lokale Vorschau in einem Webbrowser anzeigen. Die lokale Vorschau ist erforderlich, damit Entwickler mit den Tools, mit denen sie bereits vertraut sind, schnell und einfach Designs erstellen können. Lesen Sie Anzeigen einer lokalen Vorschau der Designänderungen, um herauszufinden, wie Sie mit dem Tool ZAT eine Vorschau des Designs anzeigen können.

Nach Start des Vorschaumodus können Sie die Designdateien in jedem beliebigen Texteditor bearbeiten. Die lokale Vorschau ist live: Wenn Sie Änderungen an den Dateien vornehmen, wird die lokale Vorschau automatisch aktualisiert. Sie können die Vorlagen, den CSS- und JavaScript-Code sowie die Assets wie gewünscht ändern.

Wenn Sie ein Design auf Ihr lokales System heruntergeladen haben, raten wir Ihnen, die zugehörigen Dateien in ein Versionskontrollsystem wie Git, Mercurial, SVN o. ä. einzuchecken.

Sie können in GitHub ein Design gemeinsam mit anderen entwickeln und pflegen und dann von GitHub aus in Guide veröffentlichen. Weitere Informationen finden Sie unter Einrichten der GitHub-Integration mit Ihrem Guide-Design.

Importieren eines Designs

Nachdem Sie das Design auf Ihrem lokalen System fertiggestellt haben, komprimieren Sie das Verzeichnis „theme“ in einem ZIP-Archiv und importieren Sie dieses in Guide. Ziehen Sie hierzu die Datei auf die Seite „Designs“ oder verwenden Sie die Option „Importieren“.

Dadurch wird das Design als neues angepasstes Design importiert. In Guide können Sie jetzt das Design in der Vorschau anzeigen. Andere Benutzer in Ihrem Team können das Design ebenfalls sehen.

Anweisungen zum Importieren eines Designs finden Sie unter Importieren eines Help-Center-Designs.

Wenn Sie die Integration mit GitHub eingerichtet haben, können Sie ein Design von GitHub aus aktualisieren. Sie brauchen kein separates ZIP-Archiv erstellen und importieren. Weitere Informationen finden Sie unter Aktualisieren eines in GitHub verwalteten Designs in Guide.

Eine weitere Möglichkeit ist die Entwicklung einer eigenen Integration mit der Themes API, mit der Sie dann Designs in Guide importieren und aktualisieren können. Weitere Informationen finden Sie unter Theme Import Workflow und Theme Update Workflow in der Zendesk-Dokumentation für Entwickler (Englisch).

Veröffentlichen des neuen Designs

Um das neue Design zu veröffentlichen, klicken Sie einfach im Menü „Designs“ auf die Option „Veröffentlichen“.

Durchführen weiterer Änderungen

Wenn Sie ein Versionskontrollsystem wie Git oder Mercurial verwenden, führen Sie alle weiteren Änderungen lokal durch, nicht in Guide. Checken Sie die Änderungen ein und importieren Sie das Design erneut in Guide. Wenn Sie versehentlich Änderungen in Guide vornehmen, laden Sie das aktualisierte Design herunter und checken Sie die Änderungen in Ihr Versionskontrollsystem ein.

Wichtig: Wenn Sie eine Integration mit GitHub eingerichtet haben, ist zu beachten, dass die GitHub-Integration getrennt wird, wenn Sie Ihr Design in Guide ändern.