Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Example of blog index pagination

See original GitHub issue

Hi we are having a huge amount of blogs to list on our website and we want to implement pagination for the index page, Are there any best practices for Elderjs. What direction should I take, is there any plugin that could be used for this. We want a total of 20 blogs to be shown on 1 page and assuming we have more than 200 blogs that would need 10 different pages. Ideally, the route should look like <domain>/blog/ to <domain>/blog/10.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

noxaschcommented, Jun 3, 2021

This is my workaround to get blog pagination which is kinda hacky, it will generate blog as the first page blog/2 as the second page and so on.

also i publish this as a elderjs plugin elderjs-plugin-blog-pagination to reduce code you need to copy.

module.exports = {
  template: 'Blog.svelte',
  permalink: ({ request }) => {
    if (request.slug.includes('blog'))
      return `${request.slug}`;
    return `/blog/${request.slug}/`;
  all: async (request) => {
    const postPerPage = 5;
    let pages = Math.floor( / postPerPage);
    let remainder = % postPerPage;
    let slugList = [];
    if (remainder > 0) pages += 1;
    if (pages > 1) {
      for (let i = 0; i < pages; i++) {
        if (i === 0) slugList.push({ 
          slug: 'blog', 
          postStart: 0, 
          postEnd: postPerPage, 
          lastPage: pages,
          hasPrevious: false,
          hasNext: true,
          nextPage: { slug: `blog/${i + 2}`},
          template: 'BlogIndex' });
        else slugList.push({ 
          slug: `blog/${i + 1}`,
          page: i + 1, 
          postStart: i * postPerPage, 
          postEnd: (i * postPerPage) + postPerPage,
          isLastPage: i === pages - 1,
          hasPrevious: true,
          previousPage: { slug: `blog/${(i - 1 === 0) ? '' : i}`,  },
          hasNext: i !== pages - 1,
          nextPage: { slug: `blog/${(i + 1 === pages) ? '' : i + 2}`},
          template: 'BlogIndex' 
    } else {
        slug: 'blog',
        postStart: 0,
        postEnd: postPerPage,
        isLastPage: true,
        hasPrevious: false,
        hasNext: false,
        template: 'BlogIndex'
    return slugList;
  data: {},

And in my BlogIndex.svelte

  import Pagination from '../../components/Pagination.svelte';
  export let data, request, helpers;
  let blogPost =, request.postEnd);

<Pagination {request} {helpers} />

And for Pagination.svelte

  export let request, helpers;

<div class="pagination">
    {#if request.hasPrevious }
      <a href="{}" class="prev">&lsaquo;</a>
    Page {#if === undefined} 1 {:else} {parseInt(} {/if} / {request.lastPage}
    {#if request.hasNext}
      <a href="{}" class="next">&rsaquo;</a>
apop880commented, Apr 29, 2021

Stepping back a level, your all object is going to need to go through the count of blog posts and generate a request for each page. Basically, you’d return something like:

[{slug: 'blog', page: 0}, {slug: 'blog', page: 1}, ...]

Then, your permalink function would generate a link for each route:

if(page === 0) {
   return `/${request.slug}/`;
else {
   return `${request.slug}/${}/`;

This will give you /blog/, /blog/1/, /blog/2/, etc. Then, your data section would slice the array of posts based on the page passed in from the request.

Hopefully this helps you get started, I know it’s pretty high level. I’m working on something similar for my own website, including tag and month archives with their own pagination. I’m planning to put together a more detailed writeup when it’s done.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add pagination to blog posts index - UsableWP
Now, if you go to the “Blog” page in the browser, the blog posts index shows only 3 posts out of 8 posts...
Read more >
WordPress Pagination: How to Add Pagination Manually or ...
WordPress pagination is the process of splitting the list of your website's blog posts or other content into separate pages.
Read more >
Pagination | Jekyll • Simple, blog-aware, static sites
If a site has 12 posts and specifies paginate: 5 , Jekyll will write blog/index.html with the first 5 posts, blog/page2/index.html with the...
Read more >
Pagination Best Practices for Google | Documentation
Learn best practices for indexing your ecommerce site when using pagination and incremental page loading and how this can impact Google Search.
Read more >
SEO-Friendly Pagination: A Complete Best Practices Guide
In this guide, learn how pagination can hurt SEO, the pros and cons of pagination handling options, and how to track KPIs.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found