Blog templates - HubSpot docs

Supported products

Requires one of the following products or higher.

Marketing HubProfessional

Content HubStarter

Last modified: August 22, 2025

HubSpot blogs consist of blog listing pages and the individual blog posts. In addition to listing the individual blog posts, the blog listing template is also used for rendering the author and tag listing pages. You can either create a single template to render all listing and blog post pages, or you can create two separate templates. Below, learn about blog template markup, template components, and customization options.

Create a shared template for the listing and post pages

To create one template that renders the listing and post pages, add the templateType: blog annotation to the top of your template file. When using one template to render both, you’ll use an if statement that evaluates whether the user is looking at a listing page or an individual post. If you are using the drag and drop design manager layouts, this if statement is built into the UI of blog content module buttons. By using the if is_listing_view statement, you can write your post and listing code separately.

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

Create separate listing and post templates

Alternatively, you can choose to have separate templates for blog post and listing pages which can help make your code cleaner and easier to read as a developer, while making the templates easier to select for content creators. Rather than using the templateType: blog annotation at the top of the one template, include the following annotations at the top of your two templates:

Blog post template: templateType: blog_post
Blog listing template: templateType: blog_listing

When building separate post and listing templates, the is_listing_view check is not required. Instead, you’ll manually select separate templates within the account’s blog settings.

Listing page templates

The templateType: blog_listing annotation makes the template available for selection under blog settings specifically for the listing view. With this template type, content creators can also edit the listing page within the page editor. By also including drag and drop areas in the template, modules can be added and removed in the page editor like they can for other CMS pages. Check out the CMS boilerplate blog templates to see examples of including drag and drop areas. The listing of posts is generated by a for loop that iterates through your blog posts. contents is a predefined sequence of content that contains all the posts contained in that blog.

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

It’s recommended to make all text strings on your blog listing template controlled by fields. This makes it easier to create multilingual blogs and gives content creators more control.

Create a blog listing module

To display a series of blog post previews, it’s recommended to use HubSpot’s default post_listing module, or build a for loop that iterates through blog posts. Below is an example implementation of the default post_listing module for a blog post template. Based on the included parameters, it would display the most recent posts from the default blog (up to 5) underneath a title of “Recent Posts”.

Screenshot of an example post_listing module implementation

{% post_listing
  max_links=5
  listing_type="recent",
  select_blog="default",
  list_title="Recent Posts",
%}

While HubSpot provides blog settings for showing summaries and using featured images, you can also build these features into your module. This enables content creators to set these features within the page editor, rather than blog settings. To display a blog post’s tags on the post, you can use a for loop in the blog post template to render the tags when present. As an example, the code below does the following when added to a blog post template:

If the currently displaying post has blog tags, create a <div> to render additional content.
For each blog tag assigned to the current post, create a link to that tag’s listing page, where readers can view other posts with that tag. The link will use the tag’s name for display.
After each tag, add a comma when there are additional tags to display.

Because the code includes the if statement at the top, it will only render on posts that have one or more tags.

{% if content.tag_list %}
    <div class="blog-post__tags">
      {% 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 %}

Learn more about HubL blog variables, such as tag_list, in the HubL variables reference documentation.

Blog author, tag, and simple listing pages

In addition to the blog post and blog listing pages, HubSpot blogs also have pages for blog authors, blog post tags, and simple listing pages. These additional pages use the same template as the blog listing page to render their content.

Because the listing page template is also shared by the blog author, tag, and simple listing page, updates published to the template will also apply to those pages.

To configure the layout of these pages individually, you can use if statements to conditionally render content for each type of page.

If blog_author

Within the standard HubSpot blog listing markup, there is an if blog_author statement. This statement evaluates as true when viewing an author’s page, which lists the posts published by the author. The boilerplate template includes the author’s name, bio, and social media accounts.

{% 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.com/docs{{ blog_author.website }}" target="_blank">
              {% icon name="link" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.facebook %}
            <a href="https://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://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://developers.hubspot.com/docs{{ blog_author.twitter }}" target="_blank">
              {% icon name="twitter" style="SOLID" width="10" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% else %}

If tag

You can use an if tag statement to only render code on a blog tag listing page, which visitors can see when clicking a blog tag on your site. The example below is a snippet that uses the page title variable to automatically print the tag name at the top of a tag listing page.

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

If not simple_list_page

There are two types of blog listing pages that can be rendered to display blog post listings: the regular listing page, and a simple listing page:

The regular listing iterates through the number of posts specified by the post listing blog setting and paginates accordingly.
A simple listing is a listing of all your posts and does not support pagination. The simple listing is not affected by the post limit blog setting and generally just contains links to the most recent 200 blog posts. The address of your simple listing page is the URL for your blog with /all added to the end of the path.

You can use an if not simple_list_page statement to determine what to render in a simple versus regular listing. A simplified version of this statement is shown below.

Note that the if statement uses reverse logic, which means that the else defines the simple listing view. Optionally, you could use an unless statement instead.

{% if not simple_list_page %}
    Iterated post markup for regular listing
{% else %}
    <h2 class="post-listing-simple"><a href="https://developers.hubspot.com/docs{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}

Listing pagination

Blog listing pages have auto-generated pagination. Your listing template can include logic to allow visitors to easily pages through your blog posts. HubSpot provides a default pagination module that you can use to accomplish this. You can find this module in the @hubspot directory of the design manager. This module includes the following HubL and HTML:

{# Module variables #}

{% if module.numbers.index("show_numbers") >= 0 %}
  {% set show_numbers = true %}
{% endif %}

{% if module.previous_and_next.index("show_labels") >= 0 %}
  {% set show_next_and_previous_labels = true %}
{% endif %}

{% if module.previous_and_next.index("show_arrows") >= 0 %}
  {% set show_next_and_previous_arrows = true %}
{% endif %}

{% if module.first_and_last.index("show_labels") >= 0 %}
  {% set show_first_and_last_labels = true %}
{% endif %}

{% if module.first_and_last.index("show_arrows") >= 0 %}
  {% set show_first_and_last_arrows = true %}
{% endif %}

{% set first_page_link = blog_page_link(1)|cut("/page/1") %}

{# Mock data for editor #}

{% if is_in_editor %}
  {% set total_page_count = 6 %}
  {% set current_page_num = 2 %}
  {% set next_page_num = true %}
  {% set last_page_num = true %}
{% else %}
  {% set total_page_count = contents.total_page_count %}
{% endif %}

{# Module styles #}

{% require_css %}
  <style>
    {% scope_css %}

      {# Pagination #}

      .hs-pagination {
        {{ module.styles.pagination.spacing.spacing.css }}
      }

      .hs-pagination__link:not(:last-child) {
        margin-right: {{ module.styles.pagination.spacing.space_between_links ~ "px" }};
      }

      {# Numbers #}

      {% if show_numbers %}

        .hs-pagination__link--number {
          {% if module.styles.numbers.background.color.color %}
            background-color: rgba({{ module.styles.numbers.background.color.color|convert_rgb }}, {{ module.styles.numbers.background.color.opacity / 100 }});
          {% endif %}
          {{ module.styles.numbers.border.border.css }}
          {% if module.styles.numbers.corner.radius >= 0 %}
            border-radius: {{ module.styles.numbers.corner.radius ~ "px" }};
          {% endif %}
          {{ module.styles.numbers.text.font.css }}
          {{ module.styles.numbers.spacing.spacing.css }}
        }

        .hs-pagination__link--active {
          {% if module.styles.numbers.active.background.color.color %}
            background-color: rgba({{ module.styles.numbers.active.background.color.color|convert_rgb }}, {{ module.styles.numbers.active.background.color.opacity / 100 }});
          {% endif %}
          {% if module.styles.numbers.active.border.color.color %}
            border-color: {{ module.styles.numbers.active.border.color.color }};
          {% endif %}
          {% if module.styles.numbers.active.text.color.color %}
            color: {{ module.styles.numbers.active.text.color.color }};
          {% endif %}
        }

        .hs-pagination__link--number:hover,
        .hs-pagination__link--number:focus {
          {% if module.styles.numbers.hover.background.color.color %}
            background-color: rgba({{ module.styles.numbers.hover.background.color.color|convert_rgb }}, {{ module.styles.numbers.hover.background.color.opacity / 100 }});
          {% endif %}
          {% if module.styles.numbers.hover.border.color.color %}
            border-color: {{ module.styles.numbers.hover.border.color.color }};
          {% endif %}
          {% if module.styles.numbers.hover.text.color.color %}
            color: {{ module.styles.numbers.hover.text.color.color }};
          {% endif %}
        }

      {% endif %}

      {# Next/previous #}

      {% if show_next_and_previous_arrows or show_next_and_previous_labels %}
        .hs-pagination__link--prev,
        .hs-pagination__link--next {
          {% if module.styles.previous_and_next.background.color.color %}
            background-color: rgba({{ module.styles.previous_and_next.background.color.color|convert_rgb }}, {{ module.styles.previous_and_next.background.color.opacity / 100 }});
          {% endif %}
          {{ module.styles.previous_and_next.border.border.css }}
          {% if module.styles.previous_and_next.corner.radius >= 0 %}
            border-radius: {{ module.styles.previous_and_next.corner.radius ~ "px" }};
          {% endif %}
          {{ module.styles.previous_and_next.spacing.spacing.css }}
        }

        .hs-pagination__link--prev:hover,
        .hs-pagination__link--prev:focus,
        .hs-pagination__link--next:hover,
        .hs-pagination__link--next:focus {
          {% if module.styles.previous_and_next.hover.background.color.color %}
            background-color: rgba({{ module.styles.previous_and_next.hover.background.color.color|convert_rgb }}, {{ module.styles.previous_and_next.hover.background.color.opacity / 100 }});
          {% endif %}
          {% if module.styles.previous_and_next.hover.border.color.color %}
            border-color: {{ module.styles.previous_and_next.hover.border.color.color }};
          {% endif %}
        }

        {% if show_next_and_previous_labels %}
          .hs-pagination__link--prev > .hs-pagination__link-text,
          .hs-pagination__link--next > .hs-pagination__link-text {
            {{ module.styles.previous_and_next.text.font.css }}
          }

          {% if module.styles.previous_and_next.hover.text.color.color %}
            .hs-pagination__link--prev:hover > .hs-pagination__link-text,
            .hs-pagination__link--prev:focus > .hs-pagination__link-text,
            .hs-pagination__link--next:hover > .hs-pagination__link-text,
            .hs-pagination__link--next:focus > .hs-pagination__link-text {
              color: {{ module.styles.previous_and_next.hover.text.color.color }};
            }
          {% endif %}
        {% endif %}

        {% if show_next_and_previous_arrows and show_next_and_previous_labels %}
          {% if module.styles.previous_and_next.spacing.space_between_text_and_icon >= 0 %}
            .hs-pagination__link--text-and-icon.hs-pagination__link--prev > .hs-pagination__link-icon {
              margin-right: {{ module.styles.previous_and_next.spacing.space_between_text_and_icon ~ "px" }};
            }
          {% endif %}

          {% if module.styles.previous_and_next.spacing.space_between_text_and_icon >= 0 %}
            .hs-pagination__link--text-and-icon.hs-pagination__link--next > .hs-pagination__link-icon {
              margin-left: {{ module.styles.previous_and_next.spacing.space_between_text_and_icon ~ "px" }};
            }
          {% endif %}
        {% endif %}

        {% if show_next_and_previous_arrows %}
          .hs-pagination__link--prev > .hs-pagination__link-icon svg,
          .hs-pagination__link--next > .hs-pagination__link-icon svg {
            {% if module.styles.previous_and_next.icon.size %}
              height: {{ module.styles.previous_and_next.icon.size ~ "px" }};
              width: {{ module.styles.previous_and_next.icon.size ~ "px" }};
            {% endif %}
            {% if module.styles.previous_and_next.text.font.color %}
              fill: {{ module.styles.previous_and_next.text.font.color }};
            {% endif %}
          }

          {% if module.styles.previous_and_next.hover.text.color.color %}
            .hs-pagination__link--prev:hover > .hs-pagination__link-icon svg,
            .hs-pagination__link--prev:focus > .hs-pagination__link-icon svg,
            .hs-pagination__link--next:hover > .hs-pagination__link-icon svg,
            .hs-pagination__link--next:focus > .hs-pagination__link-icon svg {
              fill: {{ module.styles.previous_and_next.hover.text.color.color }};
            }
          {% endif %}
        {% endif %}
      {% endif %}

      {# First/last #}

      {% if show_first_and_last_arrows or show_first_and_last_labels %}
        .hs-pagination__link--first,
        .hs-pagination__link--last {
          {% if module.styles.first_and_last.background.color.color %}
            background-color: rgba({{ module.styles.first_and_last.background.color.color|convert_rgb }}, {{ module.styles.first_and_last.background.color.opacity / 100 }});
          {% endif %}
          {{ module.styles.first_and_last.border.border.css }}
          {% if module.styles.first_and_last.corner.radius >= 0 %}
            border-radius: {{ module.styles.first_and_last.corner.radius ~ "px" }};
          {% endif %}
          {{ module.styles.first_and_last.spacing.spacing.css }}
        }

        .hs-pagination__link--first:hover,
        .hs-pagination__link--first:focus,
        .hs-pagination__link--last:hover,
        .hs-pagination__link--last:focus {
          {% if module.styles.first_and_last.hover.background.color.color %}
            background-color: rgba({{ module.styles.first_and_last.hover.background.color.color|convert_rgb }}, {{ module.styles.first_and_last.hover.background.color.opacity / 100 }});
          {% endif %}
          {% if module.styles.first_and_last.hover.border.color.color %}
            border-color: {{ module.styles.first_and_last.hover.border.color.color }};
          {% endif %}
        }

        {% if show_first_and_last_labels %}
          .hs-pagination__link--first > .hs-pagination__link-text,
          .hs-pagination__link--last > .hs-pagination__link-text {
            {{ module.styles.first_and_last.text.font.css }}
          }

          {% if module.styles.first_and_last.hover.text.color.color %}
            .hs-pagination__link--first:hover > .hs-pagination__link-text,
            .hs-pagination__link--first:focus > .hs-pagination__link-text,
            .hs-pagination__link--last:hover > .hs-pagination__link-text,
            .hs-pagination__link--last:focus > .hs-pagination__link-text {
              color: {{ module.styles.first_and_last.hover.text.color.color }};
            }
          {% endif %}
        {% endif %}

        {% if show_first_and_last_arrows and show_first_and_last_labels %}
          {% if module.styles.first_and_last.spacing.space_between_text_and_icon >= 0 %}
            .hs-pagination__link--text-and-icon.hs-pagination__link--first > .hs-pagination__link-icon {
              margin-right: {{ module.styles.first_and_last.spacing.space_between_text_and_icon ~ "px" }};
            }
          {% endif %}

          {% if module.styles.first_and_last.spacing.space_between_text_and_icon >= 0 %}
            .hs-pagination__link--text-and-icon.hs-pagination__link--last > .hs-pagination__link-icon {
              margin-left: {{ module.styles.first_and_last.spacing.space_between_text_and_icon ~ "px" }};
            }
          {% endif %}
        {% endif %}

        {% if show_first_and_last_arrows %}
          .hs-pagination__link--first > .hs-pagination__link-icon svg,
          .hs-pagination__link--last > .hs-pagination__link-icon svg {
            {% if module.styles.first_and_last.icon.size %}
              height: {{ module.styles.first_and_last.icon.size ~ "px" }};
              width: {{ module.styles.first_and_last.icon.size ~ "px" }};
            {% endif %}
            {% if module.styles.first_and_last.text.font.color %}
              fill: {{ module.styles.first_and_last.text.font.color }};
            {% endif %}
          }

          {% if module.styles.first_and_last.hover.text.color.color %}
            .hs-pagination__link--first:hover > .hs-pagination__link-icon svg,
            .hs-pagination__link--first:focus > .hs-pagination__link-icon svg,
            .hs-pagination__link--last:hover > .hs-pagination__link-icon svg,
            .hs-pagination__link--last:focus > .hs-pagination__link-icon svg {
              fill: {{ module.styles.first_and_last.hover.text.color.color }};
            }
          {% endif %}
        {% endif %}
      {% endif %}

    {% end_scope_css %}
  </style>
{% end_require_css %}

{# Pagination #}

{% if total_page_count > 1 %}
  <nav aria-label="{{ module.default_text.pagination_navigation|escape_attr }}" role="navigation" class="hs-pagination">
    {# First page link #}

    {% if last_page_num and (show_first_and_last_arrows or show_first_and_last_labels) %}
      <a
        class="hs-pagination__link hs-pagination__link--first {{ "hs-pagination__link--text-and-icon" if show_first_and_last_arrows and show_first_and_last_labels }}"
        href="{{ first_page_link|escape_url }}"
      >
        {% if show_first_and_last_arrows %}
          {% icon "hs_first_icon"
            extra_classes="hs-pagination__link-icon",
            name="angle-double-left",
            purpose="decorative",
            style="SOLID",
            unicode="f100" %}
        {% endif %}
        {% if show_first_and_last_labels %}
          <span class="hs-pagination__link-text hs-pagination__show-for-sr--mobile">
            {{ module.first_label|sanitize_html }}
          </span>
        {% endif %}
      </a>
    {% endif %}

    {# Previous page link #}

    {% if last_page_num and (show_next_and_previous_arrows or show_next_and_previous_labels) %}
      {% set last_blog_page_link = blog_page_link(last_page_num) %}
      {% set prev_page_link = current_page_num == 2 ? first_page_link : last_blog_page_link %}
      <a
        class="hs-pagination__link hs-pagination__link--prev {{ "hs-pagination__link--text-and-icon" if show_next_and_previous_arrows and show_next_and_previous_labels }}"
        href="{{ prev_page_link|escape_url }}"
      >
        {% if show_next_and_previous_arrows %}
          {% icon "hs_previous_icon"
            extra_classes="hs-pagination__link-icon",
            name="angle-left",
            purpose="decorative",
            style="SOLID",
            unicode="f104" %}
        {% endif %}
        {% if show_next_and_previous_labels %}
          <span class="hs-pagination__link-text hs-pagination__show-for-sr--mobile">
            {{ module.previous_label|sanitize_html }}
          </span>
        {% endif %}
      </a>
    {% endif %}

    {# Numbered pagination #}

    {% if show_numbers %}

      {% set current_page_count = total_page_count - current_page_num %}

      {% set page_list = [ -2, -1, 0, 1, 2] %}

      {% if current_page_count == 1 %}
        {% set offset = -1 %}
      {% elif current_page_count == 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 %}

      {% for page in page_list %}
      {% set this_page = current_page_num + page + offset %}
      {% if this_page > 0 and this_page <= total_page_count %}
      {% set not_first_blog_page_link = blog_page_link(this_page) %}
      {% set this_page_link = (this_page == 1) ? first_page_link : not_first_blog_page_link %}
        <a
          class="hs-pagination__link hs-pagination__link--number {{ "hs-pagination__link--active" if this_page == current_page_num }}"
          aria-label="{{ module.default_text.go_to_page }}"
          {{ "aria-current=\"true\"" if this_page == current_page_num }}
          href="{{ this_page_link|escape_url }}"
          >
            {{ this_page|escape_html }}
          </a>
      {% endif %}
      {% endfor %}

    {% endif %}

    {# Next page link #}

    {% if next_page_num and (show_next_and_previous_arrows or show_next_and_previous_labels) %}
      <a
        class="hs-pagination__link hs-pagination__link--next {{ "hs-pagination__link--text-and-icon" if show_next_and_previous_arrows and show_next_and_previous_labels }}"
        href="{{ blog_page_link(current_page_num + 1)|escape_url }}"
      >
        {% if show_next_and_previous_labels %}
          <span class="hs-pagination__link-text hs-pagination__show-for-sr--mobile">
            {{ module.next_label|sanitize_html }}
          </span>
        {% endif %}
        {% if show_next_and_previous_arrows %}
          {% icon "hs_next_icon"
            extra_classes="hs-pagination__link-icon",
            name="angle-right",
            purpose="decorative",
            style="SOLID",
            unicode="f105" %}
        {% endif %}
      </a>
    {% endif %}

    {# Last page link #}

    {% if next_page_num and (show_first_and_last_arrows or show_first_and_last_labels) %}
      <a
        class="hs-pagination__link hs-pagination__link--last {{ "hs-pagination__link--text-and-icon" if show_first_and_last_arrows and show_first_and_last_labels }}"
        href="{{ blog_page_link(total_page_count)|escape_url }}"
      >
        {% if show_first_and_last_labels %}
          <span class="hs-pagination__link-text hs-pagination__show-for-sr--mobile">
            {{ module.last_label|sanitize_html }}
          </span>
        {% endif %}
        {% if show_first_and_last_arrows %}
          {% icon "hs_last_icon"
            extra_classes="hs-pagination__link-icon",
            name="angle-double-right",
            purpose="decorative",
            style="SOLID",
            unicode="f101" %}
        {% endif %}
      </a>
    {% endif %}
  </nav>
{% endif %}

Boilerplate markup

Below, view the boilerplate markup for the blog post and blog listing page templates. You can also view this markup in the CMS boilerplate on GitHub, as listed in each section.

Post template markup

All blog posts in a blog are generated by a single blog template. Content is a predefined object of data that contains information about the requested blog post. Boilerplate posts are rendered with the following markup:

<div class="content-wrapper">
  <article class="blog-post">
    <h1>{{ content.name|sanitize_html }}</h1>
    <div class="blog-post__meta">
      <a href="{{ blog_author_url(group.id, content.blog_post_author.slug)|escape_url }}" rel="author">
        {{ content.blog_post_author.display_name|escape_html }}
      </a>
      <time datetime="{{ content.publish_date|escape_attr }}" class="blog-post__timestamp">
        {{ content.publish_date_localized|escape_html }}
      </time>
    </div>
    <div class="blog-post__body">
      {{ content.post_body }}{# escaped elsewhere #}
    </div>
    {% if content.tag_list %}
      <div class="blog-post__tags">
        {% icon
          name="tag",
          purpose="decorative",
          style="SOLID"
        %}
        {% for tag in content.tag_list %}
          <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}" rel="tag">{{ tag.name|escape_html }}</a>{% if not loop.last %},{% endif %}
        {% endfor %}
      </div>
    {% endif %}
  </article>
  {% if group.allow_comments %}
    <div class="blog-comments">
      {% module "blog_comments"
        path="@hubspot/blog_comments",
        label="Blog comments"
      %}
    </div>
  {% endif %}
</div>

Listing template markup

The boilerplate blog index template uses the following code for creating the blog listing page, which includes a combination of default modules to populate blog content. For more post listing options, check out the following HubL tags:

<!--
  templateType: blog_listing
  isAvailableForNewContent: true
  label: Boilerplate - blog listing
  screenshotPath: ../images/template-previews/blog-index.png
-->
{% set template_css = "../../css/templates/blog.css" %}
{% extends "./layouts/base.html" %}

{% block body %}
{% dnd_area "dnd_area"
  label="Main section",
  class="body-container body-container--blog-index"
%}

  {# Hero banner #}

  {% dnd_section
    background_color="#f8fafc",
    max_width=600,
    padding={
      "default": {
        "top": 80,
        "right": 0,
        "bottom": 80,
        "left": 0
      },
      "mobile": {
        "top": 80,
        "right": 20,
        "bottom": 80,
        "left": 20
      }
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module
          path="@hubspot/rich_text",
          html='<div style="text-align: center;"><h1>Blog</h1><p>Use this space to tell everyone about what you have to offer.</p></div>'
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module
          path="@hubspot/blog_subscribe",
          title=""
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Blog listings and pagination #}

  {% dnd_section
    vertical_alignment="TOP"
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module path="@hubspot/blog_posts" %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module path="@hubspot/pagination" %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

{% end_dnd_area %}
{% endblock body %}

​Create a shared template for the listing and post pages

​Create separate listing and post templates

​Listing page templates

​Create a blog listing module

​List tags on a blog post

​Blog author, tag, and simple listing pages

​If blog_author

​If tag

​If not simple_list_page

​Listing pagination

​Boilerplate markup

​Post template markup

​Listing template markup

​Related resources

Create a shared template for the listing and post pages

Create separate listing and post templates

Listing page templates

Create a blog listing module

List tags on a blog post

Blog author, tag, and simple listing pages

If blog_author

If tag

If not simple_list_page

Listing pagination

Boilerplate markup

Post template markup

Listing template markup

Related resources