How do I avoid showing duplicate posts on homepage?

Themes
1

On the top, there are three pinned posts

{{! Top 3 pinned }}
<div class="h-cover home-banner u-marginAuto u-marginBottom30 u-clear">
    {{! Big left }}
    {{#get "posts" filter="tag:hash-pin1" include="tags" limit=1 as |post|}}
        {{#post}}{{> "story/story-cover" }}{{/post}}
    {{/get}}
    {{! Small right top }}
    {{#get "posts" filter="tag:hash-pin2" include="tags" limit=1 as |post|}}
        {{#post}}{{> "story/story-cover" }}{{/post}}
    {{/get}}
    {{! Small right bottom }}
    {{#get "posts" filter="tag:hash-pin3" include="tags" limit=1 as |post|}}
        {{#post}}{{> "story/story-cover" }}{{/post}}
    {{/get}}
</div>

Then there are four featured posts. Here, I filter out hash-pin# tags so that the four featured posts do not show a duplicate of the pinned posts.

{{! Show 4 featured posts in a grid }}
{{#get "posts" filter="featured:true+tag:-hash-pin1+tag:-hash-pin2+tag:-hash-pin3"
       include="tags,authors" visibility="all" limit=4}}
<div class="extreme-container home-story-grid">
    <div class="row u-marginBottom40">
        {{#foreach posts visibility="all"}}
            <div class="col col-s12 s6 m4 l3">
                {{! Story Grid - partiasl/story/story-grid.hbs }}
                {{> "story/story-grid" class='u-fontSize20'}}
            </div>
        {{/foreach}}
    </div>
</div>

Finally a list of 20 posts. This is where the problem is - I can’t figure out a way to filter out the 4 featured posts. If I filter out featured:false, it would hide all featured posts in the first 20 rather than just the 4 already listed above.

{{! Show the rest in a list }}
{{#get "posts" filter="tag:-hash-pin1+tag:-hash-pin2+tag:-hash-pin3"
       include="tags,authors" visibility="all" limit=@config.posts_per_page}}
<div class="extreme-container">
    <div class="row">
        <div class="col col-left story-feed">
            <div class="story-feed-content">
                {{#foreach posts visibility="all"}}
                    {{> "story/story-list"}}
                {{/foreach}}
            </div>
        </div>
        {{> "sidebar"}}
    </div>
</div>
{{/get}}

It’d be nice if there is an array that holds the IDs of the posts that were already displayed, which I would filter out on the bottom section.

Or is there a better way to do this? I think the pinned/featured/list is a pretty common pattern. I’m open to overhauling the current structure if there’s a BKM.

2

Hey @calvinpark,

If the 4 featured posts don’t usually get updated, you can filter by post IDs like:

{{#get "posts" filter="tag:-[hash-pin1,hash-pin2,hash-pin3]+id:-[ID1,ID2,ID3,ID4]"}}

Or if they get updated regularly, it might be a good option to use internal tags like you used for pinned posts.

3

Thanks. Is there a way to mix JavaScript with HBS? Maybe collect the IDs in a JS array then use it on get filter to exclude?