> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
---
id: 41702ab8-030b-452a-9e20-d53d64260f27
---
# Blog templates
> Blog listing and blog post templates can be used to customize the appearance of a site's blog.
export const SupportedProducts = ({marketing, sales, service, cms, data, commerce, marketingLevel, salesLevel, serviceLevel, cmsLevel, dataLevel, commerceLevel}) => {
const translations = {
description: "Requires one of the following products or higher.",
productNames: {
marketing: "Marketing Hub",
sales: "Sales Hub",
service: "Service Hub",
cms: "Content Hub",
data: "Data Hub",
commerce: "Commerce Hub"
},
tiers: {
free: "Free",
starter: "Starter",
professional: "Professional",
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"
}, {
name: data ? translations.productNames.data : '',
level: translateTier(dataLevel),
icon: "https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/subscription_key_icons/operations_icon.svg",
alt: "Data Hub"
}, {
name: commerce ? translations.productNames.commerce : '',
level: translateTier(commerceLevel),
icon: "https://developers.hubspot.com/hubfs/Knowledge_Base/subscription_key_icons/commerce_icon.svg",
alt: "Commerce Hub"
}].filter(product => product.name && product.level);
if (products.length === 0) return null;
return
{translations.description}
{products.map((product, index) =>
{product.name} -{product.level}
)}
;
};
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](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) to the top of your template file. When using one template to render both, you'll use an [if statement](/cms/reference/hubl/if-statements) 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](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates), 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.
```jinja theme={null}
{% 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](/cms/start-building/building-blocks/templates/overview#blog-post) and [listing pages](/cms/start-building/building-blocks/templates/overview#blog-listing) 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](/cms/start-building/building-blocks/templates/overview#template-types) 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](https://knowledge.hubspot.com/blog/manage-your-blog-template-and-settings#select-your-blog-templates) within the account's blog settings.
### Listing page templates
The `templateType: blog_listing` annotation makes the template available for [selection under blog settings](https://knowledge.hubspot.com/blog/manage-your-blog-template-and-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](/cms/start-building/building-blocks/drag-and-drop/overview) 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](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) to see examples of including drag and drop areas.
The listing of posts is generated by a [for loop](/cms/reference/hubl/loops) that iterates through your blog posts. `contents` is a predefined sequence of content that contains all the posts contained in that blog.
```jinja theme={null}
{% for content in contents %}
Post item markup that renders with each iteration.
{% endfor %}
```
It's recommended to make all text strings on your blog listing template controlled by fields. This makes it easier to create [multilingual](/cms/start-building/features/multi-language-content) 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](/cms/reference/modules/default-modules), or build a [for loop](/cms/reference/hubl/loops) 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".
```jinja theme={null}
{% post_listing
max_links=5
listing_type="recent",
select_blog="default",
list_title="Recent Posts",
%}
```
While HubSpot provides [blog settings](https://knowledge.hubspot.com/blog/manage-your-blog-template-and-settings#select-your-blog-templates) 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.
## List tags on a blog post
To display a blog post's tags on the post, you can use a [for loop](/cms/reference/hubl/loops) 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 `
` 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](/cms/reference/hubl/if-statements) at the top, it will only render on posts that have one or more tags.
```jinja theme={null}
{% if content.tag_list %}
{% for tag in content.tag_list %}
{{ tag.name }}{% if not loop.last %},{% endif %}
{% endfor %}
{% endif %}
```
Learn more about HubL blog variables, such as `tag_list`, in the [HubL variables reference documentation](/cms/reference/hubl/variables#blog-variables).
## List authors on a blog post
To display a blog post's authors, use `content.blog_author_list` in the blog post template. This variable returns a list of all authors assigned to a post, including when only one author is set.
The example below renders each author's avatar and display name when the post has one or more authors assigned:
* If `content.blog_author_list` is populated, loop over it to render each author's avatar and display name.
* Use `loop.last` and `loop.revindex` to produce a comma-separated list with "and" before the final author (e.g., "Alice, Bob, and Carol").
```jinja theme={null}
{% if content.blog_author_list %}
{% for author in content.blog_author_list %}
{% if author.avatar %}
{% endif %}
{% endfor %}
By:
{% for author in content.blog_author_list %}
{{ author.display_name|sanitize_html }}{% if not loop.last %}{% if loop.revindex == 2 %} and {% else %}, {% endif %}{% endif %}
{% endfor %}
{% endif %}
```
Learn more about `blog_author_list` and related variables in the [HubL variables reference documentation](/cms/reference/hubl/variables#blog-variables).
## 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.
```jinja theme={null}
{% if blog_author %}
{% 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.
```jinja theme={null}
{% if tag %}
Posts about {{ page_meta.html_title|split(" | ")|last }}
{% 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](/cms/start-building/introduction/developer-environment/website-settings#number-of-posts-per-listing-page) 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](/cms/reference/hubl/if-statements#unless-statements) instead.
```jinja theme={null}
{% if not simple_list_page %}
Iterated post markup for regular listing
{% else %}
{% 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](/cms/start-building/introduction/developer-environment/design-manager#default-modules-and-themes). This module includes the following HubL and HTML:
```jinja expandable theme={null}
{# 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 %}
{% end_require_css %}
{# Pagination #}
{% if total_page_count > 1 %}
{% 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. Below is the blog post template from the default Elevate theme. Note that the template uses the `content.blog_author_list` variable to enable multiple authors to be configured for each post.
[View this template's source code in GitHub](https://github.com/HubSpot/cms-elevate-theme-public/blob/main/src/unified-theme/templates/blog-detail.hubl.html)
```jinja expandable theme={null}
{% set template_css = "../../assets/dist/css/blog.hubl.css" %}
{% extends "./layouts/base.hubl.html" %}
{% block body %}
{% if content.featured_image %}
{% endif %}
{% if content.topic_list|length > 0 %}
{% for topic in content.topic_list %}
{% if loop.index <= 3 %}
{{ topic.name|sanitize_html }}
{% endif %}
{% endfor %}
{% endif %}
{{ content.name|sanitize_html }}
{% set authors_to_display = content.blog_author_list if content.blog_author_list and content.blog_author_list|length > 0 else [content.blog_author] if content.blog_author else [] %}
{% if authors_to_display and authors_to_display|length > 0 %}
{% for author in authors_to_display %}
{% endfor %}
{% for author in authors_to_display %}
{% if author.display_name %}
{{ author.display_name|sanitize_html }}{% if not loop.last %}{% if loop.revindex == 2 %}, and {% else %}, {% endif %}{% endif %}
{% endif %}
{% endfor %}
{% set rec_posts = blog_recent_posts(group.id, 3) %}
{% set posts_to_use = [] %}
{% for post in rec_posts %}
{% do posts_to_use.append(post) if post.id != content.id and posts_to_use|length < 2 %}
{% endfor %}
{% macro build_recent_post(post) %}
{% if group.use_featured_image_in_summary %}
When building separate post and listing templates, the `is_listing_view` check is not required. Instead, you'll manually [select separate templates](https://knowledge.hubspot.com/blog/manage-your-blog-template-and-settings#select-your-blog-templates) within the account's blog settings.
### Listing page templates
The `templateType: blog_listing` annotation makes the template available for [selection under blog settings](https://knowledge.hubspot.com/blog/manage-your-blog-template-and-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](/cms/start-building/building-blocks/drag-and-drop/overview) 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](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) to see examples of including drag and drop areas.
The listing of posts is generated by a [for loop](/cms/reference/hubl/loops) that iterates through your blog posts. `contents` is a predefined sequence of content that contains all the posts contained in that blog.
```jinja theme={null}
{% for content in contents %}
```jinja theme={null}
{% post_listing
max_links=5
listing_type="recent",
select_blog="default",
list_title="Recent Posts",
%}
```
While HubSpot provides [blog settings](https://knowledge.hubspot.com/blog/manage-your-blog-template-and-settings#select-your-blog-templates) 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.
## List tags on a blog post
To display a blog post's tags on the post, you can use a [for loop](/cms/reference/hubl/loops) 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 ` }}){kind=avatar}