How to create a pagination

[officialrajdeepsingh]

I can't find ways to create pagination on my blog. I know about the pagination plugin, which preinstalls with lume. I must show pagination on the main or index.njk page.

// index.njk
---
layout: layouts/base.njk
menu:
   visible: true
   title: Home
   order: 0

---


 {% set postslist = search.pages("type=article", "date=desc") %}


 {% for post in postslist %}

   {% include "layouts/post.njk" %}

 {% else %}

     <h2> This would display if the 'item' collection were empty </h2>

 {% endfor %}

{# paginateation for website  #}
 {% for page in paginate( postslist , {  size: 10  }) %}

 <a href="{{page.url}}">{{ page.pagination.page }}</a>  <br/>

 <h1>{{page.url}} </h1>

 {% endfor %}

Also, the following code is not converting my pagination to pages/1 or pages/2. It is not working and shows an error.

// index.njk

{# paginate  #}

 {% for page in paginate( postslist , {  size: 10,url: (n) => `posts/page/${n}/` }) %}

 <a href="{{page.url}}">{{ page.pagination.page }}</a>  <br/>

 <h1>{{page.url}} </h1>

 {% endfor %}

The error looks like

Caused by Template render error: (/home/rajdeepsingh/working/lume-project/index.njk) [Line 16, Column 39]
  parseAggregate: expected comma after expression
    at Module._prettifyError (https://deno.land/x/nunjucks@3.2.3/src/lib.js:32:11)
    at Template.render (https://deno.land/x/nunjucks@3.2.3/src/environment.js:468:23)
    at (https://deno.land/x/lume@v1.12.1/plugins/nunjucks.ts:88:16)
    at NunjucksEngine.render (https://deno.land/x/lume@v1.12.1/plugins/nunjucks.ts:87:12)
    at Renderer.render (https://deno.land/x/lume@v1.12.1/core/renderer.ts:178:32)
    at Renderer.#renderPage (https://deno.land/x/lume@v1.12.1/core/renderer.ts:308:23)
    at (https://deno.land/x/lume@v1.12.1/core/renderer.ts:124:51)
    at concurrent (https://deno.land/x/lume@v1.12.1/core/utils.ts:162:33)
    at async Renderer.renderPages (https://deno.land/x/lume@v1.12.1/core/renderer.ts:115:7)

I create dynamic pages with tmpl.js

// pages.tmpl.js

export const layout = "layouts/base.njk";

export default function* ({ search, paginate }) {
  const posts = search.pages("type=article", "date=desc");
  const options = {
    url: (n) => `/pages/${n}/`,
    size: 10,
  };

  for (const page of paginate(posts, options)) {
    yield page;
  }
}

But I can't find the ways to join the index.njk and pages.tmpl.js for pagination.

[oscarotero]

To do that, you need to understand two concepts:

• Lume only can generate new pages dynamically using pages.tmpl.js
• The paginate plugin is only a helper to group an array of pages into groups. For example:

  // Let's say we have this array
  const pages = [Post1, Post2, Post3];
  
  // Order in groups of 2
  const pagination = paginate(pages, { size: 2 });
  
  // It returns
  [{
    url: "/page1",
    results: [Post1, Post2],
    pagination: {
      page: 1,
      totalPages: 2,
      totalResults: 3,
      previous: undefined,
      next: "/page2",
    },{
    url: "/page2",
    results: [Post3],
    pagination: {
      page: 2,
      totalPages: 2,
      totalResults: 3,
      previous: "/page1",
      next: undefined,
    },
  }];

The idea is to generate a page for each group returned by the paginate helper. Each group has the url, results and pagination values but you can add more. I guess you want the index to be the page 1, so maybe you want to assign a different layout. This is how i'd do it:

export const layout = "layouts/base.njk";

export default function* ({ search, paginate }) {
  const posts = search.pages("type=article", "date=desc");
  const options = {
    // The page 1 is the homepage, set "/" as url
    url: (n) => n === 1 ? "/" : `/pages/${n}/`,
    size: 10,
  };

  // Yield the pages, but the index needs a different layout
  for (const page of paginate(posts, options)) {
    if (page.pagination.page === 1) {
        page.layout = "layouts/index.njk"; // The first page has a different layout
    }
    yield page;
  }
}

Now you only need have two layouts, one for the home page and other for the rest. In the layouts you can iterate with the results and pagination values, containing the data of each group, in addition to any other value that you want to pass.

[officialrajdeepsingh]

I can use the second method to genrate the pagination page.

// index.tmpl.js

export const layout = "layouts/base.njk";

export default function* ({ search, paginate }) {

  const posts = search.pages("type=article", "date=desc");

  const options = {
    // The page 1 is the homepage, set "/" as url
    url: (n) => n === 1 ? "/" : `/page/${n}/`,
    size: 10,
  };

  // Yield the pages, but the index needs a different layout
  for (const page of paginate(posts, options)) {

    if (page.pagination.page === 1) {

        page.layout = "layouts/home.njk";  // the problem with home.njk, how to get my 10 posts here 

    }else{
      page.layout = "layouts/otherpages.njk";  // the problem with home.njk, how to get my 10 posts here 
    }

    yield page;
  }
}

How to retrieve my 10 posts on /,page/2,page/3 and so on. the second issue with pagination. i cant access pagination data with URL.

// layouts/home.njk

---
layout: layouts/base.njk
---

{% set postslist = search.pages("'" + page + "'") %}


 {% for post in postslist %}

    <section class="bg-white">

            <div class="container px-6 py-10 mx-auto">

                    <div class="mt-8 lg:-mx-6 lg:flex lg:items-center">

                            <img class="object-cover border-none w-full lg:mx-6 lg:w-1/2 rounded-xl h-72 lg:h-96" src="{{ post.data.image }}" alt="{{ post.data.title }}">

                           <div class="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6 ">

                                 <a href="{{ post.data.url }}" class="block mt-4 text-2xl font-semibold text-gray-800 hover:text-gray-500 dark:text-white md:text-3xl">{{ post.data.title }}</a>

                                   <p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
                                                {{ post.data.description }}
                                  </p>

                                  <a href="{{ post.data.url }}" class="inline-block mt-2 text-blue-500  hover:text-blue-300">Read more</a>

                       </div>
                    </div>
                </div>
            </section>

 {% else %}

     <h2> This would display if the 'item' collection were empty </h2>

 {% endfor %}
 
<h2> paginate </h2> 
  {% for page in paginate( postslist , {  size: 10 }) %}
 <a href="/{{page.url}}">{{ page.pagination.page }}</a>  <br/>
 {% endfor %} #

[oscarotero]

You have the results variable in the layouts, so you have to do this:

 {% for page in results %}
 <a href="/{{page.data.url}}">{{ page.data.title }}</a>  <br/>
 {% endfor %} #