Demonstrate Blog Post Page.
View this pattern on the live demo site
Single-post page template; the article body lives in a section.
{% comment %}
This is the page template to display blog posts.
{% endcomment -%}
{%- include "/_header.liquid" -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_blogpost_main.liquid" -%}
{%- include "/sections/_cta_snippet.liquid" section_class:'py-4 py-lg-5' -%}
{%- include "/_footer.liquid" -%}Post title, byline, tags, and HTML for one blog post.
{% comment %}
This template handles the main display of a blog post, including an optional sidebar next to the blog post
Inputs:
show_title - false to prevent the title from displaying
section_class
section_id
Outputs:
section_rendered - true when this section outputs markup, false otherwise
sidebar_search_target - will be assigned on the root scope to the blog's URL if show_sidebar_search is true
Other inputs passed through to /partials/_blogpost_full.liquid:
show_date - false to prevent the post date from displaying
date_format - the format to show the date in. Default value is 'MMMM d, yyyy'
posted_on_text - the text to display before the post date
show_tags - true to show related tags
tags_title - the title to use for the tags. Defaults to 'Related Topics'
show_authors - false to prevent the blog post's authors from being displayed
authored_by_text - the text to display before the author(s)
Custom Fields:
show_sidebar
show_sidebar_search
sidebar_related_content
sidebar_related_content_title
{% endcomment -%}
{%- var post = entity -%}
{%- if post.object_type == 'blog_post' -%}
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
<section{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
<div class="container py-4 py-lg-5">
{%- unless show_title == false -%}
<div class="row">
<div class="col-12 col-xl-11 mx-auto">
{%- include '/common/_title.liquid' title_classname:'text-center text-primary' postincrement_headinglevel:true -%}
<hr class="text-primary">
</div>
</div>
{%- endunless -%}
<div class="row g-4 g-lg-5 align-items-start">
<div class="col-12{% if entity.show_sidebar.on %} col-lg-8{% else %} col-xl-11 mx-auto{% endif %}">
{%- include "/partials/_blogpost_full.liquid" show_title:false -%}
</div>
{%- if entity.show_sidebar.on -%}
{%- var show_sidebar_search = entity.show_sidebar_search.on -%}
{%- var sidebar_search_title ='Search the Blog' -%}
{%- var sidebar_search_placeholder = 'What are you looking for?' -%}
{%- if show_sidebar_search and post.blog.has_url %}{% assign sidebar_search_target = post.blog.full_url %}{% endif -%}
{%- var sidebar_related_content_title = entity.sidebar_related_content_title | default:'Related Posts' -%}
{%- var sidebar_related_content = entity.sidebar_related_content -%}
{%- unless sidebar_related_content is_valid -%}
{%- if post.tags.is_valid -%}
{%- blog_posts assign sidebar_related_content = tag:post.tags limit:5 sort_by:'post_date' sort_direction:'desc' exclude:post -%}
{%- endif -%}
{%- endunless -%}
{%- var sidebar_topics_title = 'Browse Topics' -%}
{%- var sidebar_topics = post.tags -%}
{%- var sidebar_recent_posts_count = 5 -%}
{%- var sidebar_recent_posts_title = 'Recent Posts' -%}
{%- var sidebar_recent_posts_exclude = post -%}
<div class="col-12 col-lg-4">
{%- include '/partials/_blog_sidebar.liquid' -%}
</div>
{%- endif -%}
</div>
</div>
</section>
{%- set section_rendered = true -%}
{%- else -%}
{%- set section_rendered = false -%}
{%- endif %}
Custom fields owned by the blog post section.
[
{
"Type": "toggle",
"FieldID": "show_sidebar",
"Label": "Show Sidebar",
"OnValue": "show",
"OffValue": "hide",
"OnColor": "green",
"OffColor": "red",
"OnLabel": "Show",
"OffLabel": "Hide",
"DefaultValue": true
},
{
"Type": "group",
"Label": "Sidebar Content",
"Condition": {
"Type": "exists",
"FieldID": "show_sidebar"
},
"Fields": [
{
"Type": "toggle",
"FieldID": "show_sidebar_search",
"Label": "Show Sidebar Search",
"DefaultValue": true,
"OnValue": "show",
"OffValue": "hide",
"OnColor": "green",
"OffColor": "red",
"OnLabel": "Show",
"OffLabel": "Hide"
},
{
"Type": "entitylist",
"FieldID": "sidebar_related_content",
"HasUrl": true
},
{
"Type": "text",
"FieldID": "sidebar_related_content_title",
"Label": "Sidebar Related Content Title",
"DefaultValue": "Related Content",
"Condition": {
"Type": "exists",
"FieldID": "sidebar_related_content"
}
}
]
}
]
Article body: byline, tags, and HTML for one blog post.
{% comment %}
Display a full blog post
Inputs:
post - the blog post to display
show_title - false to prevent the title from displaying
show_date - false to prevent the post date from displaying
date_format - the format to show the date in. Default value is 'MMMM d, yyyy'
posted_on_text - the text to display before the post date
show_tags - true to show related tags
tags_title - the title to use for the tags. Defaults to 'Related Topics'
show_authors - false to prevent the blog post's authors from being displayed
authored_by_text - the text to display before the author(s)
img_preset_blog_hero - The image preset to use for the blogpost hero image
{% endcomment -%}
{%- if post.is_valid -%}
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
{%- var show_date = show_date | default: true -%}
{%- var show_tags = show_tags | default: true %}{% unless post.tags.is_valid %}{% set show_tags = false %}{% endunless -%}
{%- var show_authors = show_authors | default: true %}{% unless post.authors.is_valid %}{% set show_authors = false %}{% endunless -%}
{%- var show_byline = false %}{% if show_date or show_authors %}{% set show_byline = true %}{% endif -%}
{%- unless show_title == false -%}
{%- include '/common/_title.liquid' title:post.title title_classname:'text-center text-primary' postincrement_headinglevel:true -%}
<hr class="text-primary">
{%- endunless -%}
{%- if show_byline -%}
<div class="pb-3">
<span class="text-muted">
{%- if show_date -%}
{%- var date_format = date_format | default:"MMMM d, yyyy" -%}
{{posted_on_text | default:'Posted on'}} {{post.post_date | date:date_format }}
{%- endif -%}
{%- if show_authors -%}
{%- if show_date %} {% endif -%}
{{authored_by_text | default:'by'}} {% include '/common/_entity_list_simple.liquid' entities:post.authors entity_link_class:'text-muted' entity_span_class:'text-muted' -%}
{%- endif -%}
</span>
</div>
{%- endif -%}
{%- img post.image class:'img-fluid rounded-3 mb-4' preset:img_preset_blog_hero -%}
<div class="blogpost-body fs-6 lh-lg">
{{ post.content_html }}
</div>
{%- if show_tags -%}
<div class="mt-5 pt-4">
<div class="rounded-4 text-bg-light border p-4">
{%- var title = tags_title | default:'Related Topics' -%}
{%- include '/common/_title.liquid' title_classname:'h5 text-primary mb-2' -%}
<p class="small text-muted mb-3">Explore more posts with these topics:</p>
{%- include '/partials/_taglist.liquid' tags:post.tags -%}
</div>
</div>
{%- endif -%}
{%- endif %}