custom pagination for improved user experience in jekyll

Why Customize Pagination in Jekyll

Pagination plays a crucial role in how visitors navigate through your blog posts. Default pagination often lacks flexibility and UX polish. Customizing pagination improves site usability by providing clearer navigation cues and faster access to content, which can decrease bounce rates and increase page views.

Goals for Custom Pagination

• Make navigation intuitive and easy to use
• Keep the design consistent with your blog’s theme
• Ensure responsiveness across all devices
• Improve SEO with semantic markup

Step 1: Understanding Default Jekyll Pagination

Jekyll uses the jekyll-paginate plugin by default, which generates simple numbered page links. However, this default setup is minimalistic and may not offer the best user experience or visual appeal.

Step 2: Creating a Custom Pagination Layout

To build a better pagination system, create a custom pagination include file:

{% raw %}


  {% if paginator.previous_page %}
    ← Previous
  {% else %}
    ← Previous
  {% endif %}

  

    {% for page_number in (1..paginator.total_pages) %}
      {% if page_number == paginator.page %}
        
{{ page_number }}
      {% else %}
        
{{ page_number }}
      {% endif %}
    {% endfor %}
  

  {% if paginator.next_page %}
    Next →
  {% else %}
    Next →
  {% endif %}

{% endraw %}

Step 3: Styling the Pagination

Next, add CSS to style the pagination controls elegantly:

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.pagination-previous,
.pagination-next {
  padding: 0.5rem 1rem;
  background-color: #007acc;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.pagination-previous.disabled,
.pagination-next.disabled {
  background-color: #cccccc;
  pointer-events: none;
  cursor: default;
}

.pagination-previous:hover:not(.disabled),
.pagination-next:hover:not(.disabled) {
  background-color: #005fa3;
}

.pagination-list {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.pagination-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  text-decoration: none;
  color: #007acc;
  border: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pagination-link:hover {
  background-color: #e6f2ff;
  border-color: #007acc;
}

.pagination-link.is-current {
  background-color: #007acc;
  color: white;
  pointer-events: none;
  font-weight: bold;
}

Step 4: Adding the Pagination to Your Blog

Include the custom pagination snippet in your blog’s post listing template (usually index.html or archive.html):

{% raw %}
{% include custom-pagination.html %}
{% endraw %}

Step 5: Testing and Mobile Responsiveness

Test your pagination on various screen sizes. Add media queries as needed to ensure usability on mobile devices:

@media (max-width: 600px) {
  .pagination {
    flex-direction: column;
    gap: 0.5rem;
  }

  .pagination-list {
    flex-wrap: wrap;
    justify-content: center;
  }
}

SEO and Accessibility Tips

• Use aria-label and aria-current attributes for screen readers
• Ensure focus styles for keyboard navigation
• Use semantic HTML elements like <nav> and <ul> for better SEO

Conclusion

Custom pagination enhances navigation and user experience on your Jekyll blog hosted on GitHub Pages. With simple Liquid templating and CSS, you can provide a professional and accessible browsing interface that encourages visitors to explore more of your content.