Example on how to achieve pagination

[ajmalafif]

I have tried searching through the docs and github issues and apply them all, and none of it working for me.

I think I am missing something substantial here. I'll looking to apply this kind of pagination for my blogpost:

image credit to: https://dribbble.com/shots/2351417-What-s-your-fav-pagination/attachments/449743

I am using this boilerplate as my starting point: https://github.com/danurbanowicz/eleventy-netlify-boilerplate

My suspicion is I can't use - post as my tag since it's already been used? I plan to write a tutorial for this for non-technical users of 11ty (I am a designer) after I figure this out because it's way too painful to do this with 11ty.

[zachleat]

Can you include your pagination template code here and I help specifically with your problem?

[ajmalafif]

Hi @zachleat!

I was trying out myself but i couldn't make it work so I removed it. Here's the code and the page:

code: https://github.com/ajmalafif/ajmalafif.design/blob/master/_includes/layouts/blog.njk page: http://ajmal.netlify.com/blog

So I haven't import all contents from https://blog.ajmalafif.com but the idea is to paginate the blog page to have 5 posts per page.

I was just approaching it through trial-and-error but couldn't figure out myself.

[Vassi]

The pagination docs offer an example that might apply here:

---
title: My Posts
pagination:
  data: collections.post
  size: 6
  alias: posts
---

<ol>
{% for post in posts %}
  <li><a href="{{ post.url | url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ol>

Using the new 0.6.0 features in pagination you should be able to do your paging sample too:

{
  items: [], // current page’s chunk of data
  pageNumber: 0, // current page number, 0 indexed

  // Cool URLs, added in v0.6.0
  nextPageHref: "…", // put inside <a href="">Next Page</a>
  previousPageHref: "…", // put inside <a href="">Previous Page</a>
  firstPageHref: "…",
  lastPageHref: "…", 
  hrefs: [], // all page hrefs (in order)

  // Uncool URLs (these include index.html file names)
  nextPageLink: "…", // put inside <a href="">Next Page</a>
  previousPageLink: "…", // put inside <a href="">Previous Page</a>
  firstPageLink: "…", // added in v0.6.0
  lastPageLink: "…", // added in v0.6.0
  links: [], // all page links (in order)
  pageLinks: [], // deprecated alias to `links`

  data: …, // pointer to dataset
  size: 1, // chunk sizes
}

Specifically using a combination of the page number and the hrefs array / firstPageLink lastPagelink etc.

[ajmalafif]

Hi @Vassi, appreciate the help! I did give above a try but it doesn't work. Maybe I apply it wrongly.

I am guessing this code here goes to blog.njk:

---
title: My Posts
pagination:
  data: collections.post
  size: 6
  alias: posts
---

<ol>
{% for post in posts %}
  <li><a href="{{ post.url | url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ol>

But where do I put this code tho?

{
  items: [], // current page’s chunk of data
  pageNumber: 0, // current page number, 0 indexed

  // Cool URLs, added in v0.6.0
  nextPageHref: "…", // put inside <a href="">Next Page</a>
  previousPageHref: "…", // put inside <a href="">Previous Page</a>
  firstPageHref: "…",
  lastPageHref: "…", 
  hrefs: [], // all page hrefs (in order)

  // Uncool URLs (these include index.html file names)
  nextPageLink: "…", // put inside <a href="">Next Page</a>
  previousPageLink: "…", // put inside <a href="">Previous Page</a>
  firstPageLink: "…", // added in v0.6.0
  lastPageLink: "…", // added in v0.6.0
  links: [], // all page links (in order)
  pageLinks: [], // deprecated alias to `links`

  data: …, // pointer to dataset
  size: 1, // chunk sizes
}

Thanks again!

[Vassi]

The second bit is what's inside the pagination variable.

So today you have this in your layout:

---
layout: layouts/base.njk
section: blog
---
<section class="w-100 mt4 mt5-ns">
  <article class="mt6 wrap dt bb b--light-gray">
    <div class="fl w-100 w-50-ns tc tl-ns pb0 pb4-ns">
      <h1 class="mb1 mt0">Blog</h1>
      <p class="moon-gray mt0">Personal learnings & thoughts</p>
    </div>
    <div class="fl w-100 w-50-ns ph4 ph0-ns lh-copy">
      <p>I enjoy writing down and reflect on my experience. My goal is to write more about design, frontend and anything in between.</p>
    </div>
  </article>
</section>

{{ layoutContent | safe }}

{% set postslist = collections.posts %}
{% include "components/postslist.njk" %}

I would move the last two lines to your blog.md page (since it uses your layout)

and maybe try:

---
layout: layouts/blog.njk
title: Blog | @ajmalafif
tags:
  - nav
navtitle: Blog
date: 2017-01-01
pagination:
  data: collections.posts
  size: 6
  alias: postslist
---

{% include "components/postslist.njk" %}

I omitted the set because the alias should already be creating the postslist variable your component wants

disclaimer: I don't have the ability to test this right now, just trying to help!

[ajmalafif]

Hi @Vassi,

Thanks for the suggestion, but it still doesn't work. No worries though, I think maybe Eleventy actually don't support this because I actually never see any paginations on other eleventy's website.

We'll figure this out next year! Happy holidays and thanks so much for the suggestion!

[ajmalafif]

I just realized there's no code for something like < Prev | 1 | 2 | 3 | Next > so maybe what I am thinking is actually not available on eleventy.

[freshyill]

This is not a good resolution. I'm starting a new issue.

[ajmalafif]

@freshyill hey i reopen the issue and somehow, I just tweeted about this and Eleventy's twitter replied as well: https://twitter.com/ajmalafif/status/1107657182621777926

[zachleat]

Howdy y’all, I made a dedicated documentation page just for this, please have a look! https://www.11ty.dev/docs/pagination/nav/

(link edited)

[distinctperspective]

Howdy y’all, I made a dedicated documentation page just for this, please have a look! https://www.11ty.io/docs/pagination-nav

this link is bad. NOT FOUND! We couldn’t find the content you were looking for.

[Ryuno-Ki]

That's because it moved to https://www.11ty.io/docs/pagination/nav/ by now. @zachleat Cool URI's don't change ;-) Perhaps you could add a 301 redirect? If not, hack your way [to it using <meta http-equiv="refresh" content="0;url=https://www.11ty.io/docs/pagination/nav/" /> like in the old days

[clockshark]

how to get get the total number of pages??

[zachleat]

@clockshark in upcoming v0.10.0 you can use pagination.pages.length