Pour ajouter du texte enrichi à une carte, nous devrons mettre à jour la carte concernée de plusieurs manières. Assurez-vous d'avoir copié une carte que vous pouvez modifier au niveau supérieur et de ne pas modifier une carte dans le thème lui-même.

1. Associer la propriété details au texte enrichi HTML : utilisez soit le formateur de texte enrichi, soit un champ Markdown ou Rich Text (v2).
2. Gérer la troncature du texte enrichi : si vous utilisez le formateur de texte enrichi, vous pouvez soit désactiver la troncature, soit mettre à jour la carte pour gérer la troncature RTF, selon le thème que vous utilisez. Notez que si vous utilisez un champ Markdown ou Rich Text (v2), la troncature n'est pas intégrée au thème.
3. Mettez à jour le modèle Handlebars pour permettre l'affichage du HTML sur la page.
4. Ajoutez un style facultatif au texte enrichi.

Le texte enrichi est le plus souvent utilisé pour la section details des cartes, mais vous pouvez l'utiliser avec n'importe quel champ que vous avez stocké en tant que champ de texte enrichi dans le Knowledge Graph. Assurez-vous de mettre à jour ce champ au lieu de details, qui est référencé dans le reste de cet article.

Pour changer les cartes pour prendre en charge le texte enrichi :

1. Associer la propriété details au texte enrichi HTML : dans le fichier de la carte component.js, définissez la propriété details pour qu'elle inclut le champ de texte enrichi. La manière dont vous convertissez le texte enrichi en HTML dépend du type de champ de texte enrichi que vous utilisez :
   • Si vous utilisez un champ Markdown ou Rich Text (v2), utilisez le sous-champ HTML du champ que vous souhaitez afficher (remplacez c_testRTDescription par le nom d'API de votre champ) :

     • details: profile.c_testRTDescription ? profile.c_testRTDescription['html'] : null

   • Si vous utilisez un champ Legacy Rich Text (v1), utilisez le formateur de texte enrichi (remplacez answer par le nom API de votre champ). Consultez le document de référence sur les formateurs communs pour en savoir plus sur le formateur de texte enrichi.

     • details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null,

2. Gérer la troncature du texte enrichi : la manière dont vous gérez les fonctionnalités 'afficher plus' et la troncature dépend du type de champ que vous utilisez et de la version du thème sur laquelle vous travaillez :
   • • Si vous utilisez un champ Markdown ou Rich Text (v2), la troncature de texte enrichi n'est pas intégrée au thème. Si votre champ de texte enrichi contient plus de contenu que ce que vous souhaitez faire tenir sur une carte, nous vous suggérons d'utiliser les extraits par défaut intégrés à la carte standard du document (plutôt que ce que vous avez fait à l'étape 1). Voici à quoi cela ressemble :

       • dataForRender(profile) { 
           let detailsData = ''; 
           if (profile?.d_highlightedFields?.s_snippet) { 
             const { value, matchedSubstrings } = profile.d_highlightedFields.s_snippet; 
             detailsData = Formatter.highlightField(value, matchedSubstrings); 
           } else if (profile.s_snippet) { 
              detailsData = profile.s_snippet; 
           } 
         
           return { 
             ... 
             details: detailsData, // Le texte dans le corps de la carte

1. • Si vous utilisez un champ de type Legacy Rich Text (v1) et que vous êtes sur le Thème 1.28 ou une version inférieure, désactivez la fonctionnalité Afficher plus/Afficher moins. Le risque est qu'avec la troncature, vous pourriez enlever une balise de fermeture (par ex. </div>, </p>), ce qui pourrait empêcher l'affichage de la page. Commentez ou supprimez l'objet showMoreDetails dans le fichier component.js de votre carte.

     • // showMoreDetails: { 
       // showMoreLimit: 750, // Limite du nombre de caractères 
       // showMoreText: 'Afficher plus', // Mention pour afficher du texte tronqué
       // showLessText: 'Afficher moins' // Mention pour masquer du texte tronqué 
       // }, 

   • Si vous utilisez un champ Legacy Rich Text (v1) et que vous êtes sur le Thème 1.29 ou une version supérieure, vous pouvez utiliser la troncature RTF. Utilisez showMoreDetails avec truncatedDetails. Si cela existe sur votre carte, vous devrez peut-être ajouter des commentaires. Sinon, modifiez le fichier component.js de votre carte pour qu'il ressemble à ceci (remplacez answer par le nom API de votre champ) :

     • return {
         title: profile.name, // Le texte d'en-tête de la carte
         ...
         details: profile.answer ? ANSWERS.formatRichText(profile.answer, 'answer',
       linkTarget) : null, // Le texte du corps de la carte
         // Si les détails dépassent un certain nombre de caractères, vous pouvez tronquer le texte //. Un bouton sera fourni pour afficher ou masquer le texte tronqué.
         // Remarque : si vous utilisez du texte enrichi pour les détails, vous ne devez pas activer cette fonctionnalité.
           showMoreDetails: {
             truncatedDetails: profile.answer ? ANSWERS.formatRichText(profile.answer,
       'answer', linkTarget, 38) : null, // Nombre limite de caractères
             showMoreText: 'Afficher plus', // Mention pour afficher du texte tronqué
             showLessText: 'Afficher moins' // Mention pour masquer du texte tronqué
         },
         ...
       }

       • La valeur de truncatedDetails est similaire à details, mais elle transmet un paramètre supplémentaire à ANSWERS.formatRichText: le nombre de caractères à partir duquel le contenu du texte enrichi sera tronqué, dans cet exemple : 38. Ce nombre de caractères ignorera tous les caractères non textuels, tels que les balises HTML et le formatage. Toute valeur de chaîne peut être passée dans truncatedDetails. Par exemple, si vous avez les détails de carte ci-dessous, les 3 hashtags au début et au milieu seront ignorés, ainsi que les symboles de nouvelle ligne :
       • Par défaut, des points de suspension sont ajoutés à la fin du texte tronqué. Cela peut être personnalisé en ajoutant un paramètre supplémentaire à ANSWERS.formatRichText pour spécifier le suffixe. Pour supprimer complètement les points de suspension, vous pourriez spécifier une chaîne vide à la place :

         • ANSWERS.formatRichText(profile.answer, 'answer', linkTarget, 38, '')

3. Mettez à jour le modèle Handlebars pour permettre l'affichage du HTML sur la page. Ajoutez {{{ }}} à la section details de votre modèle Handlebars. Cela garantit que le HTML est rendu sur la page, au lieu d'être imprimé tel quel ou d'inclure un échappement HTML.
   • Ceci est effectué par défaut dans la carte intégrée faq-accordéon. Si vous copiez une carte, assurez-vous que les champs qui utilisent du texte enrichi sont entourés de triples accolades dans le fichier template.hbs de la carte.

     • • <div class="HitchhikerFaqAccordion-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} 
         js-hidden{{/if}}"> 
            {{{card.details}}} 
         </div>

4. (Facultatif) Ajouter un style.
   • Il se peut que vous souhaitiez ajouter un style supplémentaire. Par exemple, l'espacement entre les paragraphes et le style des liens. Le style recommandé est le suivant :

     • .HitchhikerFaqAccordion-details
       {
         p, ul, ol
         {
           margin-bottom: .5rem
         }
       
         a
         {
           color: var(--yxt-color-brand-primary);
           text-decoration: underline;
       
           &:hover {
           text-decoration: none;
           }
         }
       }