Mon édition
Suite Growth, Professional, Enterprise ou Enterprise Plus
Support avec Guide Professional ou Enterprise

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.

L’édition Professional, qui comprend des options de modification de code, est proposée aux utilisateurs ayant choisi la version d’essai, mais s’ils achètent Suite Team, ils ne pourront plus accéder à cette fonctionnalité.

Remarque – Cet article est fourni à titre informatif uniquement. Le service client Zendesk ne fournit pas d’assistance pour le code personnalisé et ne le garantit pas.
Cet article aborde les sujets suivants :
  • À 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 des résultats de la recherche générative à votre thème personnalisé
  • 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
  • Activation de la CSAT pour les tickets résolus dans le portail client
  • 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
  • Ajout du filtre anti-spam au centre d’aide

À 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.

Pour en savoir plus, consultez
  • Référence du langage de création de modèles du centre d’aide
  • Utilisation du langage de création de modèles du centre d’aide
  • Personnalisation du contenu avec Curlybars

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.

Modèles applicables
  • Catégorie
  • Section
  • Article
Recette
  • 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

  • Assistant is

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 ».

Modèle applicable
  • En-tête
Expression applicable
  • {{#if alternative_locales}}...{{/if}}
Recette
  • 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

  • Assistant is

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é.

Modèle applicable
  • En-tête
Expression applicable
  • {{#each alternative_locales}}...{{/each}}
Recette
  • Remplacez l’expression <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> 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

  • Assistant is

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.

Remarque – Les liens de tri Date et Votes sont disponibles par défaut dans les thèmes standards et dans les thèmes qui ont été personnalisés après le lancement de la nouvelle communauté le 30 novembre 2015.
Modèle applicable
  • Article
Élément HTML applicable
  • <section class="article-comments">...</section>
Recette
  • Insérez la balise div suivante après la balise de titre de la section de commentaires, <h2>{{t 'comments'}}</h2>, si possible après l’expression {{#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

  • Propriété comment_sorters

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.

Remarque – La barre d’outils de formatage est disponible par défaut dans les thèmes standards et dans les thèmes qui ont été personnalisés après le lancement de la nouvelle communauté le 30 novembre 2015.
Modèle applicable
  • Article
Objet applicable
  • {{#form 'comment'}}...{{/form}}
Recette
  • 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

  • Assistant wysiwyg

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.

Remarque – Les liens de vote sont disponibles par défaut dans les thèmes standards et dans les thèmes qui ont été personnalisés après le lancement de la nouvelle communauté le 30 novembre 2015.
Modèle applicable
  • Article
Expression applicable
  • {{#each comments}}...{{/each}}
Recette
  • Insérez la balise div suivante après la balise <li id="{{anchor}}"> :
    <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

  • Assistant vote

Ajout des résultats de la recherche générative à votre thème personnalisé

Important : le déploiement général de la recherche générative a commencé le 1er avril 2025 et elle sera activée par défaut dans les paramètres Guide. La recherche générative ne sera pas visible par les utilisateurs finaux jusqu’à ce qu’elle soit disponible pour tous, le 5 mai. À partir du 1er avril, si vous ne souhaitez pas utiliser cette fonctionnalité, vous pouvez désactiver les résultats de la recherche générative en désactivant le paramètre de recherche Réponses rapides dans chaque centre d’aide duquel vous voulez supprimer cette fonctionnalité.

La recherche générative fournit des réponses générées par l’IA aux recherches effectuées dans votre centre d’aide. La recherche générative fournit aux utilisateurs qui effectuent des recherches dans le centre d’aide des réponses à leurs questions, sans qu’ils aient à cliquer sur plusieurs résultats de recherche.

Remarque – La recherche générative est disponible par défaut dans les thèmes standards et les thèmes personnalisés après le 25 mars 2025. Si besoin est, vous pouvez désactiver la recherche générative dans vos paramètres de recherche.

Une fois activée, la recherche générative fonctionne en évaluant les questions que saisissent les utilisateurs dans la recherche du centre d’aide. Les articles et les publications les plus pertinents sont évalués par l’IA générative, qui génère ensuite une réponse. Dans les éditions Enterprise avec la recherche fédérée configurée, l’IA générative évalue aussi le contenu externe, qui peut être inclus à la réponse. La réponse générée est présentée par défaut en haut des résultats de recherche. Consultez Utilisation de la recherche générative pour fournir des réponses optimisées par l’IA aux requêtes de recherche.

Modèle applicable
  • Page des résultats de recherche (search_results.hbs)
Recette
  • Ajoutez l’assistant {{generative_answers}} au modèle search_results.hbs du thème dans lequel vous voulez que les réponses génératives apparaissent.

Exemple

<section id="main-content" class="search-results-column">
{{generative_answers}}
<h1 class="search-results-subheading">

Référence

  • search_results.hbs
  • Assistant generative_answers

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é.

Remarque – La recherche instantanée est disponible par défaut dans les thèmes standards et dans les thèmes qui ont été personnalisés après son lancement le 5 juillet 2016. Vous pouvez désactiver la recherche instantanée, si besoin est, en la supprimant de votre thème.

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.

Modèles applicables
  • 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}}
Recette
  • 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
  • Parcourir les résultats

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.

Mettez le code suivant à jour dans <div class="search-results">.
<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 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}}

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.

Modèles applicables
  • Page Abonnements
Recette
  • Sous la balise <nav>, 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.

Remarque – Les options de tri « created at » et « updated at » sont disponibles par défaut dans les thèmes standards et les thèmes qui ont été personnalisés après août 2016.
Modèle applicable
  • 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}}
Référence
  • Assistant de liens de demandes

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.

Remarque – Le bouton S’abonner pour les organisations partagées est disponible par défaut dans les thèmes standards et dans les thèmes qui ont été personnalisés après le 23 janvier 2016.
Modèle applicable
  • Page Liste de demandes
Objet applicable
  • {{#form 'requests_filter'}}...{{/form}}
Recette
  • 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

  • assistant subscribe

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.

Remarque – L’option CC est disponible par défaut pour les demandes d’assistance dans les thèmes standards et dans les thèmes qui ont été personnalisés après le 14 décembre 2015.

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)].

Modèle applicable
  • Page Demande
Objet applicable
  • {{#form 'comment' class='comment-form'}}...{{/form}}
Recette
  • 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.

Remarque – Le lien vers la demande parente dans les demandes de suivi est disponible par défaut dans les thèmes standards et dans les thèmes qui ont été personnalisés après août 2016.

Modèle applicable
  • 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}}
Référence
  • page Nouvelle demande

Activation de la CSAT pour les tickets résolus dans le portail client

Vous pouvez utiliser la CSAT pour recueillir les commentaires des utilisateurs finaux via le portail client.
Remarque – Quand la CSAT est activée, l’option CSAT dans le portail client est disponible par défaut dans les thèmes standards et les thèmes personnalisés basés sur l’API de création de modèles v3.2.0 (sortie le 8 février 2024) ou version supérieure.
Modèle applicable
  • Page Demande
Recette
  • Ajoutez un bloc {{#with satisfaction_response}}...{{/with}} au modèle request_page.hbs.
Exemple
  • Consultez Copenhagen theme request page.hbs sur GitHub.

  • Ajoutez le code de modèle suivant :
    {{#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}}
Référence
  • satisfaction_response

Ajout de boutons de vote aux articles

Les boutons de vote pour les articles font partie du thème Copenhagen 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 Copenhagen standard, si vous en avez besoin.

Modèle applicable
  • Article
Recette
  • 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 :

  • article_page.hbs
  • community_post_page.hbs
  • new_community_post_page.hbs
  • search_results.hbs

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é

Remarque – Les badges sont disponibles par défaut depuis le 1er septembre 2020.
Vous pouvez créer un thème personnalisé si vous ne voulez pas utiliser le thème Copenhagen standard. Cependant, les badges nécessitent que vous utilisiez l’API de création de modèles de thème v2. Si vous utilisez encore la version 1, suivez les instructions de mise à niveau. Vous pouvez aussi trouver l’inspiration dans l’exemple de thème Zendesk sur GitHub.

Ce sujet traite :

  • Ajout du nouvel assistant d’actions du profil d’utilisateur
  • Affichage des badges de titre à la page des listes de publications
  • Affichage des badges de titre à la page d’une publication et de commentaires
  • Affichage des badges de titre et d’accomplissements à la page de profil d’un utilisateur

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

  1. 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
  2. Trouvez la déclaration de l’assistant edit.
    {{edit}}
  3. 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

  1. Ouvrez l’éditeur de code de thème en ligne.
    Page filename: community_topic_page.hbs
  2. Cherchez la déclaration author name. Dans le thème Copenhagen, la ligne en question ressemble à ce qui suit :
    <li class="meta-data">{{author.name}}</li>
  3. 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é.

Badges Gather - Exemple de badge de titre.

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

  1. Ouvrez l’éditeur de code de thème en ligne.
    Page filename: community_post_page.hbs
  2. Cherchez la déclaration author name. Dans le thème Copenhagen, la ligne en question ressemble à ce qui suit :
    <li class="meta-data">{{author.name}}</li>
  3. 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.

Badges Gather pour le titre et l’accomplissement.

Pour afficher les badges de titre et d’accomplissement à la page de profil d’un utilisateur

  1. Ouvrez l’éditeur de code de thème en ligne.
    Page filename: user_profile_page.hbs
  2. 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>
  3. 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.

Remarque – Les profils des utilisateurs sont disponibles par défaut dans les thèmes standards et les thèmes qui ont été personnalisés après le 20 juin 2016.
Les solutions abordées dans cette section utilisent l’assistant link dans le langage de création de modèles du centre d’aide. Consultez la section portant sur l’assistant de lien dans la documentation pour les modèles) pour mettre à jour les modèles suivants :
  • Articles
  • Publications de la communauté
  • Page des résultats de recherche
Articles

Mettez à jour le modèle de la page Article comme suit.

Mise à jour du nom de l’auteur de l’article

Remplacez 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 publications

Remplacez 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ésultats

Remplacez 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ésultats

Remplacez 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.

Remarque – Les sous-sections sont disponibles par défaut pour Guide Enterprise dans les thèmes standards et les thèmes personnalisés après le 29 mars 2019.
Modèle applicable
  • Section
Objet applicable
  • section.sections
Recette
  • 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 (<header class="page-header">...</header>) et avant la base de pagination ({{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.

Remarque – Les résultats de recherche unifiés et la recherche dans plusieurs centres d’aide sont pris en charge par défaut dans les thèmes standards et les thèmes qui ont été personnalisés après le 25 septembre 2019.

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.

Si vous préférez mettre à jour votre thème personnalisé existant, cette section fournit un aperçu de toutes les modifications que vous devez apporter. Les solutions abordées dans cette section utilisent les assistants help_center_filters, filters et subfilters dans le langage de création de modèles Curlybars pour mettre à jour les fichiers suivants :
  • Résultats de recherche
  • CSS
  • JavaScript

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 <div class="search-results"> le modèle des résultats de recherche :


<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>
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 unifiés.

Remplacez les assistants {{article_results}} et {{post_results}}, et les search-results-subheading H3s associés

dans le modèle des résultats de recherche par ce qui suit :

{{#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);
      }
    });
  });

Ajout du filtre anti-spam au centre d’aide

Si vous utilisez un thème de centre d’aide personnalisé créé avant le 1er avril 2014, vous devez ajouter des éléments supplémentaires à votre feuille de style pour assurer la prise en charge du filtre anti-spam.

Les nouveaux éléments HTML suivants ont été ajoutés :
  • Page Article
    • section element with class "pending-comments-list"
    • span element with class "pending-moderation-comment-badge"
  • Page Question
    • section element with class "pending-answers-list"
    • span element with class "pending-moderation-answer-badge"
Ajoutez ce qui suit à votre feuille de style de thème personnalisé :
.pending-moderation-comment-badge, .pending-moderation-answer-badge {
border-style: solid;
border-width: 1px;
border-color: #c7aa2b;
color: #c7aa2b;
padding: 3px5px;
margin-top: 10px;
font-size: 12px;
}
Réalisé par Zendesk