Did you know you can replace /blog with your own custom page running HAPI? Yep, by simply creating a new page and then setting the marketing keyword to blog it will automatically switch to your template.
Here's a sample blog that takes all your main categories, shows the articles in sliders and then puts the sub category links below it.
<div class="ui-update" data-pv-component="text" data-pv-conditional="{@q:category_no@} !=">
<section class="tier tier_topOffset hidden-print">
<div class="wrapper">
<section class="component">
<div class="component-content">
<div class="box">
<div class="box-bd box-bd_inflated mix-box_outlined_success">
<div class="split split_basisRight split_collapseOnMobile">
<div class="vr">
<h3 class="hdg hdg_6 mix-hdg_success">Check Out More Articles</h3>
<p class="txt">You're in a specific category at the moment, when you're done, there are more articles to view.</p>
</div>
<div>
<a class="btn" href="/blog">Browse Articles</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
<div>
<section data-pv-component="content" data-pv-parameters="{flag: 'featured', render: true, returnTotal: 1}" data-pv-type="list" id="features_image-left_white">
<picture><!-- small -->
<source srcset=""> <!-- medium -->
<source srcset=""> <!-- large -->
<source srcset=""> <!-- default -->
<img alt="{@page_title@} Blog Image" src="{@page_photo@}"></picture>
<div class="text-container">
<h3 data-pv-element="page_title">Blog Title...</h3>
<p data-pv-element="text_preview">Blog Article...</p><a href="/blog/{@page_no@}">Read Article</a>
</div>
</section>
</div>
<div class="pv-tier" data-pv-snippet="container">
<div class="pv-wrapper" data-pv-component="content" data-pv-snippet="row" data-pv-type="page">
<div class="pv-grid-col pv-grid-col_12of12" data-pv-snippet="column">
<section class="heading_3-card-rotator" data-pv-component="categories" data-pv-parameters="{reference_type: 'page', onlyshowMain: true, onlyshowPublic: true, sort_by: 'order_no'}" id="category-{@category_no@}">
<header>
<h2><span data-pv-element="category_name">Help Tutorials</span> Articles</h2>
<p data-pv-element="category_description">Find more ways to grow on PeopleVine.</p>
</header>
<div class="slider slider-{@category_no@}">
<div class="card" data-pv-component="content" data-pv-noresultshide="#category-{@category_no@}" data-pv-parameters="{page_type:'blog',returnTotal:'15',category_no:{@category_no@}, sortby: 'posted_on', includeSubCategories: true}" data-pv-type="list">
<a href="/blog/{@page_no@}"><img alt="{@page_title@}" onerror="imgError(this, 'https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png');" src="{@page_photo@}"></a>
<div class="tags">
<ul class="">
<li>
<a href="/blog?category_no={@category_no@}">{@category_name@}</a>
</li>
</ul>
</div><a href="/blog/{@page_no@}">
<h4 class="title" data-pv-element="page_title">Blog Title</h4></a>
<p data-pv-element="text_preview">text...</p>
<h6 class="j-date">Posted <span data-pv-element="posted_on" data-pv-formatter="date(MMMM d, yyyy)">Month 00, 0000</span></h6>
</div>
</div><!--Slider Stuff-->
<script>
$(document).ready(function() {
$('section.heading_3-card-rotator > .slider.slider-{@category_no@}').slick({
slidesToShow: 4,
slidesToScroll: 4,
dots: true,
autoplay: true,
autoplaySpeed: 5000,
arrows: false,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},{
breakpoint: 900,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
</script>
<div class="ui-update" data-pv-component="text" data-pv-conditional="{@q:category_no@} =" id="additionalTopics-{@category_no@}" style="padding-top: 20px;">
<section class="component vr vr_centered vr_x10">
<h2 class="hdg hdg_5">Additional Topics</h2>
<ul class="blocks blocks_3to2to1 vr vr_centered">
<li data-pv-component="categories" data-pv-noresultshide="#additionalTopics-{@category_no@}" data-pv-parameters="{category_above: {@category_no@}}">
<a class="btn mix-btn_stretch" href="/blog?category_no={@category_no@}">{@category_name@}</a>
</li>
</ul>
</section>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js" type="text/javascript">
</script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet" type="text/css">
<link href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" rel="stylesheet" type="text/css">
</div>
</div>
</div>
What you'll find in this code are a few sections. First, at the top, we will display a link to the main blog, if you are looking at a category. Then we'll show you the most recent featured blog post, followed by looping through the categories with each article inside. Lastly, the sub categories are also listed below.
Blog Page
The following code is a sample HAPI page for display a blog page. You can replace the blog page by setting the marketing keyword to blog_view.
<div class="pv-tier" data-pv-snippet="container">
<div class="pv-wrapper" data-pv-component="content" data-pv-snippet="row" data-pv-type="page">
<div class="pv-grid-col pv-grid-col_12of12" data-pv-snippet="column">
<div>
<section class="image-left_text-right ui-update">
<img class="blogimage" src="{@page_photo@}">
<div class="text-container">
<h2 data-pv-element="page_title">blog title...</h2>
<p data-pv-element="text_preview">preview text...</p>
</div>
</section>
<section>
<div class="wrapper">
{@page_content@}
</div>
</section>
</div>
<section class="heading_3-card-rotator">
<header>
<h2>Additional Help Tutorials</h2>
<p>Find more ways to grow on PeopleVine.</p>
</header>
<div class="slider">
<div class="card" data-pv-component="content" data-pv-parameters="{page_type:'blog',returnTotal:'15',category_no:{@category_no@}, sortby: 'posted_on', includeSubCategories: true, includeParentCategory: true}" data-pv-type="list">
<a href="/blog/{@page_no@}"><img alt="" onerror="imgError(this, 'https://peoplevine.blob.core.windows.net/files/72/72b2578894-b02b-41d3-b641-83ecaa518cbb.png');" src="{@page_photo@}"></a>
<div class="tags">
<ul class="">
<li>
<a href="/blog?category_no={@category_no@}">{@category_name@}</a>
</li>
</ul>
</div><a href="/blog/{@page_no@}">
<h4 class="title" data-pv-element="page_title">Blog Title</h4></a>
<p data-pv-element="text_preview">text...</p>
<h6 class="j-date">Posted <span data-pv-element="posted_on" data-pv-formatter="date(MMMM d, yyyy)">Month 00, 0000</span></h6>
</div>
</div><!--Slider Stuff-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js" type="text/javascript">
</script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet" type="text/css">
<link href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
$('section.heading_3-card-rotator > .slider').slick({
slidesToShow: 4,
slidesToScroll: 4,
dots: true,
autoplay: true,
autoplaySpeed: 5000,
arrows: false,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},{
breakpoint: 900,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
</script>
<div class="ui-update">
<div class="vr vr_centered vr_x6">
<ul class="hList">
<li>
<a class="btn" href="/blog">View Recent Articles</a>
</li>
<li data-pv-component="text" data-pv-conditional="{@category_no@} > 0">
<a class="btn" href="/blog?category_no={@category_no@}">View Other Articles in {@category_name@}</a>
</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
This will show you the blog post followed by additional posts in the same or similar category.