Dernière modification : 22 août 2025
La balise HubL related_blog_posts peut être utilisée pour créer une liste dynamique et un listing d’articles de blog connexes en fonction d’une variété de paramètres. Elle permet de générer des listings d’articles à travers les blogs, avec la possibilité de filtrer par balise, auteur, chemin de publication et date de publication. Les développeurs peuvent également spécifier la sortie HTML du module à l’aide d’une macro. Cette balise HubL peut être utilisée à la fois sur les articles de blog et les pages. Ce tutoriel vous guidera à travers les paramètres et les options d’utilisation de la balise HubL pour les articles de blog connexes.
Veuillez noter que la balise HubL related_blog_posts ne génère pas de module modifiable au niveau de l’article/la page. Elle est configurée dans son intégralité avec HubL.

​
Paramètres

La liste des articles est générée à partir d’un score de pertinence basé sur une comparaison des valeurs de paramètres définies avec les articles correspondant à ces paramètres ou concernant l’article sur lequel la balise HubL apparaît. Aucun paramètre n’est requis. Cependant, vous pouvez spécifier des paramètres pour mieux contrôler les articles qui sont renvoyés. Pour les paramètres séparés par des virgules, plus vous définissez de valeurs, plus la liste renvoyée sera diversifiée. Le paramètre post_formatter vous permet de spécifier une macro pour générer la sortie HTML du module. Pour obtenir une liste complète des paramètres et un exemple de sortie HTML par défaut, veuillez consulter la spécification related_blog_posts.
ParameterTypeDescriptionDefault
limitnumberNombre maximal d’articles de blog à lister.3
blog_ids’default’ or blog idLe ou les ID des blogs dont vous souhaitez inclure les articles.none
tagsStringLa ou les balises qui doivent être utilisées pour déterminer si un article est pertinent (séparées par des virgules). Si un article de blog comporte l’une de ces balises ou une balise similaire, la pertinence de l’article est accrue, ce qui améliore son classement dans la liste.none
blog_authorsStringLe ou les noms des auteurs dont les articles doivent être inclus (séparés par des virgules).none
blog_post_idsStringLe ou les ID des articles de blog à utiliser pour trouver les articles de blog pertinents à lister (séparés par des virgules). Ce paramètre ne doit être utilisé que lorsque le widget apparaît sur des pages, car sur les articles de blog, il sera attribué par défaut à l’article sur lequel le widget apparaît.none
post_formatterStringLe nom d’une macro personnalisée pour restituer les articles de blog renvoyés. La macro reçoit trois paramètres qui sont l’objet d’article de blog à formater, le compte dans l’itération des articles de blog et le compte total des articles de blog dans les résultats. S’ils ne sont pas spécifiés ou s’ils sont définis sur Par défaut, le formateur intégré sera utilisé pour formater chaque article.

Remarque : Il est recommandé d’utiliser le paramètre de rappel ci-dessous à la place du paramètre ‘post_formatter’ car le HTML de la balise s’affichera plus rapidement, diminuant ainsi le temps de chargement de la page.		none
callbackStringLe nom d’une fonction JavaScript pour restituer les articles de blog renvoyés. La fonction reçoit un tableau d’objets d’articles de blog à formater. Si ni le paramètre callback, ni le paramètre post_formatter ne sont spécifiés, la balise générera du HTML dans un format par défaut.none
path_prefixesStringLes chemins d’URL ou sous-répertoires dont les articles doivent être inclus (séparés par des virgules). Si un article de blog a un préfixe similaire dans son chemin, la pertinence de l’article est accrue, ce qui améliore son classement dans la liste.none
start_datedate/timePermet de filtrer les articles publiés après une date/heure.none
end_dateDate/TimePermet de filtrer les articles publiés avant une date/heure.False
blog_post_overrideStringLe ou les ID des articles de blog qui doivent toujours apparaître dans la liste renvoyée, malgré toutes les autres valeurs des paramètres et des filtres (séparés par des virgules).none
Nous vous recommandons fortement d’utiliser le paramètre callback au lieu de post_formatter pour assurer des temps de chargement de page plus rapides.
Veuillez noter que si la balise HubL related_blog_posts est utilisée sur un article, le paramètre blog_post_ids ne doit pas être spécifié, comme sur les articles de blog. Il sera par défaut sur l’article sur lequel le widget apparaît.
Voici quelques exemples d’utilisation de cette balise pour améliorer votre site web.

​
Afficher les articles d’un auteur spécifique sur plusieurs blogs

Dans cet exemple, nous générons un listing d’articles rédigés par l’un des trois blog_authors sur deux blogs différents. 
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}

​
Afficher les articles avec la balise “sales enablement” dans une période de publication spécifique

Dans cet exemple, nous générons une liste de 10 articles associés à un article de blog spécifique, avec la balise “sales enablement” dans une période de publication spécifique. Cet exemple spécifie le paramètre blog_post_ids. Il sera donc utilisé sur une page. 
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}

​
Afficher les articles à l’aide d’un rappel JS pour contrôler la sortie HTML

Dans cet exemple, nous générons une liste de 5 articles à l’aide du paramètre callback pour contrôler la sortie HTML du listing d’articles. (Au lieu du paramètre post_formatter à l’aide d’une macro.) 
{% related_blog_posts limit=5, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="https://developers.hubspot.fr/docs${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="https://developers.hubspot.fr/docs${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';

      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>