Filtering Post Navigation ( {{nextPost}} and {{previousPost}} ) by tag

Hi,

I afraid that at this moment preparing such feature will be quite complicated. In fact you should prepare a custom helper (https://getpublii.com/dev/tags/custom-helpers/) which uses @website.contentStructure.posts (https://getpublii.com/dev/website-global-variable/) to meet your conditions for every post. It is in my opinion possible but can be complicated to implement.

Interesting feature request 🙂 I have taken the fridom to make a helper that does this, if it only has one tag. This helper will get the next and previous post for all of the tags to that post.

module.exports = function (Handlebars) {
 		return {

  // Helper that findes the next and previous post for each tag.
  nextPreviousPostByTag: function(thisPost, allTagsWithPosts) {
    
    let nextPosts = [];
    let previousPosts = [];
    
    // going through all the tags
    for (tagIndex in thisPost.tags) {
    
      // All the post to that tag.
      let tagPosts = allTagsWithPosts.find(tag => tag.id == thisPost.tags[tagIndex].id);
      // This post are number X in that tag-post list.
      thisPostIndex = tagPosts.posts.findIndex(post => post.id == thisPost.id);
      
      // Find post by index and put in array.
      function GetPost(postIndex, postArray) {
        
        let postAllreadyFound = postArray.find(post => post.id == 
                tagPosts.posts[postIndex].id);
        if (postAllreadyFound) {
          // If post already are added because it was found through a diffrent tag.
          postAllreadyFound['tags'].push(tagPosts.name);
        } else {
        
          let post = {};
          post['id'] = tagPosts.posts[postIndex].id;
          post['title'] = tagPosts.posts[postIndex].title;
          post['url'] = tagPosts.posts[postIndex].url;
          post['tags'] = [];
          post['tags'].push(tagPosts.name);
          
          postArray.push(post);
          
        }
      }
      
      // If this post is not first post with that tag, find next.
      if (thisPostIndex > 0) {
      
        GetPost(thisPostIndex - 1, nextPosts);
        
      }
      
      // If this post is not last post with that tag, find previous. 
      if (thisPostIndex < tagPosts.posts.length - 1) {
      
        GetPost(thisPostIndex + 1, previousPosts);

      }
    }
        
    let output = [];
    output.push(nextPosts);
    output.push(previousPosts);
      
    return output;
  }	
 		};
 };
 		


//////////////////////////////////////////////////////////////////////////////

////////// In post.hbs:

  <nav style="display: flex; justify-content: space-between; align-items: flex-start">
    {{#each (nextPreviousPostByTag this @website.contentStructure.tags)}}
      
{{#each this}}
    
        

          {{title}} <br> 
          {{#each tags}}{{this}} {{/each}}
        
        
      {{/each}}
    {{/each}}
  </nav>


////// in config.json

"renderer": {
           ...
           "includeHandlebarsInHelpers": true,

Hi.

The last question first:

If you only want to filter on a specific tag you have to change line 11 (or line 8, if you have the same bug in the code viewer as me sometimes).

That will be from:
for(tagIndex in thisPost.tags) {  

to:
for(tagIndex in [{'id':1}]) {"

Where the id number is the tag id you find in the list of tags inside of publii.

You can also just remove the for loop, and then change the next line.

.find(tag => tag.id == thisPost.tags[tagIndex].id);

to:
.find(tag => tag.id == 1);

or maybe better:
.find(tag => tag.name == 'icecream');

First question:

The code lives in the ‘helpers.js’ file, that you probably have to create. And it is located in the root folder together with ‘index.hbs’.

Update to the code:

I have made a small change in the output of the helper, so it becomes easier for me to place the content.

{{#each (nextPreviousPostByTag this @website.contentStructure.tags) }}
  
  {{#if notEmpty}}
  
    <nav style="display: flex; justify-content: space-between; width: 100%;">
    
    <ul style="flex-grow: 1; text-align: left; list-style-type: none; padding: 0;">
      {{#each next}}