Produtos suportados
Requer um dos seguintes produtos ou superior.
Marketing HubMarketing HubProfessional
Content HubContent HubStarter
Última modificação: 28 de agosto de 2025
Os blogs do HubSpot consistem em páginas de listagem de blogs e postagens de blog individuais. Além de listar as postagens individuais do blog, o modelo de listagem de blog também é usado para renderizar as páginas de listagem de autores e tags. Você pode criar um único modelo para renderizar todas as páginas de listagem e postagens de blog ou pode criar dois modelos separados. Abaixo, aprenda sobre marcação de modelo de blog, componentes de modelo e opções de personalização.

​
Crie um modelo compartilhado para as páginas de listagem e postagem

Para criar um modelo que renderize as páginas de listagem e postagem, adicione o templateType: blog anotação para o topo do seu arquivo de modelo. Ao usar um modelo para renderizar ambos, você usará um declaração if que avalia se o usuário está olhando para uma página de listagem ou para uma postagem individual. Se você estiver usando o layouts do gerenciador de design de arrastar e soltar, esse if a declaração é incorporada à interface do usuário dos botões do módulo de conteúdo do blog. Ao usar o if is_listing_view declaração, você pode escrever seu código de postagem e listagem separadamente. 
{% if is_listing_view %}
    Markup for blog listing template
{% else %}
    Markup for blog post template
{% endif %}

​
Crie modelos de listagem e postagem separados

Como alternativa, você pode escolher ter modelos separados para postagem de blog e listando páginas o que pode ajudar a tornar seu código mais limpo e fácil de ler para um desenvolvedor, ao mesmo tempo em que torna os modelos mais fáceis de selecionar para criadores de conteúdo. Em vez de usar o templateType: blog anotação no topo de um modelo, inclua o seguinte Anotações no topo dos seus dois modelos:
  • Modelo de postagem de blog: templateType: blog_post
  • Modelo de listagem de blog: templateType: blog_listing
modelo-anotação-blog-listagem
Ao criar modelos de postagem e listagem separados, o is_listing_view não é necessário verificar. Em vez disso, você irá manualmente selecione modelos separados nas configurações do blog da conta. Você também pode migrar um modelo de blog unificado existente para ser um modelo de postagem de blog ou um modelo de listagem de blog.

​
Modelos de página de listagem

O templateType: blog_listing a anotação torna o modelo disponível para seleção em configurações do blog especificamente para a visualização de listagem. Com esse tipo de modelo, os criadores de conteúdo também podem editar a página de listagem no editor de páginas. Incluindo também arrastar e soltar áreas no modelo, os módulos podem ser adicionados e removidos no editor de páginas, assim como em outras páginas do CMS. Confira o Modelos de blog boilerplate do CMS para ver exemplos de inclusão de áreas de arrastar e soltar. A listagem de postagens é gerada por um para laço que itera em suas postagens de blog. contents é uma sequência predefinida de conteúdo que contém todas as postagens contidas naquele blog. 
{% for content in contents %}
    <div class="post-item">
        Post item markup that renders with each iteration.
    </div>
{% endfor %}
É recomendável que todas as sequências de texto no seu modelo de listagem de blog sejam controladas por campos. Isso torna mais fácil criar multilíngue blogs e dá mais controle aos criadores de conteúdo.

​
Crie um módulo de listagem de blog

Você pode permitir que os criadores de conteúdo coloquem módulos no perímetro do blog listando conteúdo, como nas laterais ou acima e abaixo. Para habilitar isso, é recomendável criar um módulo de listagem de blog que use um listagem de blogs para loop. Confira o Módulo de listagem de blogs padrão do CMS por exemplo. Enquanto o HubSpot fornece configurações do blog para mostrar resumos e usar imagens em destaque, você também pode incorporar esses recursos ao seu módulo. Isso permite que os criadores de conteúdo definam esses recursos no editor de páginas, em vez das configurações do blog.

​
Autor do blog, tag e páginas de listagem simples

Além das páginas de postagens e listagens de blogs, os blogs do HubSpot também têm páginas para autores de blogs, tags de postagens de blogs e páginas de listagens simples. Essas páginas adicionais usam o mesmo modelo da página de listagem do blog para renderizar seu conteúdo.
Como o modelo de página de listagem também é compartilhado pelo autor do blog, pela tag e pela página de listagem simples, as atualizações publicadas no modelo também serão aplicadas a essas páginas.
Para configurar o layout dessas páginas individualmente, você pode usar if instruções para renderizar conteúdo condicionalmente para cada tipo de página.

​
Se blog_author

Dentro da marcação padrão de listagem de blog do HubSpot, há um if blog_author declaração. Esta afirmação é avaliada como verdadeira ao visualizar a página de um autor, que lista as postagens publicadas pelo autor. O modelo padrão inclui o nome do autor, a biografia e as contas de mídia social. 
{% 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://br.developers.hubspot.com/docs{{ blog_author.website }}" target="_blank">
              {% icon name="link" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.facebook %}
            <a href="https://br.developers.hubspot.com/docs{{ blog_author.facebook }}" target="_blank">
              {% icon name="facebook-f" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.linkedin %}
            <a href="https://br.developers.hubspot.com/docs{{ blog_author.linkedin }}" target="_blank">
              {% icon name="linkedin-in" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.twitter %}
            <a href="https://br.developers.hubspot.com/docs{{ blog_author.twitter }}" target="_blank">
              {% icon name="twitter" style="SOLID" width="10" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% else %}

​
Se etiqueta

Você pode usar um if tag instrução para renderizar apenas código em uma página de listagem de tópicos de blog, que os visitantes podem ver ao clicar em um tópico de blog em seu site. O exemplo abaixo é um snippet que usa a variável de título da página para imprimir automaticamente o nome da tag no topo de uma página de listagem de tags. 
{% if tag %}
    <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3>
{% endif %}

​
Se não simple_list_page

Existem dois tipos de páginas de listagem de blog que podem ser renderizadas para exibir listagens de postagens de blog: a página de listagem regular e uma página de listagem simples:
  • A listagem regular itera pelo número de postagens especificado pela configuração do blog de listagem de postagens e pagina adequadamente.
  • Uma listagem simples é uma listagem de todas as suas postagens e não suporta paginação. A listagem simples não é afetada pelo configuração de limite de postagem no blog e geralmente contém apenas links para as 200 postagens de blog mais recentes. O endereço da sua página de listagem simples é o URL do seu blog com /all adicionado ao final do caminho.
Você pode usar um if not simple_list_page declaração para determinar o que renderizar em uma listagem simples ou regular. Uma versão simplificada desta declaração é mostrada abaixo.
Note que o if declaração usa lógica reversa, o que significa que o else define a visualização de listagem simples. Opcionalmente, você pode usar um a menos que declaração em vez de.
{% if not simple_list_page %}
    Iterated post markup for regular listing
{% else %}
    <h2 class="post-listing-simple"><a href="https://br.developers.hubspot.com/docs{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}

​
Listagem de paginação

As páginas de listagem do blog têm paginação gerada automaticamente. Seu modelo de listagem pode incluir lógica para permitir que os visitantes naveguem facilmente pelas postagens do seu blog. O blog padrão realiza paginação simples e numérica por meio de seguindo marcação: 
{% 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://br.developers.hubspot.com/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://br.developers.hubspot.com/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://br.developers.hubspot.com/docs{{ blog_page_link(current_page_num + 1) }}">
    Next
    {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
    </a>
</div>
{% endif %}

​
Marcação padrão

Abaixo, veja a marcação padrão para os modelos de postagem de blog e página de listagem de blog. Você também pode visualizar essa marcação no boilerplate do CMS no GitHub, conforme listado em cada seção.

​
Marcação de modelo de postagem

Todas as postagens de um blog são geradas por um único modelo de blog. Content é um objeto de dados predefinido que contém informações sobre a postagem de blog solicitada. Postagens padrão são renderizados com o seguindo marcação: 
<div class="content-wrapper">
  <div class="blog-post">
    <h1>{{ content.name }}</h1>
    <div class="blog-post__meta">
      <a href="https://br.developers.hubspot.com/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://br.developers.hubspot.com/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>
As informações sobre o autor da postagem do blog também estão disponíveis em content dados. 
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
<h3>Written by <a class="author-link" href="https://br.developers.hubspot.com/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://br.developers.hubspot.com/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://br.developers.hubspot.com/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://br.developers.hubspot.com/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://br.developers.hubspot.com/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 %}

​
Marcação de modelo de listagem

O página de listagem de blog padrão o conteúdo do loop é renderizado com o seguindo marcação: 
{% 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://br.developers.hubspot.com/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--large">
        <h2><a href="https://br.developers.hubspot.com/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://br.developers.hubspot.com/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--small">
        <h2><a href="https://br.developers.hubspot.com/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content|truncatehtml(100) }}
        </div>
    </div>
    {% endif %}
{% endfor %}

​
Recursos relacionados