Demonstrate Blog Page.
View this pattern on the live demo site
Blog landing page: thin wrapper around the blog-main section.
{% comment %}
Blog index page (posts feed + optional sidebar).
{% endcomment -%}
{%- include "/_header.liquid" -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_blog_main.liquid" -%}
{%- include "/_footer.liquid" -%}
Renders the post list and pagination for the blog.
{% comment %}
Displays blog information and blog post cards for a blog
Inputs:
page_param - the query parameter to use for pagination links. Defaults to 'page'
limit - the number of blog posts to show. Defaults to 12
Inputs passed through to _blog_feed.liquid:
section_class
section_id
+ any inputs passed through to child templates (eg: _pagination.liquid, _blogpost_card.liquid, etc...)
Custom Fields:
content_html
show_sidebar
show_sidebar_search
sidebar_related_content
sidebar_related_content_title
empty_posts_html - optional HTML for zero-result searches / empty feeds
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- if entity.object_type == 'blog' -%}
{%- var blog = entity -%}
{%- var page_param = page_param | default:'page' -%}
{%- var pageNum = request.query_params[page_param] | default:1 | to_int | at_least:1 -%}
{%- var limit = limit | default:12 | to_int | at_least:3 -%}
{%- var sidebar_search_param = sidebar_search_param | default: site_search_param | default:'q' -%}
{%- var search_term = request.query_params[sidebar_search_param] | url_decode: true -%}
{%- capture var blogpost_filters -%}
blog:entity
{% if search_term is_valid %}filter:search_term{% endif %}
page:pageNum
sort_by:"post_date"
sort_direction:"desc"
limit:limit
{%- endcapture -%}
{%- blog_posts var posts = *blogpost_filters -%}
{%- var exclude_tag = '' %}
{%- var exclude_author = '' -%}
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
{%- var show_blogcontent_in_header = entity.content_html.is_valid %}{% if posts.page > 1 %}{% set show_blogcontent_in_header = false %}{% endif -%}
{%- var show_blogtitle_in_sidebar = false -%}
{%- var titletext = entity.title -%}
{%- if search_term is_valid -%}
{%- capture set titletext %}Search {{entity.title}} for "{{search_term | escape}}"{% endcapture -%}
{%- set show_blogtitle_in_sidebar = true -%}
{%- set show_blogcontent_in_header = false -%}
{%- endif -%}
{%- capture var blog_feed_header -%}
{%- include '/common/_title.liquid' title:titletext title_classname:'text-center text-primary mt-3 mb-4' postincrement_headinglevel:true -%}
{%- if show_blogcontent_in_header -%}
{{entity.content_html}}
{%- endif -%}
<hr class="text-primary">
{%- endcapture -%}
{%- var sidebar_context_title = 'About This Blog' %}{% if show_blogtitle_in_sidebar %}{% set sidebar_context_title = entity.title %}{% endif -%}
{%- var sidebar_context_html = '' -%}
{%- unless show_blogcontent_in_header %}{% set sidebar_context_html = entity.content_html %}{% endunless -%}
{%- var sidebar_search_term = search_term -%}
{%- assign sidebar_recent_posts_count = 5 -%}
{%- var sidebar_recent_posts_title = 'Recent Posts' -%}
{%- var sidebar_topics_title = sidebar_topics_title | default:'Browse Topics' -%}
{%- unless sidebar_topics is_valid -%}
{%- comment %}Allow the sidebar topics to be passed in, or load them dynamically from the current list of posts + random tags up to a max of 24{% endcomment -%}
{%- var taglist = null -%}
{%- include '/common/_taglist_from_items.liquid' items:posts max_tags:12 taglist_autofill_with_random:true -%}
{%- assign sidebar_topics = taglist -%}
{%- endunless -%}
{%- var empty_posts_html = entity.empty_posts_html -%}
{%- include '/partials/_blog_feed.liquid' only_show_header_on_first_page:false show_sidebar:entity.show_sidebar.on show_sidebar_search:entity.show_sidebar_search.on sidebar_related_content:entity.sidebar_related_content sidebar_related_content_title:entity.sidebar_related_content_title -%}
{%- set section_rendered = true -%}
{%- else -%}
{%- set section_rendered = false -%}
{%- endif -%}
Custom fields owned by the blog listing section.
[
{
"Type": "html",
"FieldID": "content_html",
"Label": "Content to Display Above the Blog Posts"
},
{
"Type": "html",
"FieldID": "empty_posts_html",
"Label": "Empty Results Message",
"Subtext": "Optional override shown when a blog search or filter returns no posts."
},
{
"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",
"IsRequired": true,
"Condition": {
"Type": "exists",
"FieldID": "sidebar_related_content"
}
}
]
}
]
Post grid (or rows) plus optional sidebar and pagination.
{% comment %}
Outputs a blog feed section with the given blog posts displayed as a list of cards.
Inputs:
section_class - an optional classname to apply to the section
section_id - an optional id to apply to the section
blog_feed_header - optional markup to include as the header above the blog feed
only_show_header_on_first_page - false to allow the header to be displayed past the first page of the collection
posts - the collection of blog posts to output
show_sidebar - true to show the blog sidebar next to the blog posts
empty_posts_html - optional markup when there are no posts to display
Inputs passed through to _blog_sidebar.liquid:
show_sidebar_search - when true, show the sidebar search widget
Inputs passed through to /common/_pagination.liquid:
page_param
Inputs passed through to _blogpost_card.liquid:
show_authors - true to show the blog post's authors in the card footer
show_tags - true to show the blog post's tags
card_classes (optional) - additional classes to include on <div class="card">
If show_sidebar is true, all relevant inputs are passed through to /partials/_blog_sidebar.liquid.
Additionally, sidebar_recent_posts_exclude is automatically updated to exclude all of the posts
{% endcomment -%}
<section{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
{%- if blog_feed_header is_valid %}{% if posts.page == 1 or only_show_header_on_first_page == false %}{{blog_feed_header}}{% endif %}{% endif -%}
{%- var post_cols = 3 -%}
<div class="container py-4 py-lg-5">
{%- if show_sidebar -%}
<div class="row g-4 g-lg-5 align-items-start">
<div class="col-12 col-lg-8 order-2 order-lg-1">
{%- set post_cols = 2 -%}
{%- endif -%}
{%- if posts.is_valid and posts.size > 0 -%}
{%- comment %}
Use the following to display the blog feed as rows instead of cards:
{%- include "/partials/_blog_feed_rows.liquid" -%}
{% endcomment -%}
{%- include "/partials/_blog_feed_cards.liquid" -%}
{%- else -%}
<div class="text-center py-5 px-3 rounded-4 text-bg-light border">
{%- if empty_posts_html is_valid -%}
{{ empty_posts_html }}
{%- else -%}
<p class="h4 text-primary mb-3">No matching posts found</p>
{%- if show_sidebar -%}
<p class="text-muted mb-0">Try another search, or browse recent posts and topics in the sidebar.</p>
{%- endif -%}
{%- endif -%}
</div>
{%- endif -%}
{%- if show_sidebar -%}
</div>
<div class="col-12 col-lg-4 order-1 order-lg-2">
{%- var sidebar_recent_posts_exclude = sidebar_recent_posts_exclude | default: '' -%}
{%- if posts.is_valid %}{% set sidebar_recent_posts_exclude = sidebar_recent_posts_exclude | concat:posts %}{% endif -%}
{%- include '/partials/_blog_sidebar.liquid' -%}
</div>
</div>
{%- endif -%}
</div>
{%- if posts.is_valid and posts.size > 0 -%}
<div class="container mb-4">
{%- include '/common/_pagination.liquid' collection:posts pagination_justify:'center' -%}
</div>
{%- endif -%}
</section>