How to use Jekyll Pagination v2?

[lakshyaelite]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

🎯 Goal

Use pagination v2 to move all my posts to /blog instead of the root (/)

Operations you have already tried

📄 home.html

---
layout: default
refactor: true
---

{% include lang.html %}

{% assign all_pinned = site.posts | where: 'pin', 'true' %}
{% assign all_normal = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}

{% assign posts = '' | split: '' %}

<!-- Get pinned posts on current page -->

{% assign visible_start = paginator.page | minus: 1 | times: paginator.per_page %}
{% assign visible_end = visible_start | plus: paginator.per_page %}

{% if all_pinned.size > visible_start %}
  {% if all_pinned.size > visible_end %}
    {% assign pinned_size = paginator.per_page %}
  {% else %}
    {% assign pinned_size = all_pinned.size | minus: visible_start %}
  {% endif %}

  {% for i in (visible_start..all_pinned.size) limit: pinned_size %}
    {% assign posts = posts | push: all_pinned[i] %}
  {% endfor %}
{% else %}
  {% assign pinned_size = 0 %}
{% endif %}

<!-- Get normal posts on current page -->

{% assign normal_size = paginator.posts | size | minus: pinned_size %}

{% if normal_size > 0 %}
  {% if pinned_size > 0 %}
    {% assign normal_start = 0 %}
  {% else %}
    {% assign normal_start = visible_start | minus: all_pinned.size %}
  {% endif %}

  {% assign normal_end = normal_start | plus: normal_size | minus: 1 %}

  {% for i in (normal_start..normal_end) %}
    {% assign posts = posts | push: all_normal[i] %}
  {% endfor %}
{% endif %}

<div id="post-list" class="flex-grow-1 px-xl-1">
  <p style="color: red;">DEBUG: {{ posts | size }} posts selected</p>
  {% for post in posts %}
    <article class="card-wrapper card">
      <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
        {% assign card_body_col = '12' %}

        {% if post.image %}
          {% assign src = post.image.path | default: post.image %}
          {% capture src %}{% include media-url.html src=src subpath=post.media_subpath %}{% endcapture %}
          {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
          {% assign lqip = null %}
          {% if post.image.lqip %}
            {% capture lqip_url %}{% include media-url.html src=post.image.lqip subpath=post.media_subpath %}{% endcapture %}
            {% assign lqip = 'lqip="' | append: lqip_url | append: '"' %}
          {% endif %}
          <div class="col-md-5">
            <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
          </div>
          {% assign card_body_col = '7' %}
        {% endif %}

        <div class="col-md-{{ card_body_col }}">
          <div class="card-body d-flex flex-column">
            <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
            <div class="card-text content mt-0 mb-3">
              <p>{% include post-description.html %}</p>
            </div>
            <div class="post-meta flex-grow-1 d-flex align-items-end">
              <div class="me-auto">
                <i class="far fa-calendar fa-fw me-1"></i>
                {% include datetime.html date=post.date lang=lang %}
                {% if post.categories.size > 0 %}
                  <i class="far fa-folder-open fa-fw me-1"></i>
                  <span class="categories">
                    {% for category in post.categories %}
                      {{ category }}{% unless forloop.last %},{% endunless %}
                    {% endfor %}
                  </span>
                {% endif %}
              </div>
              {% if post.pin %}
                <div class="pin ms-1">
                  <i class="fas fa-thumbtack fa-fw"></i>
                  <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </a>
    </article>
  {% endfor %}
</div>

{% if paginator.total_pages > 1 %}
  {% include post-paginator.html %}
{% endif %}

Anything else?

📋 Log during bundle exec jekyll serve

vscode ➜ /workspaces/lakshyaelite.github.io (main) $ bundle exec jekyll serve
Configuration file: /workspaces/lakshyaelite.github.io/_config.yml
            Source: /workspaces/lakshyaelite.github.io
       Destination: /workspaces/lakshyaelite.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
         AutoPages: Disabled/Not configured in site.config.
        Pagination: Is enabled, but I couldn't find any pagination page. Skipping pagination. Pages must have 'pagination: enabled: true' in their front-matter for pagination to work.
        Pagination: Complete, processed pagination page(s)
                    done in 1.244 seconds.
 Auto-regeneration: enabled for '/workspaces/lakshyaelite.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

[SoumyaK4]

I tried to use pagination v2 before, doesn't quite work with chirpy or I'm dumb.
I did it in a different way.
Check https://github.com/SoumyaK4/SoumyaK4

[lakshyaelite]

ChatGPT and I have successfully found a way to use pagination v2.

Add this to the Gemfile:

gem 'jekyll-paginate-v2'

Add this to the _config.yml:

plugins:
  # Your other plugins
  - jekyll-paginate-v2

whitelist:
  - jekyll-paginate-v2

pagination:
  enabled: true
  per_page: 5
  permalink: /page:num/
  title: ':title - page :num'
  sort_field: 'date'
  sort_reverse: true
  indexpage: 'index'
  trail:
    before: 2
    after: 2

Remove/Comment this line in _config.yml:

paginate: 6

Replace _layouts/home.html with this:

---
layout: default
title: Home
permalink: /
pagination:
  enabled: true
---

{% include lang.html %}

{% assign pinned_posts = site.posts | where: "pin", true %}
{% assign normal_posts = paginator.posts | where_exp: "post", "post.pin != true and post.hidden != true" %}

<div id="post-list" class="flex-grow-1 px-xl-1">

  {% if paginator.page == 1 %}
    {% for post in pinned_posts %}
      <article class="card-wrapper card">
        <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
          {% assign card_body_col = '12' %}
          {% if post.image %}
            {% assign src = post.image.path | default: post.image %}
            {% capture src %}{% include media-url.html src=src subpath=post.media_subpath %}{% endcapture %}
            {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
            {% assign lqip = null %}
            {% if post.image.lqip %}
              {% capture lqip_url %}{% include media-url.html src=post.image.lqip subpath=post.media_subpath %}{% endcapture %}
              {% assign lqip = 'lqip="' | append: lqip_url | append: '"' %}
            {% endif %}
            <div class="col-md-5">
              <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
            </div>
            {% assign card_body_col = '7' %}
          {% endif %}

          <div class="col-md-{{ card_body_col }}">
            <div class="card-body d-flex flex-column">
              <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
              <div class="card-text content mt-0 mb-3">
                <p>{% include post-description.html %}</p>
              </div>
              <div class="post-meta flex-grow-1 d-flex align-items-end">
                <div class="me-auto">
                  <i class="far fa-calendar fa-fw me-1"></i>
                  {% include datetime.html date=post.date lang=lang %}
                  {% if post.categories.size > 0 %}
                    <i class="far fa-folder-open fa-fw me-1"></i>
                    <span class="categories">
                      {% for category in post.categories %}
                        {{ category }}{% unless forloop.last %}, {% endunless %}
                      {% endfor %}
                    </span>
                  {% endif %}
                </div>
                {% if post.pin %}
                  <div class="pin ms-1">
                    <i class="fas fa-thumbtack fa-fw"></i>
                    <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        </a>
      </article>
    {% endfor %}
  {% endif %}

  {% for post in normal_posts %}
    <article class="card-wrapper card">
      <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
        {% assign card_body_col = '12' %}
        {% if post.image %}
          {% assign src = post.image.path | default: post.image %}
          {% capture src %}{% include media-url.html src=src subpath=post.media_subpath %}{% endcapture %}
          {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
          {% assign lqip = null %}
          {% if post.image.lqip %}
            {% capture lqip_url %}{% include media-url.html src=post.image.lqip subpath=post.media_subpath %}{% endcapture %}
            {% assign lqip = 'lqip="' | append: lqip_url | append: '"' %}
          {% endif %}
          <div class="col-md-5">
            <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
          </div>
          {% assign card_body_col = '7' %}
        {% endif %}

        <div class="col-md-{{ card_body_col }}">
          <div class="card-body d-flex flex-column">
            <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
            <div class="card-text content mt-0 mb-3">
              <p>{% include post-description.html %}</p>
            </div>
            <div class="post-meta flex-grow-1 d-flex align-items-end">
              <div class="me-auto">
                <i class="far fa-calendar fa-fw me-1"></i>
                {% include datetime.html date=post.date lang=lang %}
                {% if post.categories.size > 0 %}
                  <i class="far fa-folder-open fa-fw me-1"></i>
                  <span class="categories">
                    {% for category in post.categories %}
                      {{ category }}{% unless forloop.last %}, {% endunless %}
                    {% endfor %}
                  </span>
                {% endif %}
              </div>
              {% if post.pin %}
                <div class="pin ms-1">
                  <i class="fas fa-thumbtack fa-fw"></i>
                  <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </a>
    </article>
  {% endfor %}
</div>

{% if paginator.total_pages > 1 %}
  {% include post-paginator.html %}
{% endif %}

Replace index.html in the root directory with this:

---
layout: home
title: Home
permalink: /
pagination:
  enabled: true
---

Run these commands afterwards:

bundle install
bundle exec jekyll clean
bundle exec jekyll serve