Marcador de la plantilla del blog

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

Los blogs de HubSpot consisten en páginas de listado de blogs y en los posts individuales del blog. Además de listar los posts individuales del blog, la plantilla de listado del blog también se utiliza para renderizar las páginas de listado de autores y etiquetas. Puedes crear una sola plantilla para representar todas las páginas de listados y post de blog, o puedes crear dos plantillas separadas. 

A continuación, aprende sobre el marcador de la plantilla del blog, los componentes de la plantilla y las opciones de personalización.

Renderizar las páginas de anuncios y los posts con una sola plantilla

Para crear una plantilla que muestre las páginas de listados y post, agrega la anotación templateType: blog al principio de tu archivo de plantilla. Si se utiliza una plantilla para representar ambas cosas, se utilizará una sentencia if que evalúe si el usuario está viendo una página de anuncios o un post individual. Si estás utilizando el administrador de diseño de arrastrar y soltar, esta sentencia if está incorporada en la interfaz de usuario de los botones del módulo de contenido del blog.

Dentro de la sentencia if, escribirás tanto el código del post como el del listado.

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

Alternativamente, puedes elegir tener una plantilla separada para post de blog y páginas de anuncios. Esto permite que tu código sea más limpio y fácil de leer como desarrollador, y hace que las plantillas sean más fáciles de seleccionar para los creadores de contenido. La plantilla del CMS tiene una plantilla de listado y una plantilla de post separadas. Si construyes plantillas separadas para post y listados, esta comprobación de is_listing_view no es necesaria, solo tienes que asegurarte de seleccionar las plantillas separadas en Configuración > Sitio web > Blog > Plantillas. 

Selección de la plantilla de configuración del blog

Lista de blogs para el bucle

El listado de posts se genera mediante un bucle for que itera a través de los posts de tu blog. Contents es una secuencia predefinida de contenidos que contiene todos los posts de ese blog.

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

Marcador de plantillas de listados

El contenido de la página de listado del blog para el bucle se renderiza con el siguiente marcador:

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

Sentencia If blog_author

Dentro del marcador estándar del listado de blogs de HubSpot, hay una sentencia if blog_author . Esta sentencia se evalúa como verdadera cuando se mira una página de listado de autores. Una página de listado de autores es una página de posts de un solo autor. La plantilla incluye el nombre del autor, su biografía y sus cuentas en las redes sociales.

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

Sentencia If tag

Además de la sentencia if blog_author, que define el marcador que solo debe aparecer en las páginas del listado de autores, existe una variable tag que puede utilizarse para que solo aparezca el código en una página del listado de temas del blog. El siguiente ejemplo es un fragmento que utiliza la variable de título de la página para imprimir automáticamente el nombre de la etiqueta en la parte superior de una página de listado de etiquetas. Este fragmento podría agregarse al código del listado de tu blog.

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

Sentencia If not simple_list_page

Dentro del bucle for, hay una sentencia if que determina lo que hay que representar en un listado simple o regular.

  • Un listado simple es un listado de todos tus posts y no admite la paginación. El listado simple no se ve afectado por la configuración del límite de post del blog y generalmente solo contiene enlaces a los 200 posts más recientes del blog
  • El listado regular itera a través del número de posts especificado por la configuración del blog del listado de post y pagina en consecuencia.

La dirección de tu página de listado simple es la URL de tu blog con /all agregado al final de la ruta.

El siguiente código es una versión simplificada de esta sentencia if que define lo que debe ser iterado en una página de listado simple. Observa que la sentencia if utiliza la lógica inversa; por lo tanto, el else define la vista del listado simple. Opcionalmente se puede utilizar una sentencia unless en su lugar.

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

Paginación del listado

Las páginas del listado del blog tienen una paginación autogenerada. Tu plantilla de listado puede incluir la lógica para permitir a los visitantes navegar fácilmente a través de tus posts de blog. El blog boilerplate logra una paginación simple y numérica a través del siguiente marcador:

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

Marcado del post del blog

Todos los posts de un blog son generados por una única plantilla de blog. Content es un objeto de datos predefinido que contiene información sobre el post del blog solicitado. Los Boilerplate posts se presentan con los siguientes marcadores:

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

La información del autor del post del blog también está disponible dentro de los datos de 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 %}
¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.