Création d'une liste d'articles de blog connexes avec la balise HubL pour les articles de blog connexes

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.

Parameter	Type	Description	Default
`limit`	number	Nombre maximal d’articles de blog à lister.	`3`
`blog_ids`	’default’ or blog id	Le ou les ID des blogs dont vous souhaitez inclure les articles.	`none`
`tags`	String	La 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_authors`	String	Le ou les noms des auteurs dont les articles doivent être inclus (séparés par des virgules).	`none`
`blog_post_ids`	String	Le 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_formatter`	String	Le 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`
`callback`	String	Le 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_prefixes`	String	Les 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_date`	date/time	Permet de filtrer les articles publiés après une date/heure.	`none`
`end_date`	Date/Time	Permet de filtrer les articles publiés avant une date/heure.	`False`
`blog_post_override`	String	Le 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>

Champs

HubL

React

Modules

Fonctions sans serveur

Création d'une liste d'articles de blog connexes avec la balise HubL pour les articles de blog connexes

Paramètres

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

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

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

​Paramètres

​Exemples d’utilisation de la balise HubL related_blog_posts

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

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

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

Paramètres

Exemples d’utilisation de la balise HubL related_blog_posts

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

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

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