Help Customizing index.hbs

Developer help
1

I want to take the following snippet from the casper theme index.hbs:

{{!-- The main content area --}}

<div class="post-feed">
    {{#foreach posts}}
        {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
        {{> "post-card"}}
    {{/foreach}}
</div>

…and modify my approach in index.hbs so that I have the inner post-feed and #foreach loop multiple times doing the following.

I want the first “loop” to loop through x number of posts for a specific tag only. So show the most recent 6 posts tagged as “Personal Growth”. Ideally the inner loop calls a specific partial for this loop so that I can tweak that partial for any specific display I want for this set of posts.

I want a second “loop” to loop through y number of posts for all tags other than “Personal Growth” and ideally call a different partial so that I can control these posts display differently than in the first loop.

So basically highlight x number of posts for a certain tag first on the home page, then follow that up with y number of all other posts.

The current casper theme just shows all posts in order. I like the display look but need to break it up and also limit the number of displayed posts on the home page.

I use tag hbs files in the site navigation to display all posts for a certain tag.

Can someone post some code snippets to help me get started?!

THANK YOU

2

I’d have a look at headline. It does basically what you’re describing! Steal some ideas from there. :)

1 Like
3

Yes great idea. I took a look and it pretty much got me going.
I took this general approach and it seems to be working so far:

    {{#get "posts" include="tags" filter="primary_tag:personal-growth" limit="9"}}

Then for everything else:

    {{#get "posts" include="tags" filter="primary_tag:-personal-growth" limit="9"}}

Thanks for the tip!

1 Like