Avec l’ajout de Curlybars, notre langage de création de modèles pour votre Centre d’aide, vous avez pu ajouter des déclarations conditionnelles, ce qui permet de dynamiser le rendu des pages de votre Centre d’aide. Grâce aux déclarations conditionnelles, nous pouvons cibler l’identifiant unique d’une catégorie, d’une section, d’un article, d’une rubrique ou d’une publication et masquer cet élément tout en affichant d’autres.
Si vous avez besoin de trouver l’identifiant de l’élément que vous souhaitez masquer, il vous suffit d’accéder à la page de cet élément et de consulter l’URL. Vous devriez trouver une chaîne de caractères ressemblant à /hc/en-us/categories/200420805-General
. En l’occurrence, 200420805
est l’identifiant de ma catégorie.
Voici une petite animation pour mettre en évidence ce que j’essaie de faire quand je masque une catégorie dans la page d’accueil du Centre d’aide (regardez « Category 1 ») :
Le code
Je vais présenter ici quelques scénarios pour expliquer comment les utiliser. Dans ces exemples, je vais utiliser le code par défaut du thème du Centre d’aide Copenhagen. J’utiliserai principalement l’assistant isnt, car, selon le principe de base, si la valeur ne correspond pas, il faut restituer le code affiché, masquant (ou n’affichant pas) l’élément identifié. Ainsi que vous pouvez le voir, je souhaite exclure ici une catégorie spécifique de la page d’accueil, je l’ai donc passée à l’instruction isnt
:
J’ai joint tout le code de mon modèle de page d’accueil ici. Vous pouvez changer mon identifiant de catégorie par le vôtre, et vous serez ensuite en mesure de cacher vos catégories.
Masquage de plusieurs éléments
Masquer plusieurs éléments nécessite quelques lignes de code supplémentaires, car nous ne pouvons pas affecter plusieurs identifiants à une seule instruction conditionnelle. Nous devons plutôt imbriquer les instructions conditionnelles afin qu’elles puissent être analysées correctement. Voici un exemple :
Si vous voulez télécharger le code pour masquer plusieurs catégories, vous pouvez le trouver ici.
Autre exemple avec les articles
Je sais que j’ai beaucoup parlé des catégories et c’est pourquoi je voulais montrer comment implémenter cela dans un autre espace. Mon scénario est le suivant : je souhaite réduire l’exposition d’un certain article, tout en le rendant accessible via la recherche ou un lien direct avec mes clients. J’ai choisi la page d’article dans le thème Copenhagen où d’autres articles de la même section que celui-ci, apparaissent dans une barre latérale de ce type :
Vous avez peut-être déjà caché votre article au niveau de la section mais nous aimerions le cibler ici :
Encore une fois, voici le code si vous souhaitez l’essayer avec votre modèle d’article.
Quelques notes techniques sur cette fonctionnalité
Vous avez peut-être remarqué une tendance ici selon laquelle le code était implémenté dans l’assistant {{#each}}
qui parcourt le tableau des éléments spécifiques demandés. L’assistant « each » est natif dans handlebars.js, vous pouvez en apprendre plus à ce sujet ici. Dans la dernière image ci-dessus, {{#each section.articles}}
figure dans le code de rendu des articles de la section en cours, mais lorsque l’article est rencontré avec l’identifiant 219527708
, ce code est ignoré et le rendu passe à l’article suivant.
Cela constitue un bon début, mais il existe sans doute d’autres moyens d’obtenir un comportement similaire, n’hésitez donc pas à tenter votre chance avec d’autres assistants conditionnels.