Skip to main content

Supported products

Requires one of the following products or higher.

  • Content Hub -Starter
  • Marketing Hub -Professional

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.

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.

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

template-annotation-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.

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.

You can enable content creators to place modules on the perimeter of the blog listing content, such as on the sides, or above and below. To enable this, it's recommended to create a blog listing module that uses a blog listing for loop. Check out the CMS boilerplate blog listing module for an example.

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.

In additional 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.

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

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.

You can use an if tag statement to only render code on a blog topic listing page, which visitors can see when clicking a blog topic 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.

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.

Blog listing pages have auto-generated pagination. Your listing template can include logic to allow visitors to easily pages through your blog posts. The boilerplate blog accomplishes simple, number pagination through the following 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.

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:

Blog post author information is also available within the content data.

The boilerplate blog listing page contents for loop is rendered with the following markup: