Einführung

杰德Help-Center-Design besteht来自静脉Sammlungbearbeitbarer Seitenvorlagen, die das Layout unterschiedlichen Seitenarten im Help Center definieren. So gibt es zum Beispiel eine Vorlage für Wissensdatenbankbeiträge, eine Vorlage für die Anfragenliste usw.

Jede Vorlage besteht aus einer Mischung aus HTML-Markup und Handlebars-ähnlichen Ausdrücken, die in der Vorlage anhand doppelter geschweifter Klammern erkennbar sind.Handlebarsist eine einfache Template-Engine, mit der Sie Inhalte in eine Seite einfügen oder bearbeiten können, und zwar zum Darstellungs- anstatt zum Designzeitpunkt.

Die Vorlagensprache im Help Center heißtCurlybarsund implementiert einen Großteil der Handlebars-Sprache. Dieser Leitfaden zeigt Ihnen, wie Sie mithilfe von Curlybars Ihre Seiten im Help Center anpassen können.

Im Help Center gibt es Helper sowie benannte Eigenschaften zum Anpassen von Seiteninhalten. Manche davon sind auf allen Help-Center-Seiten verfügbar, andere sind seitenspezifisch.

Beispiel

{{#each comments}} 
 
  
 
 
  {{author.name}}  
 
 
 {{/each}}

Dieses Beispiel generiert eine Liste mit Benutzern, die auf einer Seite Kommentare hinterlassen haben. Der Helpereachgeht durch jeden Wert in der Eigenschaftcommentsder Seite. Für jeden Kommentar werden die Werte der Eigenschaftenauthor.avatar_urlundauthor.namein den HTML-Code eingefügt.

《Vorlagenerstellung

In diesem Abschnitt stellen wir die Bausteine vor, die Sie zum Schreiben von Vorlagen benötigen. Weitere Informationen finden Sie unterHelp Center Templatesauf developer.zendesk.com.

Eine Curlybars-Vorlage besteht aus zwei Elementen: wortwörtlicher Text, der wie eingegeben dargestellt wird, und Curlybars-Ausdrücke. Dies impliziert, dass eine leere Vorlage ebenso gültig ist wie eine Vorlage, die nur Text enthält. Folgendes ist beispielsweise eine gültige Vorlage:

Article
 
Some details on the article

Wenn Help-Center-Vorlagen nur wortwörtlichen Text unterstützen würden, wäre es nicht möglich, sie zum Darstellungszeitpunkt anzupassen. Um Vorlagenlogik hinzuzufügen, brauchen Sie Curlybars-Ausdrücke, die in doppelte geschweifte Klammern gesetzt sind ({{und}}).

Um Vorlagenlogik zum vorherigen Beispiel hinzuzufügen, können Sie die Vorlage wie folgt ändern:

Article
 
Some details on the article
 {{article.author.name}}

In den folgenden Abschnitten erfahren Sie, wie Sie anhand gültiger Ausdrücke sinnvolle Änderungen an der Vorlage vornehmen können.

Beachten Sie, dass das Verschachteln geschweifter Klammern innerhalb anderer geschweifter Klammern keine gültige Syntax ist. Folgendes ist beispielsweise nicht zulässig:

Article
 
Some details on the article
 {{ {{ ... }} }}

Kommentare

Manchmal können sich Notizen in der Vorlage, die auf der dargestellten Seite nicht erscheinen, als nützlich erweisen. In Curlybars können Sie Kommentare einfügen, indem Sie direkt nach der linken geschweiften Klammer ein Ausrufezeichen setzen (ohne Leerzeichen):{{! ... }}. Verwenden Sie diese Syntax, um im Beispiel einen Codekommentar hinzuzufügen:

{{! This template aims to show details of an article }} 
Article
 
Some details on the article

Zur Darstellung der Seite wird Folgendes an den Browser gesendet:

Article
 
Some details on the article

Kommentare, die gelöscht werden können, sind beim Entwickeln einer Vorlage durchaus sinnvoll. So können Sie zum Beispiel Code auskommentieren, um Prüfungen durchzuführen, zu debuggen usw.

Blockkommentare

Leider ist die oben beschriebene Syntax zum Auskommentieren von Curlybars-Code nicht geeignet. Verwenden Sie die folgende Syntax, um Curlybars-Code auszukommentieren:{{!-- ... ---}}. Ein solcher Kommentar kann mehrere Zeilen umfassen und Code auf effiziente Weise auskommentieren. Beispiel:

{{! This template aims to show details of an article }} 
Article
 
Some details on the article
 {{!-- I want to commend out the following code: {{ ... some Curlybars expressions }} --}}

Die Vorlage oben wird wie folgt dargestellt:

Article
 
Some details on the article

Literale

Curlybars unterstütztLiterale, damit Sie Werte einfügen können, die Curlybars genau wie eingegeben interpretiert. Ein Literal kann drei Arten von Werten wiedergeben: eineZeichenfolge, einenBooleschen Wertoder eineZahl..

Um eine Zeichenfolge auszudrücken, können Sie sowohl einfache als auch doppelte Anführungszeichen verwenden, allerdings nicht gemischt. Beispiel:'gültige Zeichenfolge',"auch eine gültige Zeichenfolge", aber"keine gültige Zeichenfolge'.

Eine Zahl kann eine positive oder eine negative Ganzzahl sein.123ist eine gültige positive Zahl,+123repräsentiert den gleichen Wert,00123ist auch gültig und-123ebenfalls.

Es gibt zwei Boolesche Werte:trueundfalse. Andere Variationen sind nicht zulässig. Beispiel:TRUEundFALSEwerden in Curlybars nicht als Boolesche Werte interpretiert.

Sie können Literale darstellen. Beispiel:

一个字符串:{{“hello world”}}一个布尔值:{{真}} A number: {{ 42 }}

Die Seite wird wie folgt dargestellt:

A string: 'hello world' A boolean: true A number: 42

Eigenschaften

Jede Vorlage im Help Center hat Zugriff auf einenKontext, der Daten über Ihr Help Center enthält. So hat beispielsweise die Vorlage „Beitragsseite“ ein Objekt namensarticle, das die Struktur des vom Benutzer angeforderten Beitrags offenlegt. Weitere Informationen zu allen Eigenschaften, die Sie in Ihren Vorlagen verwenden können, finden Sie unterHelp Center Templatesauf developer.zendesk.com.

Verwenden Sie die Punktnotation, um konkrete Informationen aus diesen Objekten zu extrahieren. Einfaches Beispiel:article.title.

Der voll qualifizierte Name einer Eigenschaft wird auch alsPfadbezeichnet. Beispiel:nameist eine Eigenschaft im Objektauthor, aber ihr Pfad lautetarticle.author.name.

Sie können den Wert einer Eigenschaft anzeigen, indem Sie sie in doppelte geschweifte Klammern setzen. Im obigen Beispiel können Sie den Namen des Autors wie folgt in einem getrennten Absatz anzeigen:

Article
 
Author: {{article.author.name}}

Angenommen, ein Benutzer möchte einen Beitrag von einem Agenten namens Jens Venturini sehen. Die Vorlage wird wie folgt dargestellt:

Article
 
Author: John Venturini

Sie können auch den Beitrag selbst darstellen. Zum Objektarticlegibt es eine Eigenschaft namensbody, die den Inhalt des Beitrags enthält. Um den Beitragsinhalt darzustellen, ändern Sie die Vorlage wie folgt:

Article
 
Author: {{article.author.name}}
 
{{article.body}}

Konditionale Logik

Die Vorlagensprache ermöglicht nicht nur die Darstellung von Eigenschaftswerten, sondern auch das Hinzufügen konditionaler Darstellungslogik zu Ihren Vorlagen.

Beispielsweise können Sie ein bestimmtes HTML-Snippet darstellen, wenn es sich beim angeforderten Beitrag um einen internen Beitrag handelt. In der Vorlage „Beitragsseite“ gibt es eine Eigenschaft namensarticle.internal, dietruezurückgibt, wenn es sich um einen internen Beitrag handelt (bzw.false, wenn nicht).

Sie können einenif-Block mit diesen Informationen erstellen. Derif-Ausdruck muss eine Bedingung angeben, dietrueoderfalseist. Das Ergebnis bestimmt, ob der Inhalt des Blocks dargestellt wird oder nicht. Die Syntax sieht wie folgt aus:

{{#if condition}} This is rendered if the condition is true. {{/if}}

Sie können die Beispielvorlage wie folgt ändern:

Article
 {{#if article.internal}} 
This article is internal.
 {{/if}} 
Author: {{article.author.name}}
 
{{article.body}}

Wenn Sie einen Block darstellen möchten, falls die Bedingung falsch ist, verwenden Sie einenunless-Block. Die Syntax ist ähnlich wie beimif-Block:

{{#unless condition}} This is rendered if the condition is false. {{/unless}}

Angenommen, Sie möchten eine Meldung anzeigen, wenn es sich nicht um einen internen Beitrag handelt. Ändern Sie die Beispielvorlage in diesem Fall wie folgt:

Article
 {{#if article.internal}} 
This article is internal.
 {{/if}} {{#unless article.internal}} 
This is a publicly visible article!
 {{/unless}} 
Author: {{article.author.name}}
 
{{article.body}}

Diese Art von konditionaler Logik – wenn wahr, A tun; wenn nicht, dann B – wird normalerweise alsif-else-Block codiert. Die Syntax lautet wie folgt:

{{#if condition}} This is rendered if the condition is true. {{else}} This is rendered if the condition is false. {{/if}}

Sie können das Beispiel wie folgt ändern:

Article
 {{#if article.internal}} 
This article is internal.
 {{else}} 
This is a publicly visible article!
 {{/if}} 
Author: {{article.author.name}}
 
{{article.body}}

Zumunless-Block gibt es auch eineunless-else-Variante. Damit können Sie das gleiche Ergebnis erzielen wie mit einemif-else-Block:

Article
 {{#unless article.internal}} 
This is a publicly visible article!
 {{else}} 
This article is internal.
 {{/unless}} 
Author: {{article.author.name}}
 
{{article.body}}

Wie Bedingungen ausgewertet werden

明信片Bedingung是normalerweise一张帮助中心-Eigenschaft wiearticle.internalmit dem Booleschen Werttrueoderfalse. Manche Eigenschaften haben aber keine Booleschen Werte. Diese werden wie folgt ausgewertet.

• Wenn der Wert eine Zahl ist, gilt 0 als „false“ und jeder andere Wert als „true“.

• Wenn der Wert eine Zeichenfolge ist, gilt eine leere Zeichenfolge als „false“ und jede andere Zeichenfolge als „true“.

• Wenn der Wert eine Sammlung von Objekten ist, gilt eine leere Sammlung als „false“ und jede andere Sammlung als „true“.

• Wenn der Wert ein Nullwert ist, gilt der Ausdrück als „false“.

Angenommen, Sie möchten eine konditionale Logik zur Überprüfung von Zahlen einrichten. In der Vorlage „Beitragsseite“ gibt es eine Eigenschaft namensarticle.comment_count, die die Gesamtzahl von Kommentaren in einem Beitrag enthält. Mit einerif-Bedingung können Sie ermitteln, ob dieser Wert größer ist als0und dann eine freundliche Meldung anzeigen. Beispiel:

Article
 
Author: {{article.author.name}}
 
{{article.body}}
 {{#if article.comment_count}} 
Yahoo! This article has got some comments!
 {{/if}}

Entfernen von Whitespace

Wenn Curlybars eine Vorlage verarbeitet, wird wortwörtlicher Text wie eingegeben dargestellt. In den meisten Fällen ist das gut so. Es gibt aber Fälle, in denen Sie mehr Kontrolle über die Leerzeichen neben einem Ausdruck benötigen. Beispiel:

Click me!

Wennhighlighted“真正”的坚持,将der folgende HTML-Code dargestellt:

Click me!

Vor und nach dem Worthighlighterscheint ein Leerzeichen. Dies wirkt sich zwar nicht auf die Funktion aus, ist aber unschön. Anhand einer Tilde (~) können Sie die Leerzeichen in der Vorlage lassen, ohne sie darzustellen.

Wenn Sie im linken oder rechten Klammernpaar eine Tilde eingeben, wird der Whitespace aus dem in geschweifte Klammern gesetzten Text entfernt. Beispiel:

Click me!

Durch die Tilde werden die Leerzeichen vor und nach dem Worthighlightentfernt:

Click me!

Durch die Tilde werden alle Whitespace-Zeichen wie Zeilenumbruchs-, Tabulator- und Leerzeichen entfernt, die zwar nicht nicht grafisch dargestellt werden, aber Leerraum bilden oder Zeilen trennen. Wenn Sie möchten, können Sie denif-Block oben mehrzeilig formatieren, damit er einfacher zu lesen ist. Beispiel:

Click me!

Dargestellt wird aber nach wie vor dieser Text:

Click me!

Diese Beispiele sind zwar eher theoretischer Natur, zeigen aber, wie die Tilde genutzt werden kann.

Helper

In vielen Vorlagen reicht es, auf Daten zuzugreifen, sie anzuzeigen und konditionale Logik hinzuzufügen. Bei Bedarf können Sie aber weiterführende Funktionen verwenden. Sie können beispielsweise eine lokalisierte Zeichenfolge anzeigen, die je nach dem Gebietsschema des Benutzers variiert, oder eine lange Textpassage nach einer bestimmten Anzahl von Zeichen abschneiden.

Diese Art von Funktionalität kann anhand vonHelperngenutzt werden. Weitere Informationen zu allen Helpern, die Sie in Ihren Vorlagen verwenden können, finden Sie unterHelp Center Templatesauf developer.zendesk.com.

Beispielsweise können Sie in der Vorlage „Beitragsseite“ einen Helper namensexcerptverwenden, um Zeichenfolgen abzuschneiden. Angenommen, Sie möchten eine verkürzte Version des Beitragstitels anzeigen. Sie können hierzu die Vorlage wie folgt ändern:

{{excerpt article.title characters=50}}
 
Author: {{article.author.name}}
 
{{article.body}}

Wie im obigen Beispiel zu sehen, werden Helper anhand von geschweiften Klammern aufgerufen. Als Parameter akzeptiert der Helperexcerpteinen Ausdruck, der eine Zeichenfolge ergibt. Mit der Optioncharacterskönnen Sie angeben, wie viele Zeichen beibehalten werden sollen. Die Optioncharactersist nicht zwingend erforderlich. Wenn Sie sie nicht angeben, wird ein Standardwert verwendet. Weitere Informationen finden Sie unterHelp Center Templates > excerptauf developer.zendesk.com.

Die Syntax zum Aufruf eines Helpers lautet{{ [ ...] [ ...]}}. Das einzige Element, das zwingend erforderlich ist, ist der Name des Helpers. Die Parameter und Optionen variieren je nach Helper.

Angenommen, es soll eine freundliche Meldung erscheinen, wenn der Name des Autors Jens Venturini lautet. Leider können Sie keineif-Bedingung verwenden, um zu prüfen, obarticle.author.namegleich"John Venturini"ist, daif努尔jeweils杯Ausdruck verarbeitet。Vergleichsoperatoren wie==werden nicht unterstützt.

Mit dem Helperiskönnen Sie aber eine solche Logik problemlos hinzufügen. Dieser Helper akzeptiert zwei Parameter und prüft, ob sie sich entsprechen. Beispiel:

{{excerpt article.title characters=50}}
 {{#is article.author.name 'John Venturini'}} 
Cool! John Venturini is the author of this article!
 {{/is}} 
{{article.body}}

Das Snippet oben zeigt eine freundliche Meldung an, wenn Jens Venturini der Autor ist. Aber was, wenn eine andere Meldung erscheinen soll, falls der Autor nicht Jens Venturini ist? Kein Problem! Wie die Anweisungif-elsekann auch der Helperiseinenelse-Block enthalten. Um erneut die vorherige Meldung anzuzeigen, wenn John Venturini nicht der Autor ist, können Sie einenelse-Block hinzufügen:

{{excerpt article.title characters=50}}
 {{#is article.author.name 'John Venturini'}} 
Cool! John Venturini is the author of this article!
 {{else}} 
Author: {{article.author.name}}
 {{/is}} 
{{article.body}}

Ändern des Kontexts

Über die Punktnotation können Sie schnell und einfach auf Daten zugreifen, besonders wenn der Pfad zu den benötigten Informationen nicht zu lang ist. Beispiel:article.title. In manchen Fällen ist aber der Zugriff auf eine Eigenschaft mit einem längeren Pfad erforderlich. Beispiel:article.author.name. Sie können längere Pfade in Vorlagen verwenden, wenn Sie möchten. So fügen Sie beispielsweise den Namen und Avatar des Autors hinzu:

{{excerpt article.title characters=50}}
  {{#is article.author.name 'John Venturini'}} 
Cool! John Venturini is the author of this article!
 {{else}} 
Author: {{article.author.name}}
 {{/is}} 
{{article.body}}

Das Snippet oben funktioniert zwar problemlos, aber lange Eigenschaftspfade können den Code unübersichtlich machen. Um dies zu verhindern, können Sie das Sonderkonstruktwithverwenden.withakzeptiert einen Parameter, der den Grundkontext für den zugehörigen Codeblock festlegt. Die Syntax lautet wie folgt:

{{#with }} ... {{/with}}

Sie können unser Beispiel wie folgt verfeinern:

{{excerpt article.title characters=50}}
 {{#with article.author}}  {{#is name 'John Venturini'}} 
Cool! John Venturini is the author of this article!
 {{else}} 
Author: {{name}}
 {{/is}} {{/with}} 
{{article.body}}

Dank des Parametersarticle.authorerübrigt sich die Angabe vonarticle.authorin allen Pfaden im Block.{{name}}innerhalb des Blocks entspricht alsoarticle.author.nameaußerhalb des Blocks.

Sie dürfenarticle.author.namenicht im Block verwenden, da dies alsarticle.author.article.author.nameausgewertet würde. Analog dazu können Sie nicht überarticle.titleauf den Titel des Beitrags im Block zugreifen, da das Objektarticlenur im Stammkontext, d. h. außerhalb des Blocks, erreichbar ist.

Durch Verwendung der Notation../im Pfad können Sie den durchwithfestgelegten Kontext verlassen und auf den äußeren Kontext zugreifen. Sie können den Titel des Beitrags imwith-Block wie folgt darstellen:

{{excerpt article.title characters=50}}
 {{#with article.author}} {{../article.title}}  {{#is name 'John Venturini'}} 
Cool! John Venturini is the author of this article!
 {{else}} 
Author: {{name}}
 {{/is}} {{/with}} 
{{article.body}}

Die Notation../kann wiederholt in ein und demselben Pfad verwendet werden und springt dann um die entsprechende Anzahl von Kontexten zurück. Das folgende Beispiel funktioniert weiterhin wie erwartet:

{{excerpt article.title characters=50}}
 {{#with article}} {{#with author}} {{../../article.title}} ... {{/with}} 
{{article.body}}

Um eine bestimmte Meldung anzuzeigen, wenn der Name des Autors nicht angegeben wurde, können Sie einenif-Block verwenden:

{{excerpt article.title characters=50}}
 {{#if article.author}} {{#with article.author}} ... {{/with}} {{else}} No author is present for this article! {{/if}} 
{{article.body}}

Hinweis: Im Help Center hatarticle.authorniemals einen Nullwert. Wir haben diesen Fall hier nur zur Veranschaulichung verwendet.

Das Snippet oben funktioniert zwar problemlos, aber Sie können das gleiche Ergebnis mit einemelse-Block im Konstruktwitherreichen. Derelse-Block wird nur ausgeführt, wenn der Parameter „false“ ist. Sie können das Beispiel wie folgt ändern:

{{excerpt article.title characters=50}}
 {{#with article.author}} ... {{else}} No author is present for this article! {{/with}} 
{{article.body}}

Darüber hinaus macht derelse-Block den Code übersichtlicher.

Übergeben des Stammkontexts an einen Helper

Mit dem Schlüsselwortthiskönnen Sie den aktuellen Stammkontext an einen Helper übergeben. Angenommen, Sie verwenden den Helperrender_author, der einarticle-Objekt als Parameter akzeptiert, um Details zum Autor anzuzeigen. Sie können das Schlüsselwortthiswie folgt verwenden:

{{excerpt article.title characters=50}}
 {{#with article}} {{render_author this}} {{/with}} 
{{article.body}}

thiswird alsarticleaufgelöst.

Zugreifen auf Elemente in einem Array

Manche Help-Center-Eigenschaften bestehen aus Objekt-Arrays. Die Eigenschaftattachmentsbesteht beispielsweise aus einem Array von Anhängen.

Um auf die Elemente in einem Array zuzugreifen, müssen Sie jedes einzeln durchlaufen. Dies können Sie mit dem Helpereacherreichen. Beispiel:

{{excerpt article.title characters=50}}
 {{#with article.author}} ... {{/with}} 
{{article.body}}
 {{#each attachments}} {{name}} ({{size}}) {{/each}}

Das Snippet oben listet alle Anhänge auf. Jedes Listenelement zeigt Daten zu einem bestimmten Anhang an, wie z. B.url,nameundsize.

Wiewithändert aucheachden Kontext im jeweiligen Block. Mit der Notation../können Sie auf den äußeren Kontext zugreifen.

Es bietet sich an, eine Meldung anzuzeigen, wenn ein Array leer ist. Dies lässt sich mit einemif-Block erreichen:

... {{#if attachments}} {#each attachments}} {{name}} ({{size}}) {{/each}} {{else}} Sorry, no attachments available! {{/if}}

Dies funktioniert zwar problemlos, aber Sie können auch einenelse-Block verwenden, um den Code übersichtlicher zu machen:

... {#each attachments}} {{name}} ({{size}}) {{else}} Sorry, no attachments available! {{/each}}

Länge

Zu jedem Array gibt es eine implizitelength-Eigenschaft, die die Anzahl von Elementen im Array angibt. Wenn Sie beispielsweise die Anzahl von Anhängen anzeigen möchten, verwenden Sie die Eigenschaftlengthwie folgt:

... There are {{attachments.length}}. {#each attachments}} {{name}} ({{size}}) {{/each}}