How to add pagination support within blog posts?

Hey!
Is there a way to add support for blog post pagination? For lists (of category posts etc.), pagination is working fine, but I also need it for the blog posts themselves.
Example url to support: /2020/02/02/my-blog-post/2.
I guess I have to adapt the handlers somehow, but maybe you can give me a hint how I can do this in a smart way.
Thank you really much

Hi!

Are you using the Page Break Gutenberg block to paginate your posts? If not, how are you doing it?

I’ve been taking a look at the Gutenberg Page Break and the problem is that it doesn’t seem to support the REST API. As far as I saw, it just add and empty <p></p> in the content, there is no other way of knowing the breaks inside the post, so handlers wouldn’t work in this case.

If you are using a different solution the approach could be different, and if you explain us the case in a more detailed way your case, why you need to paginate the posts, maybe we can find another solution.

Thank you, @SantosGuillamot! Yes, I’m using the block, but after checking wp-json, I found out that the break is represented as
<!--nextpage-->
in the content. My problem is that I have a couple of long posts containing two or three pages. I would like to have them splitted with frontity as well but could live without it when it’s to much effort to implement. I would just need to care about handling old SEO links having the page number etc.

But maybe you have an idea how to react on the <!--nextpage--> comment? Thanks a lot!

You are totally right! I tested it in a site where another plugin was deleting the comments of the content in the REST API so I didn’t see it. Sorry for that.

However, I’m not sure how to deal with the split of the content to be honest. Everything is included in the same endpoint and the only info about the pagination are that comments. It seems complex to solve right now.

I’ve opened a feature topic, where you can upvote if you are interested, share any feedback and join the conversation. Knowing what users need really help us in order to prioritize the next features :slightly_smiling_face:.

Regarding the SEO impact, and how to deal with it, of having the whole post in the same url instead of splitting it in 2 or 3 pages, I’m sure @christianoliveira will help you better than me.

Thanks @SantosGuillamot !

Hi @cobra ! I don’t know the specifics of your current setup, but from what I understand it seems like you have a current “normal” wordpress installation where you have some posts splitted in 2/3 pages, and you are migrating to Frontity (using the same domain) where you will not have those posts splitted. In that case, you need to implement redirects in the Frontity server so the URLs of the previous “pages” are 301 redirected to the main URL of the post.

So, if you had:

https://www.domain.com/2020/02/02/my-blog-post/
https://www.domain.com/2020/02/02/my-blog-post/2
https://www.domain.com/2020/02/02/my-blog-post/3

The /2 and /3 URLs will return a 404 page in Frontity, so you will need to implement the following 301s:

Depending on how many cases like this you have, you can do it one by one or you could try to define a rule to redirect all of them.

You should also change any internal link pointing to those pages so they point to the main URL of the post; it’s not essential, but leaving internal links pointing to 301 redirects is sub-optimal.

Let me know if you have any doubts

3 Likes

Thank you @christianoliveira, this helps me a lot! Just one question: I think I need to support those redirects, even when my new frontend with frontity is in place, so I somehow have to handle them in frontity itself. Where can I define them? Do I need a separate handler for them with the specific /number regex rule (think this is the only possibility?) Thanks!

Hi, @cobra! :wink:

So if you are deploying your site in now.sh you can use routes rules in your now.json file. Some like:

 {
  "version": 2,
  },
  "builds": [
    {
      "src": "package.json",
      "use": "@frontity/now"
    }
  ],
  "routes": [
    {
      "src": "/your-old-page",
      "status": 308,
      "headers": { "Location": "/your-new-page/" }
    }
  ]
}

Hope it will help you! :wink:

@cobra we haven’t finished the server extensibility yet but it’s high on our roadmap. Until that’s finished, you’d have to use redirections from your hosting like @christian.nascimento said. Which hosting are you using?

I think I’ll host with now.sh, but would like to be flexible with that as I currently have my own server. Do you have an idea how I could achieve the redirects in that case? I know it would be very hacky, but would that mean I have to implement the redirects on an upper level where I create the frontity server?

I’m not a JS nor regex expert, but could that be a solution unless redirects in frontity are possible?

var frontity = require("./build/server").default;
var http = require("http");

var server = http.createServer((req, res) => {
    //regex to match urls like (2020/02/02/my-article/2)
    const regex = /(.*\d+\/\d+\/\d+\/[a-z0-9]+(?:-[a-z0-9]+)*\/)(.*(\d+))$/;
    //hacky way to have 301 redirect.. (currently only for dev experiments ;))
    const match = req.url.match(regex);
    if (match) {
        res.writeHead(301, { Location: req.url.replace(regex, '$1') });
    }
});
server.on('request', frontity);

Not hacky at all, I think it’s a great idea :slight_smile:

You actually wrap the Frontity server in an Express or Koa app if you want. The server.js file exports a simple “req/res” function.