How to paginate my jekyll site using Jekyll-Paginate-v2

Question

Here is the source code of the website with its index.md and config.yml.

The problem

The number of tools (.md files) in _wadcoms directory keeps increasing over time, so I want the main page to be paginated in order to better navigate among plenty of them.

I tried several blogs and followed them all step by step individually, but unfortunately, I couldn't document each one of them here, still, my Jekyll site won't render that pagination.

Just now I found out that Pagination only works within HTML files, despite the solutions and workarounds suggested in that thread, I am unable to follow it up with my website. It renders the main page from the index.md file, I am not able to convert it to index.html which would help my site paginate.

What I wanted

I wanted to have ellipses to paginated the site using Jekyll-Paginate-v2, just like in the answer thread. I am absolutely out of ideas and I have no clue how to proceed with rendering a successful pagination in this case.

NOTE: Those files under _wadcoms are individual webpages, they increase in number over time, that's why I needed pagination on the main site. Imagine 200 of these tools/commands, that would be very difficult to navigate.

Thanks for your help.

Answer 1

Following my comment above, I have tested the plugin.

The result is not a numbered pagination yet but this should be also possible. Note that I converted the paragraphs, logo, and links in the index to HTML tags (p, img and a) but this worked OK:

I have not tested the search ... I hope that this is a trace and helps a bit. You can find my complete test code I comment below in a branch/PR in your repo: https://github.com/WADComs/WADComs.github.io/pull/21

I have replaced the current code in bin_table.html with

            <!-- not sure about the reverse, the plugin offers this option, too! --> 
            {% assign sites = paginator.wadcoms | reverse %}
            {% for file in sites %}
            <tr>
                <td>
                    <div class="bin-name">
                        <div style="flex: 0 0 97%"><a href="{{ file.url }}" id="{{ file.url }}"
                                style="text-decoration: none; color: DarkGreen;">{{ file.command | escape }}</a></div>
                        <div style="flex: 1;"><a href="javascript:void(0)" onClick="copyFunction('{{ file.url }}')"><img
                                    src="/assets/copy-button.svg" alt="Copy" title="Copy" id="{{ file.url }}_img" /></a>
                        </div>
                    </div>
                    <p style="margin-top: -12px;">{% include filter_list.html bin=file %}</p>
                </td>
            </tr>
            {% endfor %}
            <a href="{{ paginator.previous_page_path }}">Previous page</a> | <a
                href="{{ paginator.next_page_path }}">Next page</a>

            {{ paginator.page }}
            {{ paginator.total_pages | inspect }}
            {% for page in paginator.total_pages %}
            {{ page }}
            {% endfor %}

I have added these lines to the _config.yml file (as an example config):

paginate:
  collection:   wadcoms
  per_page:     10              # maximum number of items per page
  limit:        false          # Maximum number of pages to paginate (false for unlimited)
  permalink:    /page:num/     # pagination path (relative to template page)
  title_suffix: " - page :num" # Append to template's page title
  category:     ''             # Paginate items in this category
  categories:   []             # Paginate items in any of these categories
  tag:          ''             # Paginate items tagged with this tag
  tags:         []             # Paginate items tagged with any of these tags
  reversed:     true          # Reverse the order of the documents