Productos compatibles
Se requiere uno de los siguientes productos o productos de ediciones superiores.
Marketing HubMarketing HubPro
Content HubContent HubStarter
Última modificación: 28 de agosto de 2025
Los blogs de HubSpot consisten en páginas de índice de blogs y en las publicaciones individuales del blog. Además de listar las publicaciones individuales del blog, la plantilla de índice del blog también se utiliza para renderizar las páginas de índice de autores y etiquetas. Puedes crear una sola plantilla para representar todas las páginas de índice y publicaciones de blog, o puedes crear dos plantillas separadas. A continuación, encuentra más información sobre el marcador de la plantilla del blog, los componentes de la plantilla y las opciones de personalización.

​
Crear una plantilla compartida para las páginas de índice y de publicación

Para crear una plantilla que muestre las páginas de índice y publicaciones, 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 instrucción “if” que evalúe si el usuario está viendo una página de índice o una publicación individual. Si estás utilizando el administrador de diseño de arrastrar y soltar, esta instrucción if está incorporada en la interfaz de usuario de los botones del módulo de contenido del blog. Utilizando la instrucción if is_listing_view , puedes escribir por separado el código de la publicación y el de la lista. 
{% if is_listing_view %}
    Markup for blog listing template
{% else %}
    Markup for blog post template
{% endif %}

​
Crear plantillas separadas para listados y publicaciones

Alternativamente, puedes elegir tener plantillas separadas para las publicaciones del blog y las páginas de índice, lo que puede ayudar a que tu código sea más ordenado y fácil de leer como desarrollador, a la vez que facilita la selección de plantillas para los creadores de contenido. En lugar de utilizar la anotación templateType: blog en la parte superior de una plantilla, incluye las siguientes anotaciones en la parte superior de tus dos plantillas:
  • Plantilla de publicación de blog: templateType: blog_post
  • Plantilla de listado de blog: templateType: blog_listing
plantilla-anotacion-blog-listing
Cuando se crean plantillas separadas para publicaciones y listados, no es necesaria la validación is_listing_view. En su lugar, seleccionarás manualmente plantillas separadas dentro de los ajustes del blog de la cuenta. También puedes migrar una plantilla de blog unificada existente para que sea una plantilla de entrada de blog o una plantilla de listado de blog.

​
Cambiar las plantillas de las páginas de índice

La anotación templateType: blog_listing hace que la plantilla esté disponible para su selección en los ajustes del blog específicamente para la vista del listado. Con este tipo de plantilla, los creadores de contenido también pueden editar la página de índice dentro del editor de páginas. Al incluir también áreas de arrastrar y soltar en la plantilla, los módulos se pueden añadir y eliminar en el editor de páginas como se hace en otras páginas del CMS. Echa un vistazo a las plantillas de blog de la biblioteca de recursos del CMS de HubSpot para ver ejemplos de cómo incluir áreas de arrastrar y soltar. El listado de publicaciones de blog se genera mediante un bucle “for” que itera a través de las entradas de tu blog. contents es una secuencia predefinida de contenido que contiene todas las entradas de ese blog. 
{% for content in contents %}
    <div class="post-item">
        Post item markup that renders with each iteration.
    </div>
{% endfor %}
Se recomienda hacer que todas las cadenas de texto de la plantilla de listado de tu blog estén controladas por campos. Esto facilita la creación de blogs multilingües y da más control a los creadores de contenidos.

​
Crear un listado de módulos de blog

Puedes permitir que los creadores de contenido coloquen módulos en el perímetro del contenido del listado del blog, como en los laterales, o encima y debajo. Para ello, se recomienda crear un módulo que utilice un bucle “for” de listado de blogs. Echa un vistazo al módulo de índice de blogs de la plantilla del CMS. Aunque HubSpot proporciona la configuración del blog para mostrar resúmenes y utilizar imágenes destacadas, también puedes crear estas funciones en tu módulo. Esto le permite a los creadores de contenidos ajustar estas características en el editor de páginas, en lugar de los ajustes del blog.

​
Autor del blog, etiqueta y páginas de índice sencillas

Además de las páginas de índice y publicaciones de blogs, los blogs de HubSpot también tienen páginas para los autores de blogs, etiquetas de entradas de blog y páginas de índice sencillas. Estas páginas adicionales utilizan la misma plantilla que la página de índice del blog para mostrar su contenido.
Como la plantilla de la página de índice también la comparten el autor del blog, la etiqueta y la página de índice sencilla, las actualizaciones publicadas en la plantilla también se aplicarán a esas páginas.
Para configurar el diseño de estas páginas individualmente, puedes utilizar las instrucciones if para representar de manera condicional el contenido de cada tipo de página.

​
If blog_author

Dentro del marcador estándar del listado de blogs de HubSpot, hay una instrucción if blog_author. Esta instrucción se evalúa como “true” al visualizar la página de un autor, donde se listan las publicaciones que ha publicado. La biblioteca de 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="https://developers.hubspot.es/docs{{ blog_author.website }}" target="_blank">
              {% icon name="link" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.facebook %}
            <a href="https://developers.hubspot.es/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.es/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.es/docs{{ blog_author.twitter }}" target="_blank">
              {% icon name="twitter" style="SOLID" width="10" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% else %}

​
Etiqueta “If”

Puedes utilizar una instrucción if tag para renderizar código solo en una página de índice de temas del blog, que los visitantes verán al hacer clic en un tema del blog en tu sitio. 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 índice de etiquetas. 
{% if tag %}
    <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3>
{% endif %}

​
Instrucción “If not” simple_list_page

Hay dos tipos de páginas de índice de blogs que se pueden generar para mostrar los listados de publicaciones de blog: la página de índice normal y la página de índice simple:
  • El índice estándar recorre la cantidad de publicaciones especificadas en la configuración de listado de blogs y aplica paginación según corresponda.
  • Un índice simple es un listado de todas las publicaiones y no admite la paginación. - El índice simple no se ve afectado por la configuración del límite de publicaciones del blog y generalmente solo contiene enlaces a las 200 publicaciones más recientes del blog. La dirección de tu página de índice simple es la URL de tu blog con /all agregado al final de la ruta.
Puedes utilizar una instrucción if not simple_list_page para determinar qué mostrar en un índice simple frente a uno normal. A continuación se muestra una versión simplificada de esta isntrucción.
Observa que la instrucción if utiliza la lógica inversa, lo que significa que else define la vista de índice simple. Opcionalmente se puede utilizar una instrucción “unless” en su lugar.
{% if not simple_list_page %}
    Iterated post markup for regular listing
{% else %}
    <h2 class="post-listing-simple"><a href="https://developers.hubspot.es/docs{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}

​
Paginación del índice

Las páginas de índice del blog tienen una paginación autogenerada. Tu plantilla de índice puede incluir la lógica para permitir a los visitantes encontrar fácilmente tus publicaciones de blog. La biblioteca del blog 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="https://developers.hubspot.es/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.es/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.es/docs{{ blog_page_link(current_page_num + 1) }}">
    Next
    {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
    </a>
</div>
{% endif %}

​
Marcador de la biblioteca

A continuación, puedes ver la estructura estándar del marcado de las plantillas de las páginas de publicaciones y de índice del blog. También puedes ver este marcado en la plantilla del CMS en GitHub, como se indica en cada sección.

​
Marcador de la plantilla del blog

Todas las publicaciones de un blog se generan mediante una única plantilla de blog. Content es un objeto de datos predefinido que contiene información sobre la entrada de blog solicitada. Las plantillas de publicaciones 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="https://developers.hubspot.es/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.es/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>
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="https://developers.hubspot.es/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.es/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.es/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.es/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.es/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 %}

​
Marcador de plantillas de índice

El contenido de la biblioteca de la página de índice del blog para el bucle “for” 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="https://developers.hubspot.es/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--large">
        <h2><a href="https://developers.hubspot.es/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.es/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--small">
        <h2><a href="https://developers.hubspot.es/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content|truncatehtml(100) }}
        </div>
    </div>
    {% endif %}
{% endfor %}

​
Recursos relacionados