Ogni tema del centro assistenza è composto da una raccolta di modelli di pagina modificabili e pagine personalizzate. Puoi usare il linguaggio di modellazione del centro assistenza, Curlybars, per accedere ai dati del centro assistenza e modificare i contenuti delle tue pagine.
Questo articolo fornisce un elenco di ricette con frammenti di codice che puoi usare. Tieni presente che alcune delle funzionalità in queste ricette potrebbero essere già presenti nel tuo centro assistenza, a seconda che tu stia usando un tema standard o un tema personalizzato e della data in cui hai abilitato il centro assistenza.
- Informazioni sul linguaggio di modellazione Curlybars
- Personalizzazione dei modelli di pagina per categorie, sezioni o articoli specifici
- Personalizzazione dei nomi delle lingue nel selettore della lingua
- Nascondere una o più lingue nel selettore della lingua
- Consentire agli utenti di ordinare i commenti degli articoli per data o voto
- Aggiunta di una barra degli strumenti di formattazione all’editor dei commenti degli articoli
- Consentire agli utenti di votare i commenti degli articoli
- Aggiunta dei risultati di Ricerca istantanea (completamento automatico) al centro assistenza
- Aggiunta della ricerca federata per includere contenuti esterni nella ricerca del centro assistenza
- Aggiunta dell’ordinamento per i tipi di abbonamento nella pagina Segui di Le mie attività
- Aggiunta delle opzioni di ordinamento “created at” e “updated at” per le richieste in Le mie attività
- Aggiunta del pulsante Segui/Smetti di seguire per gli utenti in un’organizzazione condivisa
- Consentire agli utenti autenticati di aggiungere altri utenti in copia nelle richieste di assistenza
- Aggiunta di un link alla richiesta principale nelle richieste di follow-up
- Abilita CSAT per i ticket risolti nel Portale clienti
- Aggiunta di pulsanti di voto agli articoli
- Aggiungi tag di contenuto ad articoli e post
- Aggiunta di badge al tema personalizzato del tuo centro assistenza
- Consentire agli utenti di visualizzare profili utente nel tuo centro assistenza
- Abilitazione delle sottosezioni nel tema del tuo centro assistenza
- Aggiunta di risultati e filtri della barra laterale per più centri assistenza alla pagina dei risultati delle ricerche
Informazioni sul linguaggio di modellazione Curlybars
Il tuo centro assistenza è basato su un framework di temi che include un proprio linguaggio di modellazione per personalizzazioni avanzate. Ogni tema del centro assistenza è composto da una raccolta di modelli modificabili e pagine personalizzate facoltative.
I modelli di pagina modificabili definiscono il layout di ogni pagina. Ad esempio, è presente un modello per gli articoli della Knowledge base, un modello per l’elenco delle richieste e così via. Un modello è semplicemente un file di testo di cui viene eseguito in rendering in una pagina HTML quando un utente vuole visualizzarlo. Ogni modello è una combinazione di markup HTML ed espressioni identificabili mediante doppie parentesi graffe, ad esempio {{post.title}}.
Le pagine personalizzate sono integrate nel codice del tema del centro assistenza e includono un URL specifico a cui puoi creare un link da una qualsiasi area del centro assistenza. Puoi usare pagine personalizzate per creare e programmare pagine che soddisfino le tue esigenze. Ad esempio, pagine di destinazione speciali per il tuo centro assistenza o persino nuove pagine per incorporare contenuti di origini esterne a Zendesk.
Il linguaggio di modellazione è denominato Curlybars e implementa un ampio sottoinsieme del linguaggio Handlebars. Tuttavia, a differenza di Handlebar che esegue il rendering sul lato client, Curlybars esegue il rendering sul lato server.
Puoi usare il linguaggio di modellazione del centro assistenza per accedere ai dati del centro assistenza e modificare i contenuti delle tue pagine. Nell'esempio seguente, il centro assistenza esegue il rendering di un elenco di nomi e avatar di tutte le persone che hanno lasciato commenti nella pagina:
{{#each comments}}
<li>
<div class="comment-avatar">
<img src="{{author.avatar_url}}" alt="Avatar" />
</div>
<div class="comment-author">
{{author.name}}
</div>
</li>
{{/each}} In precedenza, potevi usare i componenti per personalizzare il centro assistenza, ma non potevi personalizzare i componenti stessi, tranne per modificarli con JavaScript. Con Curlybars puoi accedere al codice HTML che in precedenza era nascosto nel componente e modificarlo.
Personalizzazione dei modelli di pagina per categorie, sezioni o articoli specifici
Puoi personalizzare i modelli Categoria, Sezione e Articolo rispettivamente per specifiche categorie, sezioni e articoli.
- Categoria
- Sezione
- Articolo
- Specifica l’ID categoria, sezione o articolo in un blocco
is:{{#is id 200646205}} ... {{/is}}
Esempio
L’inserimento del blocco seguente nel modello Sezione personalizza il modello per le sezioni 200646205 e 203133596:
{{#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}}Riferimento
Personalizzazione dei nomi delle lingue nel selettore della lingua
Puoi personalizzare i nomi delle lingue nel selettore della lingua in ogni pagina del centro assistenza. Ciò è utile se vuoi usare una variante linguistica, come “English (U.S.)”, per tutte le varianti di una lingua, ad esempio “English”.
- Intestazione
{{#if alternative_locales}}...{{/if}}
- Sostituisci l’espressione
{{current_locale.name}}con la seguente espressione condizionale:{{#is current_locale.name 'English (US)'}} English {{else}} {{current_locale.name}} {{/is}}Sostituisci anche l’espressione
{{name}}della lingua alternativa con la seguente espressione condizionale:{{#is name 'English (US)'}} English {{else}} {{name}} {{/is}}
Esempio
{{#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}}Riferimento
Nascondere una o più lingue nel selettore della lingua
Nascondere una lingua nel selettore della lingua può risultare utile se i contenuti in quella lingua non sono pronti per il rilascio.
- Intestazione
{{#each alternative_locales}}...{{/each}}
- Sostituisci l’espressione
{{name}}con la seguente espressione condizionale:{{#is name 'Français'}} {{! do nothing }} {{else}} <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> {{/is}}
Esempio
{{#each alternative_locales}}
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/is}}
{{/each}}Riferimento
Consentire agli utenti di ordinare i commenti degli articoli per data o voto
Per impostazione predefinita, i commenti degli articoli sono ordinati per data a partire dal più recente. Puoi aggiungere i link Data e Voti su cui gli utenti possono fare clic per ordinare i commenti in base alla data o al numero di voti.
- Articolo
...
- Inserisci il tag div seguente dopo il tag del titolo della sezione dei commenti
{{t 'comments'}}
{{#if comments}}, per assicurarti che gli ordinatori non siano visualizzati se nessuno ha ancora lasciato commenti:<div class="comment-sorter"> Sort by: {{#each comment_sorters}} <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a> {{/each}} </div>
Esempio
<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}}
...Riferimento
Aggiunta di una barra degli strumenti di formattazione all’editor dei commenti degli articoli
Puoi aggiungere una barra degli strumenti di formattazione all’editor dei commenti degli articoli. Gli utenti possono aggiungere grassetto, corsivo, elenchi ordinati e non, immagini e link.
- Articolo
{{#form 'comment'}}...{{/form}}
- Trova e sostituisci l’espressione
{{textarea 'body'}}nell’oggetto modulo con{{wysiwyg 'body'}}
Esempio
{{#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}}Riferimento
Consentire agli utenti di votare i commenti degli articoli
Per impostazione predefinita, gli utenti possono votare gli articoli. Puoi anche autorizzarli a votare i commenti degli articoli.
- Articolo
{{#each comments}}...{{/each}}
- Inserisci il seguente tag div dopo il tag
<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>Gli helper di voto qui sopra prendono in prestito le classi CSS per i voti degli articoli per definire lo stile dei link di voto dei commenti. Puoi creare classi personalizzate per definire lo stile dei voti dei commenti.
Esempio
{{#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>
...Riferimento
Aggiunta dei risultati delle ricerche istantanee (ricerca con completamento automatico) al tema personalizzato del centro assistenza
È possibile visualizzare i link agli articoli suggeriti mentre l’utente digita nella casella di ricerca aggiungendo la funzionalità Ricerca istantanea al tuo tema personalizzato.
Quando la ricerca istantanea è abilitata, vengono suggeriti fino a sei articoli mentre l’utente digita il termine di ricerca nella casella di ricerca. Con la ricerca istantanea, gli articoli vengono trovati solo in base al titolo. L’utente può selezionare gli articoli suggeriti direttamente nella casella di ricerca senza prima accedere alla pagina dei risultati delle ricerche.
- Qualsiasi modello che contiene la tua espressione di ricerca (nella maggior parte dei casi è il modello dell’intestazione o della home page)
Espressione applicabile
- {{search}}
- Aggiungi
instant=trueall’espressione di ricerca.{{search instant=true}}
Esempio
<div class="search-box">
<h1 class="help-center-name">{{help_center.name}}</h1>
{{search instant=true}}
</div>Aggiunta della ricerca federata per includere contenuti esterni nella ricerca del centro assistenza
L’abilitazione della ricerca federata nel modello dei risultati delle ricerche del centro assistenza implica due fasi:
Aggiunta dei filtri della barra laterale
Devi aggiornare il modello dei risultati delle ricerche aggiornando le proprietà usate nei filtri della barra laterale.
.<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>
Riproduzione a ciclo continuo dei risultati
Questo frammento è un esempio di come usare l’helper {{results}} per riprodurre a ciclo continuo i risultati delle ricerche federate:
{{#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}}Aggiunta dell’ordinamento per i tipi di abbonamento nella pagina Segui di Le mie attività
Puoi semplificare la visualizzazione degli abbonamenti da parte degli utenti consentendo loro di ordinare gli abbonamenti per tipo nella pagina Le mie attività > Segui.
- Pagina Segui
- Sotto il tag
inserisci il seguente codice:<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>
Aggiunta delle opzioni di ordinamento “created at” e “updated at” per le richieste in Le mie attività
Puoi aggiungere le opzioni di ordinamento “created at” e “updated at” per gli utenti finali nella pagina delle richieste in Le mie attività.
- Pagina Elenco richieste
Recipe
- Sostituisci
{{t 'created'}}con{{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} - Sostituisci
{{t 'last_activity'}}con{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
Aggiunta del pulsante Segui/Smetti di seguire per gli utenti in un’organizzazione condivisa
Puoi consentire agli utenti di ricevere notifiche email per le richieste nella loro organizzazione condivisa. L’helper {{subscribe}} inserisce un pulsante “Segui” su cui gli utenti possono fare clic per ricevere notifiche email quando le richieste vengono create o aggiornate nella loro organizzazione condivisa. Gli utenti possono fare clic sul pulsante Smetti di seguire se non vogliono più ricevere aggiornamenti.
- Pagina Elenco richieste
{{#form 'requests_filter'}}...{{/form}}
- Aggiungi l’helper
{{subscribe}}all’oggetto modulo.
Esempio
{{#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}}Riferimento
Consentire agli utenti autenticati di aggiungere altri utenti in copia nelle richieste di assistenza
Puoi fornire agli utenti autenticati la possibilità di aggiungere utenti in copia (CC) alle richieste di assistenza nuove ed esistenti nel centro assistenza. Quando un utente viene aggiunto in copia a una richiesta di assistenza, l’utente copiato riceverà notifiche email per gli aggiornamenti dei ticket.
Dopo aver aggiunto il codice al tuo tema personalizzato, devi abilitare la funzionalità (consulta Impostazione delle autorizzazioni CC).
- Pagina Richiesta
{{#form 'comment' class='comment-form'}}...{{/form}}
- Inserisci il seguente frammento nel modulo dei commenti.
{{#if help_center.request_ccs_enabled}} <div class="comment-ccs"> {{token_field 'ccs' class="ccs-input"}} </div> {{/if}}
Aggiunta di un link alla richiesta principale nelle richieste di follow-up
Puoi visualizzare un link alla richiesta principale (se esistente) in una richiesta di follow-up.
- Pagina Richiesta
Recipe
- Aggiungi il seguente frammento di codice al modello della pagina Richiesta in cui intendi visualizzare il link al ticket principale (se presente):
{{#if request.followup_source_id}} <dl class="request-details"> <dt>{{t 'followup'}}</dt> <dd>{{link 'request' id=request.followup_source_id}} </dd> </dl> {{/if}}
Abilita CSAT per i ticket risolti nel Portale clienti
- Pagina Richiesta
- Aggiungi a
{{#with satisfaction_response}}...{{/with}}al modello request_page.hbs.
-
ConsultaPagina di richiesta tema Copenhagen.hbs su GitHub.
- Aggiungi il codice modello seguente:
{{#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}}
Aggiunta di pulsanti di voto agli articoli
I pulsanti di voto negli articoli fanno parte del tema Copenhagen standard. Se tuttavia l’opzione per votare non è visibile negli articoli, è possibile che tu abbia rimosso i pulsanti dal tuo tema.
Il codice per aggiungere i pulsanti di voto può variare da tema a tema. Quello mostrato di seguito è il codice del tema Copenhagen standard, nel caso tu ne avessi bisogno.
- Articolo
- Aggiungi il codice seguente al modello di pagina degli articoli:
{{#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}}
Aggiungi tag di contenuto ad articoli e post
Per impostazione predefinita, il tema Copenhagen standard visualizza i tag di contenuto negli articoli, nei post della community e nelle pagine di ricerca. Se stai usando un tema personalizzato o del marketplace, potrebbe essere necessario aggiornarlo per visualizzare i tag di contenuto in queste pagine. Per iniziare, puoi usare i seguenti file modello del tema Copenhagen come guida:
Quando ti senti a tuo agio, puoi aggiungere tag di contenuto ad altre pagine. Ad esempio, il frammento di codice seguente aggiunge un elenco di tag di contenuto al modello di pagina degli argomenti della community.
{{#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}}Aggiunta di badge al tema personalizzato del tuo centro assistenza
Questo argomento include le seguenti sezioni:
Aggiunta del nuovo helper actions del profilo utente
Per assegnare badge agli agenti, devi aggiungere l’opzione Aggiudica badge. Tuttavia, prima di procedere, devi aggiungere il nuovo helper actions.
Per aggiungere la dichiarazione dell’helper actions
- Apri l’editor di codice online del tema e vai alla pagina del profilo utente di un agente.
Page filename: user_profile_page.hbs
- Trova la dichiarazione dell’helper edit.
{{edit}} - Sostituisci tale dichiarazione con la nuova dichiarazione dell’helper actions.
{{actions}}
A questo punto, gli agenti possono aggiudicare i badge. Al nuovo pulsante verrà assegnato lo stile CSS in base alle tue preferenze. Come ulteriore riferimento, vedi l’esempio di tema Zendesk.
Visualizzazione dei badge di titolo nella pagina di elenchi di post
Puoi aggiungere badge di titolo come etichette accanto al nome dell’autore nella pagina di elenchi di post. Questi badge sono simili alle etichette di stato dei post poiché, per semplicità, viene usata la stessa classe di stile.
Per visualizzare i badge di titolo in una pagina di elenchi di post
- Apri l’editor di codice online del tema e vai a
Page filename: community_topic_page.hbs
- Trova la dichiarazione author name. Nel tema Copenhagen la riga appare come segue:
<li class="meta-data">{{author.name}}</li> - Aggiungi questo frammento alla riga successiva:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Per gli utenti esperti: per questo scenario non si deve (ri)utilizzare la classe CSS status-label, ma creare una nuova classe CSS specializzata che è possibile modificare indipendentemente dallo stile dell’etichetta di stato.
Di seguito è riportato un esempio di badge di titolo per un membro della community
Visualizzazione dei badge di titolo in una pagina di post e commenti
Per visualizzare i badge di titolo in una pagina di elenchi di post
- Apri l’editor di codice online del tema e vai a
Page filename: community_post_page.hbs
- Trova la dichiarazione author name. Nel tema Copenhagen la riga appare come segue:
<li class="meta-data">{{author.name}}</li> - Aggiungi questo frammento alla riga successiva:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Visualizzazione dei badge di titolo e risultati in una pagina di profilo utente
In una pagina di profilo utente vorrai probabilmente aggiungere altro oltre ai badge di titolo, ad esempio i risultati ottenuti dall’utente. L’esempio seguente presuppone la presenza di un’icona grafica per ciascun badge di risultati. In base al tema Copenaghen, i badge di risultati potrebbero avere il seguente aspetto:
Per visualizzare i badge di titolo e risultati nella pagina del profilo di un utente
- Apri l’editor di codice online del tema e vai a
Page filename: user_profile_page.hbs
- Nel file, trova le righe in cui viene eseguito il rendering del nome dell’utente. Ad esempio:
<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> - Sostituisci quel frammento con quanto segue:
<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 questo esempio, tutto lo stile CSS è reso inline per semplificare l’esempio. Per le prassi ottimali, usa questi esempi come ispirazione, ma assicurati che lo stile sia appropriato al tuo tema.
Consentire agli utenti di visualizzare profili utente nel tuo centro assistenza
Questa sezione descrive come aggiornare i modelli necessari di modo che gli utenti nel centro assistenza possano fare clic sull’avatar o sul nome dell’autore e visualizzare il profilo dell’utente.
link nel linguaggio di modellazione Curlybars. Consulta la selezione relativa all’helper link nella documentazione sui modelli per aggiornare i modelli seguenti:
ArticoliAggiorna il modello di pagina degli articoli come segue.
Aggiornamento del nome dell’autore dell’articoloSostituisci il blocco if seguente:
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
con l’helper link seguente:
{{#link "user_profile" id=article.author.id class="user-profile"}}
{{article.author.name}}
{{/link}}
Aggiornamento dei nomi degli autori dei commentiSostituisci il blocco if seguente:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con l’helper link seguente:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Aggiornamento dell’avatar dell’articolo e degli autori dei commentiSostituisci il tag immagine seguente:
<img src="{{article.author.avatar_url}}" alt="Avatar"/>
con l’helper link seguente:
{{#link "user_profile" id=article.author.id class="user-profile"}}
<img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}
Post della communityAggiorna il modello di pagina dei post della community come segue.
Aggiornamento dei nomi degli autori dei postSostituisci il blocco if seguente:
{{#if post.author.url}}
<a href="{{post.author.url}}" target="_zendesk_lotus">
{{post.author.name}}
</a>
{{else}}
{{post.author.name}}
{{/if}}
con l’helper link seguente:
{{#link "user_profile" id=post.author.id class="user-profile"}}
{{post.author.name}}
{{/link}}
Aggiornamento dei nomi degli autori dei commentiSostituisci il blocco if seguente:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con l’helper link seguente:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Aggiornamento degli avatar degli autori dei postSostituisci il tag immagine seguente:
<img src="{{post.author.avatar_url}}" alt="Avatar"/>
con l’helper link seguente:
{{#link "user_profile" id=post.author.id class="user-profile"}}
<img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
Aggiornamento degli avatar degli autori dei commentiSostituisci il tag immagine seguente:
<img src="{{author.avatar_url}}" alt="Avatar"/>
con l’helper link seguente:
{{#link "user_profile" id=author.id class="user-profile"}}
<img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}
Risultati delle ricercheAggiorna il modello dei risultati delle ricerche come segue.
Aggiornamento dei nomi degli autori degli articoli nei risultatiSostituisci il blocco if seguente nel blocco {{#each article_results}}:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con l’helper link seguente:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Aggiornamento dei nomi degli autori dei post nei risultatiSostituisci il blocco if seguente nel blocco {{#each post_results}}:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
con l’helper link seguente:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Aggiornamento dei risultati delle ricerche nei temi meno recentiSe hai un tema meno recente, i risultati delle ricerche potrebbero usare l’helper {{meta}}. In tal caso, puoi usare il codice descritto in questa sezione per collegare i nomi degli autori alle pagine dei profili nel centro assistenza.
È possibile che sia necessario aggiornare lo stile CSS per uniformare la pagina dei risultati delle ricerche.
Aggiornamento dei nomi degli autori degli articoli nei risultatiSostituisci i seguenti tag div:
<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>
Con quanto segue:
<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>
Per il risultato finale:
{{#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}}
Aggiornamento dei nomi degli autori dei post nei risultatiAggiungi:
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
Per il risultato finale:
{{#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}}
Abilitazione delle sottosezioni nel tema del tuo centro assistenza
Puoi aggiungere sottosezioni alla Knowledge base del tuo centro assistenza per creare ulteriori livelli nella gerarchia dei contenuti. Se usi un tema che è stato personalizzato prima del 29 marzo 2019, devi aggiungere codice al tema personalizzato del tuo centro assistenza per abilitare le sottosezioni. Il codice seguente viene fornito con le versioni più recenti del tema Copenhagen.
- Sezione
section.sections
- Inserisci il frammento seguente nel modello di pagina della sezione Zendesk section_page.hbs dopo il tag dell’intestazione (
... {{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}}
Aggiunta di risultati e filtri della barra laterale per più centri assistenza alla pagina dei risultati delle ricerche
La ricerca nel centro assistenza consente agli utenti di effettuare ricerche nei vari centri assistenza, se disponi di più centri assistenza, e restituisce i risultati delle ricerche nei centri assistenza, nella Knowledge base e nella community in un singolo feed unificato con filtri nella pagina dei risultati delle ricerche.
Se usi un tema che è stato personalizzato prima del 29 marzo 2019, devi aggiungere codice al tema personalizzato del tuo centro assistenza per supportare i risultati delle ricerche unificati e le ricerche in più centri assistenza. Se disponi di più centri assistenza, dovrai aggiornare il tema di ognuno.
Il modo più rapido di apportare le modifiche necessarie al tema è importare la versione più recente del tema Copenhagen che supporta i risultati delle ricerche unificati. A tal fine, consulta Aggiunta di un tema del centro assistenza a Guide.
help_center_filters, filters e subfilters nel linguaggio di modellazione Curlybars per aggiornare i file seguenti:
Aggiornamento del modello dei risultati delle ricerche per aggiungere filtri della barra laterale
Devi aggiornare il modello dei risultati delle ricerche per aggiungere filtri della barra laterale e riprodurre a ciclo continuo i risultati.
Aggiunta dei filtri della barra laterale
Questo frammento è un esempio di come puoi implementare i facet di ricerca nella barra laterale della pagina dei risultati delle ricerche usando i nuovi helper di filtro.
Inserisci il codice seguente in Questo frammento è un esempio di come usare l’helper {{results}} per riprodurre a ciclo continuo i risultati delle ricerche unificati. Sostituisci entrambi gli helper nel modello dei risultati delle ricerche con quanto segue:
<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}} e {{post_results}} e i relativi H3 search-results-subheading associati{{#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}}
Aggiornamento dello stile CSS per i filtri della barra laterale nella pagina dei risultati delle ricerche
Puoi aggiungere lo stile CSS per i filtri della barra laterale. L’esempio seguente si basa sul tema Copenhagen.
Assicurati che le seguenti regole CSS siano incluse nel file style.css:
/***** 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;
}
Aggiornamento JavaScript per la barra laterale comprimibile nella pagina dei risultati delle ricerche
Puoi aggiungere JavaScript per la barra laterale comprimibile nella pagina dei risultati delle ricerche. L’esempio seguente si basa sul tema Copenhagen.
Sostituisci il blocco seguente nel file script.js nel tema personalizzato:
// 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);
});
});
con il seguente frammento di codice:
// 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);
}
});
});