Skip to main content
Blog modules in FreshJuice DEV provide the essential components for creating and displaying blog content in HubSpot.

​
Available Blog Modules

FreshJuice includes 5 specialized blog modules:

​
Blog Listing Modules

Module: blog-listing.moduleCategory: BlogTag: BLOGPurpose: Display a list of blog posts with customizable layout options.Features:
  • Grid or list layout
  • Post thumbnails
  • Post excerpts
  • Author and date information
  • Category/tag display
  • Customizable post count
Use cases:
  • Main blog page
  • Blog archives
  • Category listings
  • Tag listings
Available for: Blog listing pages onlyTemplate usage:
{% module "blog_posts"
  path="../modules/blog-listing.module",
  label="Blog Posts"
%}
Module: blog-listing-hero.moduleCategory: BlogTags: BLOG, HEADERSPurpose: Hero section for blog listing pages featuring the latest or featured post.Features:
  • Featured post display
  • Large hero image
  • Post title and excerpt
  • CTA button
  • Author information
Use cases:
  • Blog homepage hero
  • Featured post highlight
  • Blog page header
Available for: Blog listing pages onlyNote: Not available for new content (is_available_for_new_content: false)

​
Pagination

Module: blog-pagination.moduleCategory: BlogTags: BLOG, NAVIGATIONPurpose: Pagination controls for navigating through multiple pages of blog posts.Features:
  • Previous/Next buttons
  • Page numbers
  • Current page indicator
  • Customizable button styles
  • Accessible navigation
Use cases:
  • Blog listing pagination
  • Archive navigation
  • Multi-page post lists
Available for: Blog listing pages onlyTemplate usage:
{% module "blog_pagination"
  path="../modules/blog-pagination.module",
  label="Blog Pagination"
%}

​
Related Content

​
Author & Sharing (Global Modules)

Module: global-post-author.moduleType: Global ModulePurpose: Display blog post author information including name, bio, and avatar.Features:
  • Author avatar
  • Author name
  • Author bio
  • Social links
  • Author archive link
Use cases:
  • Author byline
  • Author bio section
  • Blog post attribution
Available for: Blog post pages onlyNote: Global module, not available for new content (is_available_for_new_content: false)
Module: global-share-buttons.moduleType: Global ModuleCategory: SocialTags: SOCIAL, BLOG_POSTPurpose: Social sharing buttons for blog posts.Features:
  • Share to major social platforms
  • Email sharing
  • Copy link functionality
  • Custom button styles
  • Share counts (optional)
Platforms supported:
  • Twitter/X
  • Facebook
  • LinkedIn
  • Email
  • Copy link
Use cases:
  • Blog post sharing
  • Social engagement
  • Content distribution
Available for: Blog post pages onlyNote: Global module, not available for new content (is_available_for_new_content: false)

​
Blog Module Comparison

ModuleTypeTemplate TypePurpose
Blog ListingStandardBlog ListingDisplay list of posts
Blog Listing HeroStandardBlog ListingFeatured post hero
Blog PaginationStandardBlog ListingNavigate post pages
Related PostsStandardBlog PostShow related content
Post AuthorGlobalBlog PostAuthor information
Share ButtonsGlobalBlog PostSocial sharing

​
Blog Listing Template Example

Here’s a complete example of a blog listing template: 
{# templates/blog-index.html #}
<!--
  templateType: blog_listing
  isAvailableForNewContent: true
  label: Blog Listing
-->

{% extends "./layouts/base.html" %}

{% block body %}
  {% dnd_area "blog_listing" %}
    
    {# Hero section with featured post #}
    {% dnd_module "blog_hero"
      path="../modules/blog-listing-hero.module",
      label="Blog Hero"
    %}
    {% end_dnd_module %}
    
    {# Blog post listing #}
    {% dnd_module "blog_posts"
      path="../modules/blog-listing.module",
      label="Blog Posts"
    %}
    {% end_dnd_module %}
    
    {# Pagination #}
    {% dnd_module "pagination"
      path="../modules/blog-pagination.module",
      label="Pagination"
    %}
    {% end_dnd_module %}
    
  {% end_dnd_area %}
{% endblock body %}

​
Blog Post Template Example

Here’s a complete example of a blog post template: 
{# templates/blog-post.html #}
<!--
  templateType: blog_post
  isAvailableForNewContent: true
  label: Blog Post
-->

{% extends "./layouts/base.html" %}

{% block body %}
  <article class="blog-post">
    
    {# Post header #}
    <header class="post-header">
      <h1>{{ content.name }}</h1>
      <div class="post-meta">
        <time datetime="{{ content.publish_date }}">{{ content.publish_date_localized }}</time>
      </div>
    </header>
    
    {# Featured image #}
    {% if content.featured_image %}
      <img src="{{ content.featured_image }}" alt="{{ content.featured_image_alt_text }}">
    {% endif %}
    
    {# Post content #}
    <div class="post-content">
      {{ content.post_body }}
    </div>
    
    {# Author information (global module) #}
    {% global_partial path="../partials/post-author.html" %}
    
    {# Share buttons (global module) #}
    {% global_partial path="../partials/share-buttons.html" %}
    
    {# Related posts #}
    {% module "related_posts"
      path="../modules/related-posts.module",
      label="Related Posts"
    %}
    
  </article>
{% endblock body %}

​
Blog Variables

FreshJuice blog modules have access to HubSpot blog variables:

​
Blog Listing Variables

{{ contents }}                 {# List of blog posts #}
{{ contents.total_count }}     {# Total number of posts #}
{{ contents.total_page_count }} {# Total number of pages #}
{{ current_page_num }}         {# Current page number #}

​
Blog Post Variables

{{ content.name }}                    {# Post title #}
{{ content.post_body }}               {# Post content #}
{{ content.post_summary }}            {# Post excerpt #}
{{ content.publish_date }}            {# Publish date #}
{{ content.publish_date_localized }}  {# Localized date #}
{{ content.featured_image }}          {# Featured image URL #}
{{ content.featured_image_alt_text }} {# Image alt text #}
{{ content.topic_list }}              {# Post topics/tags #}
{{ content.blog_author }}             {# Author object #}
{{ content.blog_author.display_name }} {# Author name #}
{{ content.blog_author.avatar }}      {# Author avatar #}
{{ content.blog_author.bio }}         {# Author bio #}

​
Customizing Blog Modules

​
Styling Blog Listings

/* Blog listing grid layout */
.blog-listing {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.blog-post-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.blog-post-image {
  @apply w-full h-48 object-cover;
}

.blog-post-title {
  @apply text-xl font-bold mb-2;
}

.blog-post-excerpt {
  @apply text-gray-600 mb-4;
}
Customize how many related posts to display: 
{
  "name": "post_count",
  "label": "Number of posts",
  "type": "number",
  "default": 3
}

​
Blog Best Practices

Post summaries appear in blog listings. Write clear, engaging excerpts that encourage clicks.
For better performance, paginate blog listings instead of showing all posts on one page.
Social share buttons make it easy for readers to promote your content.
Author bios build trust and authority. Include author information on blog posts.
Use HubSpot topics (tags) to categorize posts and power related post functionality.

​
Performance Tips

Optimization: Blog listings can be optimized by limiting the number of posts per page and using lazy loading for images.
  • Limit posts per page: Show 9-12 posts per page, use pagination for more
  • Optimize images: Use HubSpot’s image optimization for featured images
  • Lazy load images: Use loading=“lazy” attribute for post thumbnails
  • Cache related posts: Related posts are automatically cached by HubSpot

​
SEO Considerations

​
Blog Listing SEO

{# Add schema markup for blog listing #}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Blog",
  "name": "{{ group.name }}",
  "url": "{{ group.absolute_url }}"
}
</script>

​
Blog Post SEO

{# Add schema markup for blog post #}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ content.name }}",
  "image": "{{ content.featured_image }}",
  "datePublished": "{{ content.publish_date }}",
  "dateModified": "{{ content.updated }}",
  "author": {
    "@type": "Person",
    "name": "{{ content.blog_author.display_name }}"
  }
}
</script>

Blog Templates

Learn about blog listing and blog post templates

Content Modules

Explore other content modules

HubL Templates

Learn about HubL templating language

Creating Modules

Build custom blog modules

Build docs developers (and LLMs) love

Get started for freeTalk to us