Available Blog Templates
Blog Index Template
File:templates/blog-index.html
Purpose: Standard blog listing page that displays blog posts in a grid or list format.
Template Annotations
Structure
Features
- Blog Listing Hero - Header section for the blog
- Blog Listing Module - Displays posts in a customizable layout
- Pagination - Automatically shows pagination when there are multiple pages
- Conditional Display - Pagination only appears when needed
HubSpot Variables
contents- Blog post data provided by HubSpotcontents.total_page_count- Total number of pagessimple_list_page- Boolean indicating if this is a simple list page
Blog Index Modular Template
File:templates/blog-index-modular.html
Purpose: Drag-and-drop enabled blog listing page for maximum flexibility.
Template Annotations
Structure
Features
- Drag-and-Drop Editor - Full DnD area for content customization
- Flexible Layout - Content editors can add/remove sections
- Configurable Padding - Responsive padding settings
- Modular Design - Blog modules wrapped in DnD rows
The modular template gives content editors more control over layout and allows them to add additional content sections around the blog listing.
Blog Post Template (Modern)
File:templates/blog-post.html
Purpose: Modern, full-width blog post layout with gradient header.
Template Annotations
Structure
Features
- Gradient Header - Eye-catching gradient background
- Centered Title - Large, balanced heading
- Author Info - Author name and publish date
- Back to Blog - Navigation link with hover animation
- Post Body - Full article content with Tailwind Typography
- Tags - Tag list with links to tag archives
- Post Author Module - Author bio and avatar
- Share Buttons - Social sharing functionality
- Post Navigation - Previous/next post links
- Comments - Conditional comments section
- Related Posts - Related content in row layout
- Scroll to Top - Button for long posts
HubSpot Blog Variables
Blog Post Sidebar Template (Classic)
File:templates/blog-post-sidebar.html
Purpose: Classic blog post layout with sidebar for related posts.
Template Annotations
Structure
Features
- Two-Column Layout - Main content (2/3) + sidebar (1/3)
- Responsive Grid - Stacks on mobile, side-by-side on desktop
- Sidebar Related Posts - Related posts in column layout
- Classic Design - Traditional blog post layout
- All Standard Features - Author, tags, share, comments, navigation
Layout Comparison
| Feature | Modern Template | Sidebar Template |
|---|---|---|
| Layout | Full-width | Two-column |
| Related Posts | Full-width section | Sidebar |
| Header Style | Gradient with meta | Gradient, title only |
| Meta Position | In header | Below title |
| Best For | Long-form content, featured posts | News, updates, shorter posts |
Common Blog Features
Author Information
Both templates include author bio sections:Social Sharing
Share buttons for social media:Tag Navigation
Tags with links to tag archive pages:Comments
Conditional comments section:Post Navigation
Previous and next post links:Typography Classes
FreshJuice uses Tailwind Typography for blog content:- Base:
prose(default) - Small screens:
sm:prose-lg - Medium+ screens:
md:prose-xl
[&_img]:rounded-md- Rounded images[&>span]:block- Block-level spans[&_form]:bg-transparent- Transparent form backgrounds
Next Steps
Page Templates
Learn about page templates for standard content
System Templates
Explore error pages and system templates
Blog Modules
Understand blog-specific modules
Styling
Learn about styling and Tailwind CSS