WordPress to Jekyll part 4 - Categories and tags

Jekyll does support categories and tags directly but doesn't support the pagination of categories and tag list pages. The Paginate-v2 gem does solve this - and also lets you tweak the URL format.

My site used the URL formats /blog/category/{category-name} and /blog/tag/{tag-name} with 4 articles per page and a little pager at the bottom offering some indication of what page you are on, and some navigation arrows like this:

The pager

In order to render this pager, a little Liquid templating is required. Here's my _includes/pagination.html that's included within my multiple-posts layout used on the home page, categories and tag results.

{% if paginator.total_pages > 1 %}
<div class="pagination pagination-centered">
  <ul class="page-numbers">
    {% if paginator.previous_page %}
    <li><a href="{{ paginator.previous_page_path }}" class="prev">«</a></li>
    {% endif %} {% if paginator.page_trail %} {% for trail in
    paginator.page_trail %}
    <li>
      {% if page.url == trail.path %}
      <span class="page-numbers current">{{ trail.num }}</span>
      {% endif %} {% if page.url != trail.path %}
      <a
        href="{{ trail.path | prepend: site.baseurl | replace: '//', '/' }}"
        title="{{ trail.title }}"
        >{{ trail.num }}</a
      >
      {% endif %}
    </li>
    {% endfor %} {% endif %} {% if paginator.next_page %}
    <li><a href="{{ paginator.next_page_path }}" class="next">»</a></li>
    {% endif %}
  </ul>
</div>
{% endif %}

Configuring paginate-v2

I configured paginate-v2 as close as I could to keep the experience consistent with my WordPress install, although the page numbers in the URL are different:

autopages:
  enabled: true
  collections:
    enabled: false
  categories:
    enabled: true
    layouts:
      - home.html
    permalink: "/blog/category/:cat"
    slugify:
      mode: pretty
  tags:
    enabled: true
    layouts:
      - home.html
    permalink: "/blog/tag/:tag"
    slugify:
      mode: pretty

pagination:
  enabled: true
  per_page: 4
  permalink: "/page/:num/"
  title: ":title - page :num"
  limit: 0
  sort_field: "date"
  sort_reverse: "true"
  trail:
    before: 2
    after: 2

Auditing categories and tags

Twelve years of blogging and multiple platforms can play havoc on what categories and tags you've used over the years. I wrote a quick page that lists all the categories and tags with a count next to each. Anything with only one or two articles is a waste of space so I've been cleaning up.

Here's that page should you wish to add it to your site to help prune things down.

---
title: Audits
date: 2018-05-30T18:46:00Z
---

<h1>Audits</h1>

<h2>Categories</h2>
<ul>
  {% for category in site.categories %}
  <li>
    <a
      href="/blog/category/{{ category | first | replace: ' ', '-' | downcase }}"
      >{{ category | first }}</a
    >
    ({{ category[1] | size }})
  </li>
  {% endfor %}
</ul>

<h2>Tags</h2>
<ul>
  {% for tag in site.tags %}
  <li>
    <a href="/blog/tag/{{ tag | first | replace: ' ', '-' | downcase }}"
      >{{ tag | first }}</a
    >
    ({{ tag[1] | size }})
  </li>
  {% endfor %}
</ul>

See you in part 5 - hosting.

[)amien

0 responses