如何对Jekyll中高度过滤的ICO代币集合进行分页？

Got it, let's walk through how to add pagination to your filtered ICO token lists. Since you're working with a Jekyll collection (coins) and custom filters (featured status + date-based state), we'll use a combination of custom Liquid logic and a reliable pagination plugin (the default Jekyll paginator only works for posts, so we'll go with jekyll-paginate-v2).

Step 1: Set Up the Pagination Plugin #

First, get the plugin installed—it’s the best tool for handling pagination with collections and custom filtered results:

1. Add this line to your Gemfile:

   gem 'jekyll-paginate-v2'
   

2. Run bundle install to install the plugin locally.
3. Enable it in your _config.yml:

   plugins:
     - jekyll-paginate-v2
   

Step 2: Custom Filter + Pagination Logic for Each Status Page #

For each of your pages (upcomingico.html, activeico.html, endedico.html), you’ll first filter the tokens to match the page’s status, then slice those results into paginated groups. Here’s a complete example for your Upcoming ICOs page:

---
layout: default
title: Upcoming Featured ICOs
---

{% comment %} 1. Filter tokens: Featured + Upcoming (date is in the future) {% endcomment %}
{% assign now = site.time | date: '%s' %}
{% assign filtered_coins = site.coins | where: 'ico.featured', true %}
{% assign filtered_coins = filtered_coins | where_exp: 'coin', 'coin.ico.date | date: "%s" > now' %}
{% assign filtered_coins = filtered_coins | sort: 'ico.date' %}

{% comment %} 2. Pagination setup {% endcomment %}
{% assign per_page = 6 %} <!-- Adjust this to your preferred items per page -->
{% assign total_items = filtered_coins.size %}
{% assign total_pages = total_items | divided_by: per_page | ceil %}
{% assign current_page = page.url | split: '/' | last | plus: 0 | default: 1 %}
{% assign start_index = (current_page | minus: 1) | times: per_page %}
{% assign end_index = start_index | plus: per_page %}
{% assign paginated_coins = filtered_coins | slice: start_index, per_page %}

{% comment %} 3. Render the token cards {% endcomment %}
<h1>Upcoming Featured ICOs</h1>
<div class="token-grid">
  {% for coin in paginated_coins %}
    <div class="token-card">
      <h3>{{ coin.title }}</h3>
      <p>Launch Date: {{ coin.ico.date | date: '%B %d, %Y' }}</p>
      <!-- Add other token details here (logo, description, etc.) -->
    </div>
  {% empty %}
    <p>No upcoming featured ICOs at the moment.</p>
  {% endfor %}
</div>

{% comment %} 4. Render pagination navigation {% endcomment %}
{% if total_pages > 1 %}
<div class="pagination-nav">
  {% if current_page > 1 %}
    <a href="{{ site.baseurl }}/upcomingico/{{ current_page | minus: 1 }}/" class="pagination-link">Previous</a>
  {% endif %}

  {% for page_num in (1..total_pages) %}
    {% if page_num == current_page %}
      <span class="pagination-current">{{ page_num }}</span>
    {% else %}
      <a href="{{ site.baseurl }}/upcomingico/{{ page_num }}/" class="pagination-link">{{ page_num }}</a>
    {% endif %}
  {% endfor %}

  {% if current_page < total_pages %}
    <a href="{{ site.baseurl }}/upcomingico/{{ current_page | plus: 1 }}/" class="pagination-link">Next</a>
  {% endif %}
</div>
{% endif %}

Adjust for Other Status Pages #

• Active ICOs: Modify the filter to target tokens where the ICO is currently running:

  {% assign filtered_coins = filtered_coins | where_exp: 'coin', 'coin.ico.start_date | date: "%s" < now and coin.ico.end_date | date: "%s" > now' %}
  

• Ended ICOs: Filter for tokens where the ICO has concluded:

  {% assign filtered_coins = filtered_coins | where_exp: 'coin', 'coin.ico.end_date | date: "%s" < now' %}
  

Key Notes #

• Date Comparison: We convert dates to Unix timestamps (%s) to make accurate comparisons between the current time and your ICO dates.
• Pagination URLs: The code assumes your pagination pages will live at URLs like /upcomingico/2/—adjust the href values if you want a different structure.
• Styling: Add CSS to the .pagination-nav, .pagination-link, and .pagination-current classes to match your site’s design.
• Edge Cases: The {% empty %} block handles scenarios where there are no tokens to display, so your page won’t look incomplete.

This setup integrates smoothly with your existing filtered collections and gives you full control over how tokens are paginated across your status pages.

内容的提问来源于stack exchange，提问作者alwingeorge