Jedes Help-Center-Design besteht aus einer Sammlung von Seitenvorlagen und angepassten Seiten, die bearbeitet werden können. Sie können die Help-Center-Vorlagensprache Curlybars verwenden, um auf Help-Center-Daten zuzugreifen und die Inhalte Ihrer Seiten zu bearbeiten.
Dieser Beitrag enthält eine Liste von Rezepten mit Code-Snippets, die Sie verwenden können. Beachten Sie, dass einige Funktionen in diesen Rezepten möglicherweise bereits im Help Center vorhanden sind. Dies richtet sich danach, ob Sie ein Standarddesign oder ein angepasstes Design verwenden und wann Sie Ihr Help Center aktiviert haben.
- Überblick über die Vorlagensprache Curlybars
- Seitenvorlagen für spezifische Kategorien, Abschnitte oder Beiträge anpassen
- Sprachennamen in der Sprachenauswahl anpassen
- Eine oder mehrere Sprachen in der Sprachenauswahl ausblenden
- Benutzern die Möglichkeit geben, Beitragskommentare nach Datum oder Stimmen zu sortieren
- Formatierungsleiste zum Beitragskommentar-Editor hinzufügen
- Benutzern die Möglichkeit geben, ihre Stimme zu Beitragskommentaren abzugeben
- Sofortsuchergebnisse (automatische Vervollständigung) zum Help Center hinzufügen
- Mit der Verbundsuche externe Inhalte bei der Help-Center-Suche berücksichtigen
- Sortierung von Abonnementtypen auf der Seite mit gefolgten Inhalten unter „Meine Aktivitäten“ hinzufügen
- Sortieroptionen „Erstellungsdatum“ und „Aktualisierungsdatum“ für Anfragen unter „Meine Aktivitäten“ hinzufügen
- Schaltfläche „Folgen/Nicht mehr folgen“ für Benutzer in einer gemeinsamen Organisation hinzufügen
- Benutzern die Möglichkeit geben, andere Benutzer bei Supportanfragen auf CC zu setzen
- In Folgeanfragen einen Link zur ursprünglichen Anfrage hinzufügen
- Aktivieren von CSAT für gelöste Tickets im Kundenportal
- Abstimmungsschaltflächen zu Beiträgen hinzufügen
- Inhaltsstichwörter zu Beiträgen und Posts hinzufügen
- Badges zu einem angepassten Help-Center-Design hinzufügen
- Benutzern die Möglichkeit geben, Benutzerprofile in Ihrem Help Center anzuzeigen
- Unterabschnitte im Help-Center-Design aktivieren
- Seitenleistenfilter und Ergebnisse mehrerer Help Center zur Suchergebnisseite hinzufügen
Überblick über die Vorlagensprache Curlybars
Das Help Center baut auf einem Theming-Framework auf, das eine eigene Vorlagensprache für erweiterte Anpassungen enthält. Jedes Help-Center-Design besteht aus einer Sammlung von Seitenvorlagen und optionalen angepassten Seiten, die bearbeitet werden können.
Bearbeitbare Seitenvorlagen definieren das Layout der einzelnen Seiten. So gibt es zum Beispiel eine Vorlage für Wissensdatenbankbeiträge, eine Vorlage für die Anfragenliste usw. Eine Vorlage ist einfach eine Textdatei, die als HTML-Seite gerendert wird, wenn ein Benutzer sie sehen möchten. Jede Vorlage besteht aus einer Kombination aus HTML-Markup und Ausdrücken, die an doppelten geschweiften Klammern wie {{post.title}} erkennbar sind.
Angepasste Seiten werden in die Codebasis des Help-Center-Designs integriert und lassen sich über ihre eigene URL von jedem beliebigen Ort im Help Center aus verlinken. Mithilfe von angepassten Seiten können Sie eigene Seiten erstellen und ganz nach Ihren individuellen Anforderungen codieren. Auf diese Weise können Sie beispielsweise spezielle Ausgangsseiten für Ihr Help Center einrichten und sogar neue Seiten mit eingebetteten Inhalten aus externen Quellen erstellen.
Die Vorlagensprache heißt Curlybars und implementiert ein großes Subset der Sprache Handlebars. Im Gegensatz zu Handlebars, das clientseitig gerendert wird, wird Curlybars serverseitig gerendert.
Sie können die Help-Center-Vorlagensprache verwenden, um auf Help-Center-Daten zuzugreifen und die Inhalte Ihrer Seiten zu bearbeiten. Im folgenden Beispiel rendert das Help Center eine Liste mit Namen und Avataren aller Personen, die Kommentare auf der Seite hinterlassen haben:
{{#each comments}}
<li>
<div class="comment-avatar">
<img src="{{author.avatar_url}}" alt="Avatar" />
</div>
<div class="comment-author">
{{author.name}}
</div>
</li>
{{/each}} Bisher konnten Sie das Help Center mithilfe von Komponenten anpassen, die Komponenten selbst allerdings nur unter Verwendung von JavaScript modifizieren. Mit Curlybars erhalten Sie Zugriff auf den HTML-Code, der bisher in den Komponenten verborgen war, und können ihn bearbeiten.
Seitenvorlagen für spezifische Kategorien, Abschnitte oder Beiträge anpassen
Sie können die Kategorie-, Abschnitts- und Beitragsvorlagen für bestimmte Kategorien, Abschnitte und Beiträge anpassen.
- Kategorie
- Abschnitt
- Beitrag
- Geben Sie die ID der Kategorie, des Abschnitts oder des Beitrags in einem
is-Block an:{{#is id 200646205}} ... {{/is}}
Beispiel
Durch Einfügen des folgenden Blocks in die Abschnittsvorlage wird die Vorlage für Abschnitte 200646205 und 203133596 angepasst:
{{#is section.id 200646205}}
<p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
<p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}Referenz
Sprachennamen in der Sprachenauswahl anpassen
Sie können die Sprachennamen in der Sprachenauswahl auf jeder Seite im Help Center anpassen. Dies ist nützlich, wenn Sie eine Sprachenvariante wie „English (U.S.)“ für alle Varianten einer Sprache wie „English“ verwenden möchten.
- Kopfbereich
{{#if alternative_locales}}...{{/if}}
- Ersetzen Sie den Ausdruck
{{current_locale.name}}durch den folgenden konditionalen Ausdruck:{{#is current_locale.name 'English (US)'}} English {{else}} {{current_locale.name}} {{/is}}Ersetzen Sie außerdem den alternativen Gebietsschemaausdruck
{{name}}durch den folgenden konditionalen Ausdruck:{{#is name 'English (US)'}} English {{else}} {{name}} {{/is}}
Beispiel
{{#if alternative_locales}}
<div class="dropdown language-selector" aria-haspopup="true">
<a class="dropdown-toggle">
{{#is current_locale.name 'English (US)'}}
English
{{else}}
{{current_locale.name}}
{{/is}}
</a>
<span class="dropdown-menu dropdown-menu-end" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{#is name 'English (US)'}}
English
{{else}}
{{name}}
{{/is}}
</a>
{{/each}}
</span>
</div>
{{/if}}Referenz
Eine oder mehrere Sprachen in der Sprachenauswahl ausblenden
Das Ausblenden einer Sprache in der Sprachenauswahl kann nützlich sein, wenn die Inhalte in der betreffenden Sprache noch nicht veröffentlichungsreif sind.
- Kopfbereich
{{#each alternative_locales}}...{{/each}}
- Ersetzen Sie den Ausdruck
{{name}}durch den folgenden konditionalen Ausdruck:{{#is name 'Français'}} {{! do nothing }} {{else}} <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> {{/is}}
Beispiel
{{#each alternative_locales}}
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/is}}
{{/each}}Referenz
Benutzern die Möglichkeit geben, Beitragskommentare nach Datum oder Stimmen zu sortieren
Standardmäßig werden Beitragskommentar nach Datum sortiert, und zwar vom neuesten zum ältesten. Sie können Links mit Datum und Stimmen hinzufügen, auf die Benutzer klicken können, um die Kommentare nach Datum oder Anzahl der Stimmen zu sortieren.
- Beitrag
...
- Fügen Sie das folgende div-Tag nach dem heading-Tag des Kommentarbereichs
{{t 'comments'}}
{{#if comments}}(falls vorhanden), um sicherzustellen, dass die Sortieroptionen nicht erscheinen, wenn noch keine Kommentare vorhanden sind:<div class="comment-sorter"> Sort by: {{#each comment_sorters}} <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a> {{/each}} </div>
Beispiel
<section class="article-comments">
<h2>{{t 'comments'}}</h2>
{{#if comments}}
<div class="comment-sorter">
Sort by:
{{#each comment_sorters}}
<a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
{{/each}}
</div>
<ul class="comment-list">
{{#each comments}}
...Referenz
Formatierungsleiste zum Beitragskommentar-Editor hinzufügen
Sie können eine Formatierungsleiste zum Editor für Beitragskommentare hinzufügen. Zur Verfügung stehen Fett- und Kursivschrift, ungeordnete oder geordnete Liste sowie Links.
- Beitrag
{{#form 'comment'}}...{{/form}}
- Suchen und ersetzen Sie den Ausdruck
{{textarea 'body'}}im form-Objekt durch{{wysiwyg 'body'}}.
Beispiel
{{#form 'comment' class='comment-form'}}
<div class="comment-avatar">
{{user_avatar class='user-avatar'}}
</div>
<div class="comment-container">
{{wysiwyg 'body'}}
<div class="comment-form-controls">
{{input type='submit'}}
</div>
</div>
{{/form}}Referenz
Benutzern die Möglichkeit geben, ihre Stimme zu Beitragskommentaren abzugeben
Standardmäßig können Benutzer ihre Stimme zu Beiträgen abgeben. Sie können Benutzern auch die Möglichkeit geben, zu Beitragskommentaren ihre Stimmen abzugeben.
- Beitrag
{{#each comments}}...{{/each}}
- Fügen Sie das folgende div-Tag nach dem Tag
ein:<div class="comment-vote vote"> {{vote 'up' class="article-vote-up" selected_class="vote-voted"}} {{vote 'sum' class="article-vote-sum"}} {{vote 'down' class="article-vote-down" selected_class="vote-voted"}} </div>Die vote-Helper oben nutzen die CSS-Klassen für Beitragsstimmen, um die Links zu Kommentarstimmen anzupassen. Sie können eigene Klassen verwenden, um die Kommentarstimmen anzupassen.
Beispiel
{{#each comments}}
<li id="{{anchor}}" class="comment">
<div class="comment-vote vote">
{{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
{{vote 'sum' class="article-vote-sum"}}
{{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
</div>
<div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
<img src="{{author.avatar_url}}" alt="Avatar">
</div>
...Referenz
Sofortsuchergebnisse (automatische Vervollständigung) zu Ihrem angepassten Help-Center-Design hinzufügen
Sie können Links zu empfohlenen Beiträgen anzeigen, noch während der Benutzer Text in das Suchfeld eingibt. Fügen Sie dazu die Sofortsuche zu Ihrem angepassten Design hinzu.
Wenn die Sofortsuche aktiviert ist, werden bei der Eingabe des Suchbegriffs im Suchfeld maximal sechs empfohlene Beiträge angezeigt. Bei der Sofortsuche wird nur in den Beitragstiteln nach Übereinstimmungen gesucht. Der Benutzer kann passende Beiträge direkt vom Suchfeld aus auswählen, ohne zuvor zur Ergebnisseite gehen zu müssen.
- Die Vorlage, die den search-Ausdruck enthält (meist die Kopfbereich- oder Homepage-Vorlage)
Relevanter Ausdruck
- {{search}}
- Fügen Sie
instant=truezum search-Ausdruck hinzu.{{search instant=true}}
Beispiel
<div class="search-box">
<h1 class="help-center-name">{{help_center.name}}</h1>
{{search instant=true}}
</div>Mit der Verbundsuche externe Inhalte bei der Help-Center-Suche berücksichtigen
Die Aktivierung der Verbundsuche in der Help-Center-Vorlage Suchergebnisse besteht aus zwei Teilen:
Hinzufügen von Seitenleistenfiltern
Sie müssen in der Vorlage „Suchergebnisse“ die in den Seitenleistenfiltern verwendeten Eigenschaften aktualisieren.
.<section class="search-results-sidebar">
{{#if source_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each source_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
<buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}">{{t'show_more_sources'}}</button> </ul>
</section>
{{/if}}
{{#if type_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each type_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
{{#is current_filter.identifier 'knowledge_base'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
{{/is}}
{{#is current_filter.identifier 'community'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
{{/is}}
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each subfilters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
{{#is current_filter.identifier 'knowledge_base'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
{{/is}}
{{#is current_filter.identifier 'community'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
{{/is}}
</ul>
</section>
{{/if}}
</section>
Zusammentragen der Ergebnisse
Dieses Beispiel-Snippet zeigt, wie Sie mit dem Helper {{results}} die Inhalte für die Ergebnisse der Verbundsuche zusammentragen.
{{#if results}}
<ul class="search-results-list">
{{#each results}}
<li class="search-result-list-item result-{{type}}">
<h2 class="search-result-title">
<a href="{{url}}" class="results-list-item-link"{{#if is_external}}
target=”_blank” {{/if}}>
{{title}}
{{#if is_external}}
<svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></svg>
{{/if}}
</a>
</h2>
<article>
<div class="search-result-icons">
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
{{#if comment_count}}
<span class="search-result-meta-count">
{{comment_count}}
</span>
{{/if}}
</div>
<ul class="meta-group">
<li>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
<li class="meta-data">{{author.name}}</li>
<li class="meta-data">{{date created_at}}</li>
</ul>
<div class="search-results-description">{{text}}</div>
</article>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
</p>
{{/if}}Sortierung von Abonnementtypen auf der Seite mit gefolgten Inhalten unter „Meine Aktivitäten“ hinzufügen
Sie können Benutzern das Anzeigen ihrer Abonnements erleichtern, indem Sie ihnen die Möglichkeit geben, Abonnements auf der Seite „Meine Aktivitäten > Seite“ mit gefolgten Inhalten zu sortieren.
- Seite mit gefolgten Inhalten
- Fügen Sie unter dem Tag
den folgenden Code hinzu:<div class="my-activities-following-header"> <span class="dropdown"> <span class="dropdown-toggle"> {{current_filter.label}} </span> <span class="dropdown-menu" role="menu"> {{#each filters}} <a href="{{url}}" aria-selected="{{selected}}" role="menuitem"> {{name}} </a> {{/each}} </span> </span> </div>
Sortieroptionen „Erstellungsdatum“ und „Aktualisierungsdatum“ für Anfragen unter „Meine Aktivitäten“ hinzufügen
Sie können die Sortieroptionen „Erstellungsdatum“ und „Aktualisierungsdatum“ für Endbenutzer auf der Anfrageseite unter „Meine Aktivitäten“ hinzufügen.
- Seite zur Auflistung von Anfragen
Rezept
- Ersetzen Sie
{{t 'created'}}durch:{{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} - Ersetzen Sie
{{t 'last_activity'}}durch:{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
Schaltfläche „Folgen/Nicht mehr folgen“ für Benutzer in einer gemeinsamen Organisation hinzufügen
Sie können dafür sorgen, dass Benutzer Benachrichtigungen zu Anfragen in ihrer gemeinsamen Organisation enthalten. Der Helper {{subscribe}} fügt die Schaltfläche „Folgen“ hinzu. Benutzer können auf diese Schaltfläche klicken, falls sie benachrichtigt werden möchten, wenn in ihrer gemeinsamen Organisation Anfragen erstellt oder aktualisiert werden. Wenn sie keine Benachrichtigungen mehr erhalten möchten, können sie diese Option deaktivieren.
- Seite zur Auflistung von Anfragen
{{#form 'requests_filter'}}...{{/form}}
- Fügen Sie den Helper
{{subscribe}}zum Formularobjekt hinzu.
Beispiel
{{#form 'requests_filter' class='request-table-toolbar'}}
{{input 'query' id='quick-search' type='search' class='requests-search'}}
<div class="request-table-filters">
{{label 'organization' for='request-organization-select' class='request-filter'}}
{{select 'organization' id='request-organization-select' class='request-filter'}}
{{subscribe}}
{{label 'status' for='request-status-select' class='request-filter'}}
{{select 'status' id='request-status-select' class='request-filter'}}
</div>
{{/form}}Referenz
Angemeldeten Benutzern die Möglichkeit geben, andere Benutzer bei Supportanfragen auf CC zu setzen
Sie können angemeldeten Benutzern bei neuen und vorhandenen Supportanfragen im Help Center die Fähigkeit zum Hinzufügen von CC geben. Wenn ein Benutzer bei einer Supportanfrage auf CC gesetzt wird, wird er bei Ticketaktualisierungen per E-Mail benachrichtigt.
Sie müssen die Funktion aktivieren, nachdem Sie den Code zu Ihrem angepassten Design hinzugefügt haben (siehe Festlegen von CC-Berechtigungen).
- Anfragenseite
{{#form 'comment' class='comment-form'}}...{{/form}}
- Fügen Sie das folgende Code-Snippet im Kommentarformular ein:
{{#if help_center.request_ccs_enabled}} <div class="comment-ccs"> {{token_field 'ccs' class="ccs-input"}} </div> {{/if}}
In Folgeanfragen einen Link zur ursprünglichen Anfrage hinzufügen
Sie können einen Link in der Folgeanfrage zu übergeordneten Anfrage (falls vorhanden) anzeigen.
- Anfragenseite
Rezept
- Fügen Sie das folgende Snippet an der Stelle, an der der Link zum übergeordneten Ticket erscheinen soll (falls vorhanden), zur Vorlage für die Anfrageseite hinzu:
{{#if request.followup_source_id}} <dl class="request-details"> <dt>{{t 'followup'}}</dt> <dd>{{link 'request' id=request.followup_source_id}} </dd> </dl> {{/if}}
Aktivieren von CSAT für gelöste Tickets im Kundenportal
- Anfragenseite
- Fügen Sie der Vorlage „request_page.hbs“ einen Block
{{#with satisfaction_response}}...{{/with}}hinzu.
-
Siehe dazu copenhagen_theme/templates/request_page.hbs auf GitHub.
- Fügen Sie den folgenden Vorlagencode hinzu:
{{#with satisfaction_response}} {{#with rating}} <dl class="request-details"> <dt>{{t 'rating'}}</dt> <dd> <div> {{#is scale_type 'numeric'}} {{t 'numerical_rating' value=value max_value=max_value}} {{else}} {{scale_value}} {{/is}} </div> {{#link 'survey_response' id=../id}} {{#if ../editable}} {{t 'edit_feedback'}} {{else}} {{t 'view_feedback'}} {{/if}} {{/link}} </dd> </dl> {{else}} {{#if editable}} <dl class="request-details"> <dt>{{t 'rating'}}</dt> <dd> {{#link 'survey_response' id=id}} {{t 'add_feedback'}} {{/link}} </dd> </dl> {{/if}} {{/with}} {{/with}}
Abstimmungsschaltflächen zu Beiträgen hinzufügen
Die Abstimmungsschaltflächen in Beiträgen sind Teil des Designs „Copenhagen“. Wenn Sie in Beiträgen keine Option zum Abstimmen sehen, haben Sie die Schaltflächen möglicherweise aus Ihrem Design entfernt.
Der Code zum Hinzufügen der Abstimmungsschaltflächen kann von Design zu Design variieren. Hier ist der Code für das Standarddesign „Copenhagen“, falls Sie ihn brauchen:
- Beitrag
- Fügen Sie den folgenden Code zur Vorlage für die Beitragsseite hinzu:
{{#with article}} <div class="article-votes"> <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span> <div class="article-votes-controls" role='radiogroup'> {{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}} </div> <small class="article-votes-count"> {{vote 'label' class='article-vote-label'}} </small> </div> {{/with}}
Inhaltsstichwörter zu Beiträgen und Posts hinzufügen
Das Standarddesign „Copenhagen“ zeigt standardmäßig Inhaltsstichwörter auf Beitrags-, Community-Post- und Suchseiten an. Wenn Sie ein angepasstes Design oder ein Design aus dem Marketplace verwenden, müssen Sie es möglicherweise aktualisieren, um auf diesen Seiten Inhaltsstichwörter anzuzeigen. Für den Anfang können Sie die folgenden Vorlagendateien aus dem Design „Copenhagen“ als Leitfaden verwenden:
Sobald Sie mit den erforderlichen Schritten vertraut sind, können Sie Inhaltsstichwörter zu anderen Seiten hinzufügen. Das folgende Snippet fügt zum Beispiel eine Liste von Inhaltsstichwörtern zur Vorlagenseite für Community-Themen hinzu.
{{#each posts}}
...
{{#if (compare content_tags.length ">" 0)}}
<ul class="content-tag-list">
{{#each content_tags}}
<li class="content-tag-item">
{{#link "search_result" content_tag_id=id}}
{{name}}
{{/link}}
</li>
{{/each}}
</ul>
{{/if}}
...
{{/each}}Badges zu einem angepassten Help-Center-Design hinzufügen
In diesem Thema wird Folgendes behandelt:
Hinzufügen des neuen actions-Helpers für Benutzerprofile
Wenn Sie Agenten Badges verleihen möchten, müssen Sie die Option „Badge verleihen“ hinzufügen. Dies ist aber erst möglich, nachdem Sie den neuen actions-Helper hinzugefügt haben.
So fügen Sie die Deklaration für den actions-Helper hinzu
- Öffnen Sie den Online-Designcodeeditor und rufen Sie die Benutzerprofilseite eines Agenten auf:
Page filename: user_profile_page.hbs
- Suchen Sie die Deklaration für den edit-Helper.
{{edit}} - Ersetzen Sie die Deklaration für den edit-Helper durch die Deklaration für den neuen actions-Helper.
{{actions}}
Nun können Agenten Badges verleihen. Die neue Schaltfläche wird wie gewünscht per CSS gestylt. Weitere Anregungen finden Sie im Zendesk-Beispieldesign.
Anzeigen von Titel-Badges auf der Postlistenseite
Sie können Titel-Badges hinzufügen, die in der Postlistenseite als Label neben dem Namen des Autors angezeigt werden. Dieses Label ähnelt dem Poststatus-Label, da es der Einfachheit halber dessen Stilklasse verwendet.
So zeigen Sie Titel-Badges auf einer Postlistenseite an
- Öffnen Sie den Online-Designcodeeditor und rufen Sie die folgende Seite auf:
Page filename: community_topic_page.hbs
- Suchen Sie die Deklaration author. Beim Design „Copenhagen“ sieht die Zeile wie folgt aus:
<li class="meta-data">{{author.name}}</li> - Fügen Sie dieses Snippet in die darauffolgende Zeile ein:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Für fortgeschrittene Benutzer: In diesem Szenario sollten Sie nicht die CSS-Klasse status-label (wieder)verwenden, sondern eine neue spezielle CSS-Klasse erstellen, die Sie unabhängig vom Stil des Status-Labels ändern können.
Hier ist ein Beispiel für das Titel-Badge eines Community-Mitglieds
Anzeigen von Titel-Badges auf einer Post- und Kommentarseite
So zeigen Sie Titel-Badges auf einer Postlistenseite an
- Öffnen Sie den Online-Designcodeeditor und rufen Sie die folgende Seite auf:
Page filename: community_post_page.hbs
- Suchen Sie die Deklaration author. Beim Design „Copenhagen“ sieht die Zeile wie folgt aus:
<li class="meta-data">{{author.name}}</li> - Fügen Sie dieses Snippet in die darauffolgende Zeile ein:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Anzeigen von Titel- und Leistungs-Badges auf einer Benutzerprofilseite
Möglicherweise möchten Sie auf einer Benutzerprofilseite neben dem Titel-Badge zum Beispiel auch ein Leistungs-Badge hinzufügen. In den folgenden Beispielen wird davon ausgegangen, dass für jedes Leistungs-Badge eine Symbolgrafik vorhanden ist. Basierend auf dem Design „Copenhagen“ können Leistungs-Badges wie folgt aussehen:
So zeigen Sie Titel- und Leistungs-Badges auf der Profilseite eines Benutzers an
- Öffnen Sie den Online-Designcodeeditor und rufen Sie die folgende Seite auf:
Page filename: user_profile_page.hbs
- Suchen Sie die Zeilen in der Datei, in denen der Name des Benutzers angegeben ist. Beispiel:
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} </h1> - Ersetzen Sie das Snippet durch den folgenden Code:
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} {{#each user.badges}} {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} {{/each}} </h1> <div style="margin-top: 1em;"> {{#each user.badges}} {{#is category_slug "achievements"}} <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;"> <img src="{{icon_url}}" height="40"><br> <span style="font-size: 0.8em;">{{name}}</span> </div> {{/is}} {{/each}} </div>
In diesem Beispiel werden der Einfachheit halber nur CSS-Inline-Stile verwendet. Nutzen Sie diese Best-Practices-Beispiele als Anregung, aber stellen Sie sicher, dass der Stil zu Ihrem Design passt.
Benutzern die Möglichkeit geben, Benutzerprofile in Ihrem Help Center anzuzeigen
In diesem Abschnitt wird beschrieben, wie Sie die erforderlichen Vorlagen aktualisieren, damit Benutzer durch Klicken auf den Namen oder Avatar eines Autors im Help Center das Profil des betreffenden Benutzers aufrufen können.
link in der Vorlagensprache Curlybars aktualisiert (siehe link (Helper) in der Vorlagendokumentation).
BeiträgeNehmen Sie in der Vorlage für die Beitragsseite die folgenden Änderungen vor.
Namen des Beitragsautors aktualisierenErsetzen Sie den folgenden if-Block:
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
durch den folgenden link-Helper:
{{#link "user_profile" id=article.author.id class="user-profile"}}
{{article.author.name}}
{{/link}}
Namen von Kommentarautoren aktualisierenErsetzen Sie den folgenden if-Block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
durch den folgenden link-Helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Avatare der Beitrags- und Kommentarautoren aktualisierenErsetzen Sie das folgende img-Tag:
<img src="{{article.author.avatar_url}}" alt="Avatar"/>
durch den folgenden link-Helper:
{{#link "user_profile" id=article.author.id class="user-profile"}}
<img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}
Community-PostsNehmen Sie in der Vorlage für die Community-Post-Seite die folgenden Änderungen vor.
Namen der Post-Autoren aktualisierenErsetzen Sie den folgenden if-Block:
{{#if post.author.url}}
<a href="{{post.author.url}}" target="_zendesk_lotus">
{{post.author.name}}
</a>
{{else}}
{{post.author.name}}
{{/if}}
durch den folgenden link-Helper:
{{#link "user_profile" id=post.author.id class="user-profile"}}
{{post.author.name}}
{{/link}}
Namen der Kommentarautoren aktualisierenErsetzen Sie den folgenden if-Block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
durch den folgenden link-Helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Avatare der Post-Autoren aktualisierenErsetzen Sie das folgende img-Tag:
<img src="{{post.author.avatar_url}}" alt="Avatar"/>
durch den folgenden link-Helper:
{{#link "user_profile" id=post.author.id class="user-profile"}}
<img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
Avatare der Kommentarautoren aktualisierenErsetzen Sie das folgende img-Tag:
<img src="{{author.avatar_url}}" alt="Avatar"/>
durch den folgenden link-Helper:
{{#link "user_profile" id=author.id class="user-profile"}}
<img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}
SuchergebnisseNehmen Sie in der Vorlage für die Suchergebnisseite die folgenden Änderungen vor.
Namen von Beitragsautoren in den Ergebnissen aktualisierenErsetzen Sie den folgenden if-Block im {{#each article_results}}-Block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
durch den folgenden link-Helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Namen von Post-Autoren in den Ergebnissen aktualisierenErsetzen Sie den folgenden if-Block im {{#each post_results}}-Block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
durch den folgenden link-Helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Suchergebnisse in älteren Designs aktualisierenWenn Sie ein älteres Design haben, verwenden die Suchergebnisse möglicherweise stattdessen den Helper {{meta}}. In diesem Fall können Sie den in diesem Abschnitt beschriebenen Code dazu verwenden, um Autorennamen mit Profilseiten im Help Center zu verknüpfen.
Sie müssen möglicherweise Ihre CSS-Stile aktualisieren, damit die Seite mit den Suchergebnissen einheitlich aussieht.
Namen von Beitragsautoren in den Ergebnissen aktualisierenErsetzen Sie die folgenden div-Tags:
<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>
durch Folgendes:
<ol
class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
Endergebnis:
{{#each article_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
</li>
{{/each}}
Namen von Post-Autoren in den Ergebnissen aktualisierenFügen Sie Folgendes hinzu:
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
Endergebnis:
{{#each post_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
<span class="search-result-meta-count">
{{t 'comments_count' count=comment_count}}
</span>
</div>
</li>
{{/each}}
Unterabschnitte im Help-Center-Design aktivieren
Sie können Unterabschnitte zur Wissensdatenbank des Help Centers hinzufügen, um weitere Ebenen in der Inhaltshierarchie zu erstellen. Wenn Sie ein Design verwenden, das vor dem 29. März 2019 angepasst wurde, müssen Sie Code zu Ihrem angepassten Help-Center-Design hinzufügen, um die Unterstützung für Unterabschnitte zu aktivieren. Der folgende Code ist in späteren Versionen des Designs „Copenhagen“ enthalten.
- Abschnitt
section.sections
- Fügen Sie das folgende Snippet in die Vorlage für Zendesk-Abschnittsseiten section_page.hbs ein, und zwar zwischen dem Header-Tag (
... {{pagination}}):{{#if section.sections}} <ul class="section-list section-list--collapsed"> {{#each section.sections}} <li class="section-list-item"> <a href="{{url}}"> <span>{{name}}</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/> </svg> </a> </li> {{/each}} <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a> </ul> {{/if}} {{#if section.articles}} <ul class="article-list"> {{#each section.articles}} <li class="article-list-item {{#if promoted}} article-promoted{{/if}}"> {{#if promoted}}<span data-title="{{t 'promoted'}}" class="icon-star"></span>{{/if}} <a href="{{url}}" class="article-list-link">{{title}}</a> </li> {{/each}} </ul> {{else}} <i class="section-empty"> <a href="{{section.url}}">{{t 'empty'}}</a> </i> {{/if}}
Seitenleistenfilter und Ergebnisse mehrerer Help Center zur Suchergebnisseite hinzufügen
Mit der Help-Center-Suchfunktion kann der Benutzer alle vorhandenen Help Center durchsuchen und die Suchergebnisse aus den Help Centern, der Wissensdatenbank und der Community in einem gemeinsamen Feed mit Filtern auf der Ergebnisseite anzeigen.
Wenn Sie ein Design verwenden, das vor dem 29. März 2019 angepasst wurde, müssen Sie Code zu Ihrem angepassten Help-Center-Design hinzufügen, um die Suche in mehreren Help Centern und die gemeinsame Anzeige der Suchergebnisse zu unterstützen. Wenn Sie mehrere Help Center haben, müssen Sie Ihr Design für jedes Help Center aktualisieren.
Am schnellsten können Sie die erforderlichen Änderungen in Ihr Design übernehmen, indem Sie die neueste Version des Designs „Copenhagen“ importieren, das einheitliche Suchergebnisse unterstützt. Weitere Informationen hierzu finden Sie unter Hinzufügen eines Help-Center-Designs zu Guide.
help_center_filters, filters und subfilters in der Vorlagensprache Curlybars aktualisiert:
Aktualisieren der Suchergebnisvorlage zum Hinzufügen von Seitenleistenfiltern
Sie müssen die Suchergebnisvorlage aktualisieren, um Seitenleistenfilter hinzuzufügen und alle Ergebnisse zusammenzutragen.
Hinzufügen von Seitenleistenfiltern
Dieses Beispiel-Snippet zeigt, wie Sie in der Seitenleiste der Suchergebnisseite mit den neuen Filter-Helpern Suchfacetten implementieren können.
Fügen Sie den folgenden Code unter Dieses Beispiel-Snippet zeigt, wie Sie mit dem Helper {{results}} die Inhalte für die einheitlichen Suchergebnisse zusammentragen. Ersetzen Sie die Helper in der Suchergebnisvorlage durch den folgenden Code:
<section class="search-results-sidebar">
{{#if help_center.community_enabled}}
<section class="filters-in-section collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
<ul>
{{#each filters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar">
{{#is current_filter.identifier 'knowledge_base'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
{{/is}}
{{#is current_filter.identifier 'community'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
{{/is}}
<ul>
{{#each subfilters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</section>{{article_results}} und {{post_results}} sowie die dazugehörigen H3-Unterüberschriften{{#if results}}
<ul class="search-results-list">
{{#each results}}
<li class="search-result-list-item result-{{type}}">
<h2 class="search-result-title">
<a href="{{url}}" class="results-list-item-link">{{title}}</a>
</h2>
<article>
<div class="search-result-icons">
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
{{#if comment_count}}
<span class="search-result-meta-count">
{{comment_count}}
</span>
{{/if}}
</div>
<ul class="meta-group">
<li>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
<li class="meta-data">{{author.name}}</li>
<li class="meta-data">{{date created_at}}</li>
</ul>
<div class="search-results-description">{{text}}</div>
</article>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
</p>
{{/if}}
Aktualisieren der CSS-Stile für die Seitenleistenfilter auf der Suchergebnisseite
Sie können CSS-Stile für die Seitenleistenfilter hinzufügen. Das folgende Beispiel basiert auf dem Design „Copenhagen“.
Stellen Sie sicher, dass die folgenden CSS-Regeln in der Datei style.css enthalten sind:
/***** Search results *****/
.search-results {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 1024px) {
.search-results {
flex-direction: row;
}
}
.search-results-column {
flex: 1;
}
@media (min-width: 1024px) {
.search-results-column {
flex: 0 0 75%;
}
}
.search-results-sidebar {
border-top: 1px solid #ddd;
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}
@media (min-width: 1024px) {
.search-results-sidebar {
border: 0;
flex: 0 0 20%;
height: auto;
}
}
.search-results-sidebar .sidenav-item[aria-selected="true"] {
background-color: $brand_color;
color: $brand_text_color;
text-decoration: none;
}
.search-results-subheading {
font-size: 18px;
font-weight: 600;
}
.search-results-list {
margin-bottom: 25px;
}
.search-results-list > li {
padding: 20px 0;
}
.search-results-list > li:first-child {
border-top: 1px solid #ddd;
}
.search-results-list > li h2 {
margin-bottom: 0;
}
.search-result-title {
font-size: 16px;
}
.search-result-description {
margin-top: 15px;
word-break: break-word;
}
.search-result-votes, .search-result-meta-count {
color: lighten($text_color, 20%);
display: inline-block;
font-size: 13px;
font-weight: 300;
padding: 4px 5px;
position: relative;
}
.search-result-votes::before, .search-result-meta-count::before {
color: $brand_color;
}
[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
margin-left: 5px;
}
[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
margin-right: 3px;
}
[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
margin-right: 5px;
}
[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
margin-left: 3px;
}
.search-result-votes::before {
content: "\1F44D";
}
.search-result-meta-count::before {
content: "\1F4AC";
}
.search-result .meta-group {
align-items: center;
}
.search-result-breadcrumbs {
margin: 0;
}
.search-result-breadcrumbs li:last-child::after {
content: "·";
display: inline-block;
margin: 0 5px;
}
/* Non-latin search results highlight */
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-result-description em {
font-style: normal;
background: yellow;
}
/* Use bold to highlight for the rest of supported non-latin languages */
html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
font-style: bold;
}
Aktualisieren des JavaScript-Code für die ausblendbare Seitenleiste auf der Suchergebnisseite
Sie können JavaScript-Code für die ausblendbare Seitenleiste der Suchergebnisseite hinzufügen. Das folgende Beispiel basiert auf dem Design „Copenhagen“.
Ersetzen Sie den folgenden Block in der Datei script.js im angepassten Design:
// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});
durch das folgende Code-Snippet:
// Toggles expanded aria to collapsible elements
var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');
Array.prototype.forEach.call(collapsible, function(el) {
var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');
el.addEventListener('click', function(e) {
toggleNavigation(toggle, this);
});
el.addEventListener('keyup', function(e) {
if (e.keyCode === 27) { // Escape key
closeNavigation(toggle, this);
}
});
});