Balisage des modèles de blogs

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • Content Hub
    • Professional or Enterprise

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.

Restituer les pages de listing et les articles avec un seul modèle

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 Si 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.

Dans la fonction if, vous saisirez à la fois votre code d'article et de listing.

{% if is_listing_view %} Markup for blog listing template {% else %} Markup for blog post template {% endif %}

Vous pouvez également choisir d'avoir un modèle distinct pour les pages d'article de blog et de listing. Ainsi, votre code est plus propre et plus facile à lire en tant que développeur, et les modèles sont plus faciles à sélectionner pour les créateurs de contenu. Le boilerplate du CMS comporte un modèle de listing et un modèle d'article distincts. Si vous créez des modèles d'article et de listing distincts, la vérification de is_listing_view n'est pas nécessaire. Vous devez simplement vous assurer de sélectionner les modèles distincts dans Paramètres > Site web > Blog > Modèles

Sélection du modèle des paramètres du blog

Listing de blog pour la boucle

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 contenus dans ce blog.

{% for content in contents %} <div class="post-item"> Post item markup that renders with each iteration. </div> {% endfor %}

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="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--large"> <h2><a href="{{ 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="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--small"> <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2> {{ content.post_list_content|truncatehtml(100) }} </div> </div> {% endif %} {% endfor %}

Fonction if blog_author

Dans le balisage standard de listing de blog de HubSpot, il existe une fonction if blog_author. Cette fonction aura la valeur true si vous consultez une page de listing d'auteur. Une page de listing d'auteurs est une page regroupant les articles d'un seul 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="{{ blog_author.website }}" target="_blank"> {% icon name="link" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.facebook %} <a href="{{ blog_author.facebook }}" target="_blank"> {% icon name="facebook-f" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.linkedin %} <a href="{{ blog_author.linkedin }}" target="_blank"> {% icon name="linkedin-in" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.twitter %} <a href="{{ blog_author.twitter }}" target="_blank"> {% icon name="twitter" style="SOLID" width="10" %} </a> {% endif %} </div> {% endif %} </div> </div> {% else %}

Fonction if tag

En plus de la fonction if blog_author qui définit le balisage qui doit être restitué uniquement sur les pages de listing d'auteur, il existe une variable tag qui peut être utilisée pour restituer le code uniquement sur une page de listing de thème de blog. 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. Ce bloc de texte prédéfini peut être ajouté au code de listing de blog.

{% if tag %} <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3> {% endif %}

Fonction if not simple_list_page

Dans la boucle for, une fonction if détermine ce qui doit être restitué dans une liste simple par rapport à une liste ordinaire.

  • 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.
  • 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.

L'adresse de votre page de listing simple est l'URL de votre blog avec /all ajouté à la fin du chemin.

Le code suivant est une version simplifiée de cette fonction if qui définit ce qui doit être itéré dans une page de listing simple. Notez que la fonction if utilise une logique inverse ; par conséquent, la fonction else définit la vue de liste simple. Vous pouvez 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="{{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="{{ 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="{{ 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="{{ blog_page_link(current_page_num + 1) }}"> Next {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %} </a> </div> {% endif %}

Balisage des articles de blog

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="{{ 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="{{ 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="{{ 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="{{ 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="{{ 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="{{ 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="{{ 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 %}

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.