> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Plantillas de blog

> Las plantillas de índice y publicaciones de blog pueden utilizarse para personalizar la apariencia del blog en un sitio. 

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Productos compatibles",
    description: "Se requiere uno de los siguientes productos o productos de ediciones superiores.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Gratuito",
      starter: "Starter",
      professional: "Pro",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Productos compatibles" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="starter" />
</Accordion>

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](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: blog` al principio de tu archivo de plantilla. Si se utiliza una plantilla para representar ambas cosas, se utilizará una [instrucción "if"](/cms/reference/hubl/if-statements) 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](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates), 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.

```hubl theme={null}
{% 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](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#blog-post) y [las páginas de índice](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#blog-listing), 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](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#template-types) 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`

<Frame>
  <img src="https://www.hubspot.es/hubfs/Knowledge_Base_2021/Developer/template-annotation-blog-listing.png" alt="plantilla-anotacion-blog-listing" />
</Frame>

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](https://knowledge.hubspot.com/es/blog/manage-your-blog-template-and-settings#select-your-blog-templates) 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](https://developers.hubspot.es/docs).

### 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](https://knowledge.hubspot.com/es/blog/manage-your-blog-template-and-settings) 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](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) 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](https://github.com/HubSpot/cms-theme-boilerplate/pull/349) para ver ejemplos de cómo incluir áreas de arrastrar y soltar.

El listado de publicaciones de blog se genera mediante un [bucle "for"](/cms/reference/hubl/loops) 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.

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

<Info>
  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](/cms/start-building/features/multi-language-content) y da más control a los creadores de contenidos.
</Info>

## 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](/cms/start-building/building-blocks/templates/blog#blog-listing-for-loop). Echa un vistazo al [módulo de índice de blogs de la plantilla del CMS](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module). [](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module)

Aunque HubSpot proporciona la [configuración del blog](https://knowledge.hubspot.com/es/blog/manage-your-blog-template-and-settings#select-your-blog-templates) 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.

<Info>
  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.
</Info>

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.

```hubl theme={null}
{% 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.

```hubl theme={null}
{% 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](/cms/start-building/introduction/developer-environment/website-settings#number-of-posts-per-listing-page) 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.

<Info>
  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"](/cms/reference/hubl/if-statements#unless-statements) en su lugar.
</Info>

```hubl theme={null}
{% 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](https://boilerplate.hubspotcms.com/blog) logra una paginación simple y numérica a través del [siguiente marcador](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/blog-pagination.module/module.html):

```hubl theme={null}
{% 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](https://boilerplate.hubspotcms.com/blog) se presentan con los [siguientes marcadores](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-post.html):

```hubl theme={null}
<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`.

```hubl theme={null}
<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](https://boilerplate.hubspotcms.com/blog) para el bucle "for" se renderiza con el [siguiente marcador](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-index.html):

```hubl theme={null}
{% 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

* [Variables del blog](/cms/reference/hubl/variables#blog-variables)
* [Plantillas de blog](/cms/start-building/building-blocks/templates/blog)
* [Plantilla de temas de HubSpot](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
* [Cómo crear un blog](https://knowledge.hubspot.com/es/blog/create-a-new-blog)
* [Importa tu blog a HubSpot](https://knowledge.hubspot.com/es/blog/import-your-content-into-hubspot)