Eleventy: How do we paginate categories.

Created on 26 Nov 2019  Â·  4Comments  Â·  Source: 11ty/eleventy

I came up with a way to paginate my blog home but not my blog categories.
Can someone help?
This is my blog home.

layout: home
wf: "5d5340185c5ff33536794edc"
title: ClockShark.Com Blog
description: Get the latest information on how to run your field service or construction company better.
permalink: "/Blog/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
pagination:
  data: collections.blogposts
  size: 12
  alias: posts
---
{% include topbar-blog.html %}
     <div class="blog-home-cat-header">
          <div class="w-container">
               <div class="cat-header-text">Latest News</div>
          </div>
     </div>
    <div class="blog-home-items">
      <div class="w-container">
        <div class="blog-home">
            {% for post in posts %}

              <div class="blog-item">
                <div class="blog-item-top">
                  <div class="catergory-date-header">
                    <div class="catergory-header"><a href="/Blog/Category/{{ post.data.categories | first | default: "Unassigned" }}" class="category-header-link">
                        {{ post.data.categories | first | default: "Unassigned" }}
                    </a></div>
                    <div class="date-header">
                      <div class="text-block-7">{{ post.data.date | date: "%B %e, %Y" }}</div>
                    </div>
                  </div>
                  {% include image.html, image: post.data.featureimage, clip: true, height: 240, width: 380, class: "blog-item-thumb" %}
                  <div class="blog-post-title">
                    <div><a href="{{ post.data.permalink }}" class="link-2">{{ post.data.title }}</a></div>
                  </div>
                  <p class="paragraph-31">{{ post.data.excerpt | strip_html | truncatewords: 25  }}</p>
                </div>
                <div class="blog-post-readmore">
                  <div><a href="{{ post.data.permalink }}" class="read-more-link">Read more...</a></div>
                </div>
              </div>

          {% endfor %}
        </div>
        <!-- Pagination links -->
        <div class="page-selector">
          {% if pagination.previousPageHref %}
            <a href="{{ pagination.previousPageHref }}" class="page-numbers">
              Previous
            </a>
          {% else %}
            <span class="page-numbers">Previous</span>
          {% endif %}
          <span class="page-numbers ">
            Page: {{ pagination.pageNumber | plus: 1 }} of {{ pagination.items | size }}
          </span>
          {% if pagination.nextPageHref %}
            <a href="{{ pagination.nextPageHref }}" class="page-numbers">Next</a>
          {% else %}
            <span class="page-numbers">Next</span>
          {% endif %}
        </div>
      </div>
    </div>

and this is my category home

pagination:
  data: collections
  size: 1
  alias: tag
  filter:
    - all
    - nav
    - post
    - posts
    - blogposts
    - featurepages
permalink: /Blog/Category/{{ tag }}/
layout: home
renderData:
  title: "Category “{{ tag }}”"
  permalink: /Blog/Category/{{ tag }}/
---
     {% include topbar-blog.html %}
          <div class="blog-home-cat-header">
               <div class="w-container">
                    <div class="cat-header-text">{{ tag }}</div>
               </div>
          </div>
          <div class="blog-home-items">
            <div class="w-container">
              <div class="blog-home">
                  {% assign posts = collections[tag] | reverse %}
                  {% for post in posts %}

                    <div class="blog-item">
                      <div class="blog-item-top">
                        <div class="catergory-date-header">
                          <div class="catergory-header"><a href="{{ post.url }}" class="category-header-link">
                            {{ tag }}
                          </a></div>
                          <div class="date-header">
                            <div class="text-block-7">{{ post.data.date | date: "%B %e, %Y" }}</div>
                          </div>
                        </div>
                        {% include image.html, image: post.data.featureimage, clip: true, height: 240, width: 380, class: "blog-item-thumb" %}
                        <div class="blog-post-title">
                          <div><a href="{{ post.url }}" class="link-2">{{ post.data.title }}</a></div>
                        </div>
                        <p class="paragraph-31">{{ post.data.excerpt | strip_html | truncatewords: 20  }}</p>
                      </div>
                      <div class="blog-post-readmore">
                        <div><a href="{{ post.data.url }}" class="read-more-link">Read more...</a></div>
                      </div>
                    </div>

                {% endfor %}
              </div>

            </div>
          </div>
duplicate education

All 4 comments

renderData:
  title: "Category “{{ tag }}”"
  permalink: /Blog/Category/{{ tag }}/

You can have a template substitution in front matter only for permalink. Therefore, title: "Category “{{ tag }}”" can't work.

Have a look at use-data-variables-in-permalink.

You can easily put the tag inside the template:

<head>
...
<title>Category {{ tag }}</title>
...
</head> 

This is a duplicate of #776 I think?

Ah this is the double-layer pagination problem. There is a way to do this but it isn’t super friendly right now.

See the example I posted here: #332
Also upvote #461 if you’d like to see a nicer way integrated into core

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

We figured out a way to do this. We will publish a document on how to do this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jamrelian picture jamrelian  Â·  3Comments

veleek picture veleek  Â·  3Comments

zellwk picture zellwk  Â·  3Comments

michrome picture michrome  Â·  3Comments

DirtyF picture DirtyF  Â·  3Comments