Chaque thème du centre d’aide se compose d’un jeu de modèles de pages modifiables et de pages personnalisées. Vous pouvez utiliser le langage de création de modèles du centre d’aide, Curlybars, pour accéder aux données du centre d’aide et manipuler le contenu de vos pages.
Cet article fournit une liste de « recettes » incluant des snippets de code que vous pouvez utiliser. N’oubliez pas que certaines fonctionnalités de ces recettes se trouvent peut-être déjà dans votre centre d’aide : cela dépend du thème que vous utilisez (standard ou personnalisé) et de la date à laquelle vous avez activé votre centre d’aide.
- À propos du langage de création de modèles Curlybars
- Personnalisation des modèles de page pour des catégories, sections ou articles spécifiques
- Personnalisation des noms de langue dans le sélecteur de langue
- Masquage d’une ou plusieurs langues dans le sélecteur de langue
- Permettre aux utilisateurs de trier les commentaires sur les articles par date ou par votes
- Ajout d’une barre d’outils de formatage à l’éditeur de commentaires
- Permettre aux utilisateurs de voter pour ou contre les commentaires sur les articles
- Ajout de résultats de recherche instantanée (remplissage automatique) à votre centre d’aide
- Ajoutez la recherche fédérée pour inclure le contenu externe dans les recherches du centre d’aide
- Ajout du tri pour les types d’abonnements dans la page Abonnements de Mes activités
- Ajout des options de tri « created at » et « updated at » pour les demandes dans Mes activités
- Ajout de S’abonner/Annuler l’abonnement pour les utilisateurs d’une organisation partagée
- Ajout de la possibilité pour les utilisateurs d’ajouter d’autres utilisateurs en copie pour leurs demandes d’assistance
- Ajout d’un lien vers la demande parente aux demandes de suivi
- Ajout de boutons de vote aux articles
- Ajout de marqueurs de contenu aux articles et publications
- Ajout de badges à votre thème du centre d’aide personnalisé
- Permettre aux utilisateurs de voir les profils des utilisateurs dans votre centre d’aide
- Activation des sous-sections dans le thème de votre centre d’aide
- Ajout de filtres de barre latérale et des résultats pour plusieurs centres d’aide à la page des résultats de recherche
À propos du langage de création de modèles Curlybars
Votre centre d’aide s’appuie sur un framework de thèmes qui inclut son propre langage de création de modèles pour les personnalisations avancées. Chaque thème du centre d’aide se compose d’un jeu de modèles modifiables et de pages personnalisées facultatives.
Les modèles de pages modifiables définissent la disposition de chaque page. Par exemple, il y a un modèle pour les articles de la base de connaissances, un modèle pour la liste de demandes, etc. Un modèle est simplement un fichier texte qui est rendu dans une page HTML quand un utilisateur veut l’afficher. Chaque modèle se compose d’un mélange de balises et d’expressions HTML identifiables aux doubles accolades, par exemple {{post.title}}.
Les pages personnalisées sont intégrées au code du thème de votre centre d’aide et ont une URL spécifique vers laquelle vous pouvez créer un lien à partir de n’importe quel endroit de votre centre d’aide. Vous pouvez utiliser les pages personnalisées pour créer et programmer des pages adaptées à vos besoins spécifiques. Par exemple, vous pouvez utiliser les pages personnalisées pour créer des pages d’accueil spéciales pour votre centre d’aide ou même créer de nouvelles pages pour incorporer le contenu de sources extérieures à Zendesk.
Le langage de création de modèles du centre d’aide s’appelle Curlybars et utilise une grande partie du langage Handlebars. Mais contrairement à Handlebars qui effectue le rendu côté client, Curlybars effectue le rendu côté serveur.
Vous pouvez utiliser le langage de création de modèles du centre d’aide pour accéder aux données du centre d’aide et manipuler le contenu de vos pages. Dans l’exemple suivant, le centre d’aide rend une liste des noms et des avatars de toutes les personnes qui ont laissé des commentaires sur la page.
{{#each comments}}
<li>
<div class="comment-avatar">
<img src="{{author.avatar_url}}" alt="Avatar" />
</div>
<div class="comment-author">
{{author.name}}
</div>
</li>
{{/each}} Précédemment, vous pouviez utiliser les composantes pour personnaliser le centre d’aide, mais vous ne pouviez pas personnaliser les composantes, sauf pour les manipuler dans JavaScript. Avec Curlybars, vous pouvez accéder au code HTML qui était auparavant masqué au sein des composantes et le modifier.
Personnalisation des modèles de page pour des catégories, sections ou articles spécifiques
Vous pouvez personnaliser les modèles de catégorie, de section et d’article pour des catégories, sections et articles spécifiques.
- Catégorie
- Section
- Article
- Spécifiez l’ID de la catégorie, de la section ou de l’article dans un bloc
is:{{#is id 200646205}} ... {{/is}}
Exemple
L’insertion du bloc suivant dans le modèle de section personnalise le modèle pour les sections 200646205 et 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}}Référence
Personnalisation des noms de langue dans le sélecteur de langue
Vous pouvez personnaliser les noms de langue dans le sélecteur de langue à chaque page du centre d’aide. Cela est utile si voulez utiliser une variante d’une langue, comme « English (U.S.) », pour toutes les variantes d’une langue, comme « English ».
- En-tête
{{#if alternative_locales}}...{{/if}}
- Remplacez l’expression
{{current_locale.name}}par l’expression conditionnelle suivante :{{#is current_locale.name 'English (US)'}} English {{else}} {{current_locale.name}} {{/is}}Remplacez aussi l’autre expression de langue
{{name}}par l’expression conditionnelle suivante :{{#is name 'English (US)'}} English {{else}} {{name}} {{/is}}
Exemple
{{#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}}Référence
Masquage d’une ou plusieurs langues dans le sélecteur de langue
Masquer une langue dans le sélecteur de langue peut être utile si le contenu dans cette langue n’est pas prêt à être publié.
- En-tête
{{#each alternative_locales}}...{{/each}}
- Remplacez l’expression
{{name}}par l’expression conditionnelle suivante :{{#is name 'Français'}} {{! do nothing }} {{else}} <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> {{/is}}
Exemple
{{#each alternative_locales}}
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/is}}
{{/each}}Référence
Permettre aux utilisateurs de trier les commentaires sur les articles par date ou par votes
Par défaut, les commentaires sur les articles sont triés par date, du plus récent au plus ancien. Vous pouvez ajouter des liens Date et Votes sur lesquels les utilisateurs peuvent cliquer pour trier les commentaires par date ou par nombre de votes.
- Article
...
- Insérez la balise div suivante après la balise de titre de la section de commentaires,
{{t 'comments'}}
{{#if comments}}le cas échéant, pour vous assurer que les liens de tri ne s’affichent pas si personne n’a encore laissé de commentaires :<div class="comment-sorter"> Sort by: {{#each comment_sorters}} <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a> {{/each}} </div>
Exemple
<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}}
...Référence
Ajout d’une barre d’outils de formatage à l’éditeur de commentaires
Vous pouvez ajouter une barre d’outils de formatage à l’éditeur pour les commentaires sur les articles. Les utilisateurs peuvent ajouter gras et italique, listes triées ou non, images et liens.
- Article
{{#form 'comment'}}...{{/form}}
- Cherchez et remplacez l’expression
{{textarea 'body'}}dans l’objet de formulaire avec{{wysiwyg 'body'}}.
Exemple
{{#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}}Référence
Permettre aux utilisateurs de voter pour ou contre les commentaires sur les articles
Par défaut, les utilisateurs peuvent voter pour ou contre les articles. Vous pouvez aussi leur permettre de le faire pour les commentaires sur les articles.
- Article
{{#each comments}}...{{/each}}
- Insérez la balise div suivante après la balise
:<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>Les assistants de vote ci-dessus empruntent les classes CSS pour les votes sur les articles afin de styliser les liens de votes pour les commentaires. Vous pouvez définir vos propres classes pour styliser les votes pour les commentaires.
Exemple
{{#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>
...Référence
Ajout de résultats de recherche instantanée (recherche avec remplissage automatique) au thème personnalisé de votre centre d’aide
Vous pouvez afficher les liens vers les articles suggérés quand l’utilisateur tape dans le champ de recherche en ajoutant la recherche instantanée à votre thème personnalisé.
Quand la recherche instantanée est activée, un maximum de six articles suggérés s’affiche quand l’utilisateur tape son terme de recherche dans le champ de recherche. Dans le cadre de la recherche instantanée, les suggestions d’articles sont fondées sur les titres des articles uniquement. L’utilisateur peut sélectionner les articles suggérés directement dans le champ de recherche, sans passer par la page des résultats de recherche.
- Le modèle qui contient votre expression de recherche (il s’agit le plus souvent du modèle de page de titre ou d’accueil)
Expression applicable
- {{search}}
- Ajoutez
instant=trueà l’expression de recherche.{{search instant=true}}
Exemple
<div class="search-box">
<h1 class="help-center-name">{{help_center.name}}</h1>
{{search instant=true}}
</div>Ajoutez la recherche fédérée pour inclure le contenu externe dans les recherches du centre d’aide
L’activation de la recherche fédérée dans le modèle Résultats de la recherche de votre centre d’aide se fait en deux temps :
Ajout de filtres de barre latérale
Vous devez mettre le modèle Résultats de la recherche à jour en mettant à jour les propriétés utilisées dans les filtres de barre latérale.
.
<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>
Parcourir les résultats
Ce snippet est un exemple de la façon dont vous pouvez utiliser l’assistant {{results}} pour parcourir les résultats de la recherche fédérée.
{{#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 12 12” height=”12”
id=”zd-svg-icon-12-new-window-fill”>
<path fill=”none” stroke=”currentColor” stroke-linecap=:round”
d=M10.5 8.5V10c0 .28-.22.5-.5.5H2c-28
0-.5-.22-.5-.5V2c0-.28.22-.5.5-.5h1.5M6 614-4”></path>
</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}}Ajout du tri pour les types d’abonnements dans la page Abonnements de Mes activités
Vous pouvez aider les utilisateurs à consulter leurs abonnements plus facilement en leur permettant de les trier par type à la page Mes activités > Abonnements.
- Page Abonnements
- Sous la balise
, insérez le code suivant :<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>
Ajout des options de tri « created at » et « updated at » pour les demandes dans Mes activités
Vous pouvez ajouter les options de tri « created at » et « updated at » pour les utilisateurs finaux à la page de demandes de Mes activités.
- Page Liste de demandes
Recette
- Remplacez
{{t 'created'}}par :{{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} - Remplacez
{{t 'last_activity'}}par :{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
Ajout de S’abonner/Annuler l’abonnement pour les utilisateurs d’une organisation partagée
Vous pouvez permettre aux utilisateurs de recevoir les notifications par e-mail pour les demandes dans leur organisation partagée. L’assistant {{subscribe}} insère un bouton d’abonnement sur lequel les utilisateurs peuvent cliquer s’ils souhaitent recevoir des notifications par e-mail quand des demandes sont créées ou mises à jour dans leur organisation partagée. Les utilisateurs peuvent aussi annuler leur abonnement s’ils ne veulent plus recevoir ces mises à jour.
- Page Liste de demandes
{{#form 'requests_filter'}}...{{/form}}
- Ajoutez la balise
{{subscribe}}à l’objet form.
Exemple
{{#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}}Référence
Ajout de la possibilité pour les utilisateurs connectés d’ajouter d’autres utilisateurs en copie pour leurs demandes d’assistance
Vous pouvez permettre aux utilisateurs connectés d’ajouter d’autres utilisateurs en copie pour leurs demandes d’assistance nouvelles et existantes dans votre centre d’aide. Quand un utilisateur est ajouté en copie pour une demande d’assistance, il reçoit les notifications par e-mail quand le ticket est mis à jour.
Une fois que vous avez ajouté le code à votre thème personnalisé, vous devez activer la fonctionnalité [consultez Configuration des permissions d’envoi de copies (CC)].
- Page Demande
{{#form 'comment' class='comment-form'}}...{{/form}}
- Insérez le snippet suivant dans le formulaire de commentaires.
{{#if help_center.request_ccs_enabled}} <div class="comment-ccs"> {{token_field 'ccs' class="ccs-input"}} </div> {{/if}}
Ajout d’un lien vers la demande parente aux demandes de suivi
Vous pouvez afficher un lien vers la demande parente, le cas échéant, dans les demandes de suivi.
- Page Demande
Recette
- Ajoutez le snippet suivant au modèle de la page de demandes, à l’endroit où vous voulez afficher le lien vers le ticket parent (le cas échéant) :
{{#if request.followup_source_id}} <dl class="request-details"> <dt>{{t 'followup'}}</dt> <dd>{{link 'request' id=request.followup_source_id}} </dd> </dl> {{/if}}
Ajout de boutons de vote aux articles
Les boutons de vote pour les articles font partie du thème Copenhague standard. Cependant, si vous ne voyez pas l’option de vote pour vos articles, il est possible que vous ayez supprimé ces boutons de votre thème.
Le code servant à ajouter les boutons de vote peut varier d’un thème à l’autre, mais voici le code pour le thème Copenhague standard, si vous en avez besoin.
- Article
- Ajoutez le code suivant au modèle de la page Article :
{{#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}}
Ajout de marqueurs de contenu aux articles et publications
Par défaut, le thème Copenhagen standard affiche les marqueurs de contenu pour les articles, les publications de la communauté et les pages de recherche. Si vous utilisez un thème personnalisé ou de Marketplace, vous devrez peut-être mettre votre thème à jour pour afficher les marqueurs de contenu sur ces pages. Pour commencer, vous pouvez utiliser les fichiers de modèle du thème Copenhagen suivants comme guide :
Une fois que vous vous sentez à l’aise, vous pouvez ajouter des marqueurs de contenu à d’autres pages. Par exemple, le snippet ci-dessous ajoute une liste de marqueurs de contenu au modèle de page de sujet de la communauté.
{{#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}}Ajout de badges à votre thème du centre d’aide personnalisé
Ce sujet traite :
Ajout du nouvel assistant d’actions du profil d’utilisateur
Vous devez ajouter l’option Attribuer un badge si vous voulez attribuer des badges aux agents. Cependant, avant de pouvoir le faire, vous devez ajouter le nouvel assistant d’actions.
Pour ajouter la déclaration de l’assistant d’actions
- Ouvrez l’éditeur de code de thème en ligne et allez à la page de profil d’utilisateur d’un agent.
Page filename: user_profile_page.hbs
- Trouvez la déclaration de l’assistant edit.
{{edit}} - Remplacez cette déclaration par la déclaration du nouvel assistant d’actions.
{{actions}}
Les agents pourront désormais attribuer des badges. Le style du nouveau bouton utilisera en fonction et dépendra de vos préférences. Pour trouver l’inspiration, consultez l’exemple de thème Zendesk.
Affichage des badges de titre à la page des listes de publications
Vous pouvez utiliser des badges de titre comme libellés, en regard du nom de l’auteur à la page des listes des publications. Cela ressemble aux libellés de statut des publications car, pour des raisons de simplicité, le même style est utilisé.
Pour afficher les badges de titre à la page des listes de publications
- Ouvrez l’éditeur de code de thème en ligne.
Page filename: community_topic_page.hbs
- Cherchez la déclarationauthor name. Dans le thème Copenhagen, la ligne en question ressemble à ce qui suit :
<li class="meta-data">{{author.name}}</li> - Ajoutez ce snippet à la fin de la ligne.
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Pour les utilisateurs avancés - Ne (ré)utilisez pas la classe CSS status-label pour ce scénario. Créez plutôt une nouvelle classe CSS spécialisée que vous pouvez modifier indépendamment du style du libellé de statut.
Voici un exemple de badge de titre pour un membre de la communauté.
Affichage des badges de titre à la page d’une publication et de commentaires
Pour afficher les badges de titre à la page des listes de publications
- Ouvrez l’éditeur de code de thème en ligne.
Page filename: community_post_page.hbs
- Cherchez la déclarationauthor name. Dans le thème Copenhagen, la ligne en question ressemble à ce qui suit :
<li class="meta-data">{{author.name}}</li> - Ajoutez ce snippet à la fin de la ligne.
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
Affichage des badges de titre et d’accomplissements à la page de profil d’un utilisateur
À la page de profil d’un utilisateur, il est probable que vous vouliez ajouter plus que des badges de titre. Vous pouvez aussi ajouter les accomplissements de l’utilisateur. L’exemple suivant suppose qu’il y a une icône graphique pour chaque badge Accomplissement. Basés sur le thème Copenhagen, vos badges d’accomplissement peuvent ressembler à ce qui suit.
Pour afficher les badges de titre et d’accomplissement à la page de profil d’un utilisateur
- Ouvrez l’éditeur de code de thème en ligne.
Page filename: user_profile_page.hbs
- Dans le fichier, cherchez les lignes où le nom de l’utilisateur est rendu. Par exemple :
<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> - Remplacez ce snippet par ce qui suit :
<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>
Dans cet exemple, tous les éléments de style CSS sont incorporés à des fins de simplicité. Utilisez ces exemples comme source d’inspiration, mais prenez le temps de vous assurer que le style correspond bien à votre thème.
Permettre aux utilisateurs de voir les profils des utilisateurs dans votre centre d’aide
Cette section décrit la façon de mettre à jour les modèles nécessaires pour que les utilisateurs de votre centre d’aide puissent cliquer sur le nom ou l’avatar de l’auteur et consulter son profil d’utilisateur.
link dans le langage de création de modèles Curlybars (consultez la section portant sur l’assistant link dans la documentation pour les modèles) pour mettre à jour les modèles suivants :
Articles
Mettez à jour le modèle de la page Article comme suit.
Mise à jour du nom de l’auteur de l’articleRemplacez le bloc if suivant :
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
par l’assistant link suivant :
{{#link "user_profile" id=article.author.id class="user-profile"}}
{{article.author.name}}
{{/link}}
Mise à jour des noms des auteurs des commentaires
Remplacez le bloc if suivant :
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
par l’assistant link suivant :
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Mise à jour des avatars des auteurs de l’article et des commentaires
Remplacez la balise d’image suivante :
<img src="{{article.author.avatar_url}}" alt="Avatar"/>
par l’assistant link suivant :
{{#link "user_profile" id=article.author.id class="user-profile"}}
<img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}
Publications de la communauté
Mettez à jour le modèle de la page Publication de la communauté comme suit.
Mise à jour des noms des auteurs des publicationsRemplacez le bloc if suivant :
{{#if post.author.url}}
<a href="{{post.author.url}}" target="_zendesk_lotus">
{{post.author.name}}
</a>
{{else}}
{{post.author.name}}
{{/if}}
par l’assistant link suivant :
{{#link "user_profile" id=post.author.id class="user-profile"}}
{{post.author.name}}
{{/link}}
Mise à jour des noms des auteurs des commentaires
Remplacez le bloc if suivant :
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
par l’assistant link suivant :
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Mise à jour des avatars des auteurs des publications
Remplacez la balise d’image suivante :
<img src="{{post.author.avatar_url}}" alt="Avatar"/>
par l’assistant link suivant :
{{#link "user_profile" id=post.author.id class="user-profile"}}
<img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
Mise à jour des avatars des auteurs des commentaires
Remplacez la balise d’image suivante :
<img src="{{author.avatar_url}}" alt="Avatar"/>
par l’assistant link suivant :
{{#link "user_profile" id=author.id class="user-profile"}}
<img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}
Résultats de recherche
Mettez à jour le modèle de la page Résultats de recherche comme suit.
Mise à jour des noms des auteurs des articles dans les résultatsRemplacez le bloc if suivant dans le bloc {{#each article_results}} :
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
par l’assistant link suivant :
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Mise à jour des noms des auteurs des publications dans les résultats
Remplacez le bloc if suivant dans le bloc {{#each post_results}} :
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
par l’assistant link suivant :
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Mise à jour des résultats de recherche dans les thèmes plus anciens
Si vous utilisez un thème plus ancien, il est possible que les résultats de recherche utilisent plutôt l’assistant {{meta}}. Dans ce cas, vous pouvez utiliser le code décrit dans cette section pour lier les noms des auteurs à leurs pages de profil dans votre centre d’aide.
Vous devrez peut-être mettre à jour vos styles CSS pour que la page des résultats de recherche ait un aspect uniforme.
Mise à jour des noms des auteurs des articles dans les résultatsRemplacez les balises div suivantes :
<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>
Par ce qui suit :
<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>
Pour le résultat final :
{{#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}}
Mise à jour des noms des auteurs des publications dans les résultats
Ajoutez :
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
Pour le résultat final :
{{#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}}
Activation des sous-sections dans le thème de votre centre d’aide
Vous pouvez ajouter des sous-sections à la base de connaissances de votre centre d’aide afin de créer des niveaux supplémentaires dans la hiérarchie de votre contenu. Vous devez ajouter du code au thème de votre centre d’aide pour activer les sous-sections si vous utilisez un thème qui a été personnalisé avant le 29 mars 2019. Le code suivant est fourni avec les versions plus récentes du thème Copenhagen.
- Section
section.sections
- Insérez le snippet suivant dans le modèle de page de section Zendesk, section_page.hbs, après la balise d’en-tête (
... {{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}}
Ajout de filtres de barre latérale et des résultats pour plusieurs centres d’aide à la page des résultats de recherche
La recherche dans le centre d’aide permet aux utilisateurs d’effectuer des recherches dans tous les centres d’aide, si vous en avez plusieurs, et de présenter les résultats de recherche de tous ces centres d’aide, de la base de connaissances et de la communauté dans un seul flux avec des filtres sur la page des résultats.
Vous devez ajouter du code au thème de votre centre d’aide pour prendre en charge les résultats de recherche unifiés et la recherche dans plusieurs centres d’aide si vous utilisez un thème qui a été personnalisé avant le 29 mars 2019. Si vous avez plusieurs centres d’aide, vous devez mettre votre thème à jour pour chacun d’entre eux.
La façon la plus rapide d’appliquer les changements nécessaires à votre thème est d’importer la dernière version du thème Copenhagen qui prend en charge les résultats de recherche unifiés. Pour ce faire, consultez Ajout d’un thème de centre d’aide à Guide.
help_center_filters, filters et subfilters dans le langage de création de modèles Curlybars pour mettre à jour les fichiers suivants :
Mise à jour du modèle des résultats de recherche pour ajouter des filtres de barre latérale
Vous devez mettre à jour le modèle des résultats de recherche pour ajouter des filtres de barre latérale et parcourir les résultats.
Ajout de filtres de barre latérale
Ce snippet est un exemple de la façon dont vous pouvez implémenter diverses facettes de recherche dans la barre latérale de la page des résultats de recherche en utilisant les nouveaux assistants de filtre.
Insérez le code suivant dans Ce snippet est un exemple de la façon dont vous pouvez utiliser l’assistant {{results}} pour parcourir les résultats unifiés. Remplacez les assistants dans le modèle des résultats de recherche par ce qui suit :
<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}} et {{post_results}}, et les search-results-subheading H3s associés{{#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}}
Mise à jour des styles CSS pour les filtres de barre latérale dans la page des résultats de recherche
Vous pouvez ajouter des styles CSS pour les filtres de barre latérale. L’exemple suivant utilise le thème Copenhagen.
Vérifiez que les règles CSS suivantes sont incluses dans votre fichier 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;
}
Mise à jour de JavaScript pour la barre latérale escamotable dans la page des résultats de recherche
Vous pouvez ajouter du code JavaScript pour la barre latérale escamotable dans la page des résultats de recherche. L’exemple suivant utilise le thème Copenhagen.
Remplacez le bloc suivant dans le fichier the script.js du thème personnalisé :
// 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);
});
});
par le snippet de code suivant :
// 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);
}
});
});