Next / previous posts following tag?
Would it be possible to use your next / previous templating on posts to only show the next or previous post for a specific tag?
Blot doesn't have an elegant way to do this right now, however you can accomplish this in an extremely inelegant way using the following technique:
- Generate a hidden list of every post on your site with the specific tag, e.g. 'Apple':
<div id="posts-tagged-apple" style="display:none">
{{#all_entries}}
{{#tagged.apple}}
<a href="{{{url}}}">{{title}}</a>
{{/tagged.apple}}
{{/all_entries}}
</div>
- Create the containers into which we will later append the next and previous links for the tag 'Apple':
<div id="next-with-tag"></div>
<div id="previous-with-tag"></div>
- Write some JS to determine which post is next and which post is previous in the list of posts above, then move them to the containers we created in Step 2:
<script type="text/javascript">
var next;
var previous;
var links = document.querySelectorAll('#posts-tagged-apple a');
var nextContainer = document.getElementById('next-with-tag');
var previousContainer = document.getElementById('previous-with-tag');
links.forEach(function(node, index){
if (node.href !== "{{{entry.url}}}") return;
nextLink = links[index + 1];
previousLink = links[index - 1];
});
if (nextLink) nextContainer.append(nextLink);
if (previousLink) previousContainer.append(previous);
</script>
Please let me know if you have any questions about this or anything else. Note I haven't tested the code above so you may run into errors – I'd be happy to debug if you send me a live link to your implementation.
Answered 2 years ago · Edit answer