Example of blog index pagination

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.

[noxasch]

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(request.data.markdown.blog.length / postPerPage);
    let remainder = request.data.markdown.blog.length % 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 {
      slugList.push({
        slug: 'blog',
        postStart: 0,
        postEnd: postPerPage,
        isLastPage: true,
        hasPrevious: false,
        hasNext: false,
        template: 'BlogIndex'
      });
    }
    return slugList;
  },
  data: {},
};

And in my BlogIndex.svelte

<script>
  import Pagination from '../../components/Pagination.svelte';
  export let data, request, helpers;
  let blogPost = data.markdown.blog.slice(request.postStart, request.postEnd);
</script>

<Pagination {request} {helpers} />

And for Pagination.svelte

<script>
  export let request, helpers;
</script>

<div class="pagination">
    {#if request.hasPrevious }
      <a href="{helpers.permalinks.blog(request.previousPage)}" class="prev">&lsaquo;</a>
    {/if}
    Page {#if request.page === undefined} 1 {:else} {parseInt(request.page)} {/if} / {request.lastPage}
    {#if request.hasNext}
      <a href="{helpers.permalinks.blog(request.nextPage)}" class="next">&rsaquo;</a>
    {/if}
</div>

[apop880]

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}/${request.page}/`;
}

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.