Produits pris en charge
Exige l'un des produits suivants ou un produit supérieur.
Marketing HubMarketing HubPro
Content HubContent HubStarter
Dernière modification : 28 août 2025
Les blogs HubSpot sont constitués de pages de listing de blog et des articles de blog individuels. En plus de répertorier les articles de blog individuels, le modèle de listing de blog est également utilisé pour restituer les pages de listing d’auteur et de balise. Vous pouvez créer un modèle unique pour restituer toutes les pages de listing et d’article de blog ou créer deux modèles distincts. Découvrez ci-dessous le balisage des modèles de blog, les composants des modèles et les options de personnalisation.

​
Créer un modèle commun pour les pages de listing et d’articles

Pour créer un modèle qui restitue les pages de listing et d’article, ajoutez l’annotation templateType: blog en haut de votre fichier de modèle. Si vous utilisez un modèle pour restituer les deux, vous utiliserez une fonction if qui détermine si l’utilisateur consulte une page de listing ou un article individuel. Si vous utilisez les mises en page du gestionnaire de conception en glisser-déposer, cette fonction if est intégrée à l’interface utilisateur des boutons de module de contenu du blog. En utilisant l’instruction if is_listing_view, vous pouvez écrire séparément le code de l’article et celui de la liste. 
{% if is_listing_view %}
    Markup for blog listing template
{% else %}
    Markup for blog post template
{% endif %}

​
Créer des modèles de listing et d’articles distincts

Vous pouvez également choisir d’avoir des modèles distincts pour les articles de blog et les pages de listing, ce qui peut contribuer à rendre votre code plus propre et plus facile à lire en tant que développeur, tout en rendant les modèles plus faciles à sélectionner pour les créateurs de contenu. Plutôt que d’utiliser l’annotation templateType: blog en haut d’un modèle, incluez les annotations suivantes en haut de vos deux modèles :
  • Modèle d’article de blog : templateType: blog_post
  • Modèle de liste de blog : templateType: blog_listing
template-annotation-blog-listing
Lors de la création de modèles distincts pour les articles et les listes, la vérification is_listing_view n’est pas nécessaire. Au lieu de cela, vous devez sélectionner manuellement des modèles distincts dans les paramètres de blog du compte. Vous pouvez également migrer un modèle de blog unifié existant pour en faire un modèle d’article de blog ou un modèle de liste de blogs.

​
Modèles de pages de listing

L’annotation templateType: blog_listing rend le modèle disponible pour la sélection dans les paramètres du blog, spécifiquement pour la vue de la liste. Avec ce type de modèle, les créateurs de contenu peuvent également modifier la page d’inscription dans l’éditeur de pages. En incluant également des zones de glisser-déposer dans le modèle, les modules peuvent être ajoutés et supprimés dans l’éditeur en glisser-déposer, comme c’est le cas pour les autres pages du CMS. Consultez les modèles de blog CMS boilerplate pour voir des exemples d’inclusion de zones de glisser-déposer. La liste des articles est générée par une boucle for qui parcourt les articles de votre blog. contents est une séquence prédéfinie de contenu qui contient tous les articles de ce blog. 
{% for content in contents %}
    <div class="post-item">
        Post item markup that renders with each iteration.
    </div>
{% endfor %}
Il est recommandé de faire en sorte que toutes les chaînes de texte de votre modèle de liste de blogs soient contrôlées par des champs. Cela facilite la création de blogs multilingues et donne plus de contrôle aux créateurs de contenu.

​
Créer un module de liste de blogs

Vous pouvez permettre aux créateurs de contenu de placer des modules sur le périmètre du contenu de la liste de blogs, par exemple sur les côtés, ou au-dessus et en dessous. Pour ce faire, il est recommandé de créer un module de liste de blogs qui utilise une boucle for liste de blogs. À titre d’exemple, consultez le module de liste de blog CMS boilerplate. Bien que HubSpot fournisse des paramètres de blog pour l’affichage de résumés et l’utilisation d’images en vignette, vous pouvez également intégrer ces fonctionnalités dans votre module. Cela permet aux créateurs de contenu de définir ces fonctionnalités dans l’éditeur de page, plutôt que dans les paramètres du blog.

​
Pages d’auteur de blog, de balise et de liste simple

En plus des pages d’articles de blog et de listes de blogs, les blogs HubSpot ont également des pages pour les auteurs de blogs, les balises d’articles de blog et des pages de listes simples. Ces pages supplémentaires utilisent le même modèle que la page de listing du blog pour restituer leur contenu.
Comme le modèle de page de liste est également partagé par la page d’auteur du blog, de balise et d’annonce simple, les mises à jour publiées sur le modèle s’appliqueront également à ces pages.
Pour configurer individuellement la mise en page de ces pages, vous pouvez utiliser les instructions if pour restituer le contenu de chaque type de page de manière conditionnelle.

​
Fonction if blog_author

Dans le balisage standard de listing de blog de HubSpot, il existe une instruction conditionnelle if blog_author. Cette affirmation est considérée comme vraie lorsque l’on consulte la page d’un auteur, qui répertorie les articles publiés par l’auteur. Le modèle de boilerplate comprend le nom de l’auteur, sa biographie et ses comptes de réseaux sociaux. 
{% if blog_author %}
  <div class="blog-header">
    <div class="blog-header__inner">
      {% if blog_author.avatar %}
      <div class="blog-header__author-avatar" style="background-image: url('{{ blog_author.avatar }}');"></div>
      {% endif %}
      <h1 class="blog-header__title">{{ blog_author.display_name }}</h1>
      <h4 class="blog-header__subtitle">{{ blog_author.bio }}</h4>
      {% if blog_author.has_social_profiles %}
        <div class="blog-header__author-social-links">
          {% if blog_author.website %}
            <a href="https://developers.hubspot.fr/docs{{ blog_author.website }}" target="_blank">
              {% icon name="link" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.facebook %}
            <a href="https://developers.hubspot.fr/docs{{ blog_author.facebook }}" target="_blank">
              {% icon name="facebook-f" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.linkedin %}
            <a href="https://developers.hubspot.fr/docs{{ blog_author.linkedin }}" target="_blank">
              {% icon name="linkedin-in" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.twitter %}
            <a href="https://developers.hubspot.fr/docs{{ blog_author.twitter }}" target="_blank">
              {% icon name="twitter" style="SOLID" width="10" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% else %}

​
Fonction if tag

Vous pouvez utiliser une instruction if tag pour ne restituer le code que sur une page de liste de sujets de blog, que les visiteurs peuvent voir lorsqu’ils cliquent sur un sujet de blog sur votre site. L’exemple ci-dessous est un bloc de texte prédéfini qui utilise la variable de titre de page pour imprimer automatiquement le nom de la balise en haut d’une page de listing de balise. 
{% if tag %}
    <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3>
{% endif %}

​
Fonction if not simple_list_page

Il existe deux types de pages de liste de blogs qui peuvent être restituées pour afficher les articles de blogs : la page de liste ordinaire et la page de liste simple.
  • La liste ordinaire parcourt le nombre d’articles spécifié par le paramètre de blog de listing d’article et pagine en conséquence.
  • Une liste simple est une liste de tous vos articles et ne prend pas en charge la pagination. La liste simple n’est pas affectée par le paramètre de limite d’articles de blog et contient généralement les liens vers les 200 articles de blog les plus récents. L’adresse de votre page de listing simple est l’URL de votre blog avec /all ajouté à la fin du chemin.
Vous pouvez utiliser une instruction if not simple_list_page pour déterminer ce qui doit être restitué dans une liste simple par rapport à une liste ordinaire. Une version simplifiée de cette instruction est présentée ci-dessous.
Notez que l’instruction if utilise la logique inverse, ce qui signifie que l’instruction else définit la vue en liste simple. Vous pouvez éventuellement utiliser une fonction unless à la place.
{% if not simple_list_page %}
    Iterated post markup for regular listing
{% else %}
    <h2 class="post-listing-simple"><a href="https://developers.hubspot.fr/docs{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}

​
Pagination de listing

Les pages de listing de blog ont une pagination générée automatiquement. Votre modèle de listing peut inclure une logique permettant aux visiteurs de consulter facilement les articles de votre blog. Le blog de boilerplate permet une pagination simple et numérique grâce au balisage suivant : 
{% if contents.total_page_count > 1 %}
<div class="blog-pagination">
    {% set page_list = [-2, -1, 0, 1, 2] %}
    {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
    {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
    {% elif current_page_num == 2 %}{% set offset = 1 %}
    {% elif current_page_num == 1 %}{% set offset = 2 %}
    {% else %}{% set offset = 0 %}{% endif %}

    <a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="https://developers.hubspot.fr/docs{{ blog_page_link(last_page_num) }}">
    {% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %}
    Prev
    </a>
    {% for page in page_list %}
    {% set this_page = current_page_num + page + offset %}
    {% if this_page > 0 and this_page <= contents.total_page_count %}
        <a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="https://developers.hubspot.fr/docs{{ blog_page_link(this_page) }}">{{ this_page }}</a>
    {% endif %}
    {% endfor %}
    <a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="https://developers.hubspot.fr/docs{{ blog_page_link(current_page_num + 1) }}">
    Next
    {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
    </a>
</div>
{% endif %}

​
Balisage boilerplate

Ci-dessous, vous trouverez le balisage boilerplate des modèles d’article de blog et de page de liste de blogs. Vous pouvez également consulter ce balisage dans le boilerplate du CMS sur GitHub, comme indiqué dans chaque section.

​
Balisage des modèles d’article

Tous les articles d’un blog sont générés par un seul modèle de blog. Content est un objet de données prédéfini qui contient des informations sur l’article de blog demandé. Les articles de boilerplate sont restitués avec le balisage suivant : 
<div class="content-wrapper">
  <div class="blog-post">
    <h1>{{ content.name }}</h1>
    <div class="blog-post__meta">
      <a href="https://developers.hubspot.fr/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">
        {{ content.blog_post_author.display_name }}
      </a>
      <div class="blog-post__timestamp">
        {{ content.publish_date_localized }}
      </div>
    </div>
    <div class="blog-post__body">
      {{ content.post_body }}
    </div>
    {% if content.tag_list %}
    <div class="blog-post__tags">
      {% icon name="tag" style="SOLID" %}
      {% for tag in content.tag_list %}
        <a class="blog-post__tag-link" href="https://developers.hubspot.fr/docs{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
      {% endfor %}
    </div>
    {% endif %}
  </div>
  <div class="blog-comments">
    {% module "blog_comments" path="@hubspot/blog_comments", label="Blog Comments" %}
  </div>
</div>
Les informations sur l’auteur de l’article de blog sont également disponibles dans les données content. 
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
<h3>Written by <a class="author-link" href="https://developers.hubspot.fr/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3>
<p>{{ content.blog_post_author.bio }}</p>
{% if content.blog_post_author.has_social_profiles %}
    <div class="hs-author-social-section">
        <div class="hs-author-social-links">
            {% if content.blog_post_author.facebook %}
                <a href="https://developers.hubspot.fr/docs{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
            {% endif %}
            {% if content.blog_post_author.linkedin %}
                <a href="https://developers.hubspot.fr/docs{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
            {% endif %}
            {% if content.blog_post_author.twitter %}
                <a href="https://developers.hubspot.fr/docs{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
            {% endif %}
            {% if content.blog_post_author.google_plus %}
                <a href="https://developers.hubspot.fr/docs{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
            {% endif %}
        </div>
    </div>
{% endif %}

​
Balisage des modèles de listing

Le contenu de la page de listing de blog du boilerplate pour la boucle for est restitué avec le balisage suivant : 
{% for content in contents %}
    {# On the blog homepage the first post will be featured above older posts #}
    {% if (loop.first && current_page_num == 1 && !topic) %}
    <div class="blog-index__post blog-index__post--large">
        <a class="blog-index__post-image blog-index__post-image--large"
        {% if content.featured_image %}
            style="background-image: url('{{ content.featured_image }}')";
        {% endif %}
        href="https://developers.hubspot.fr/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--large">
        <h2><a href="https://developers.hubspot.fr/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content }}
        </div>
    </div>
    {% else %}
    <div class="blog-index__post blog-index__post--small">
        <a class="blog-index__post-image blog-index__post-image--small"
        {% if content.featured_image %}
            style="background-image: url('{{ content.featured_image }}')";
        {% endif %}
        href="https://developers.hubspot.fr/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--small">
        <h2><a href="https://developers.hubspot.fr/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content|truncatehtml(100) }}
        </div>
    </div>
    {% endif %}
{% endfor %}

​
Ressources associées