Following up from the previous post on setting up Jekyll, we take out our tools and customize it some more. When reading any of my posts you should realise I’m after utility rather than beauty. That said, we’ll try to pretty things up to an acceptable level as we go along.
Prettier paging
The next/previous paging is functional, but rather ugly. The jekyll-pagination-v2 gem has exactly what we need with support for pagination trails. We need to update our config for this:
pagination:
trail:
before: 2
after: 2
And replace our previous paging with a more functional one, unceremoniously borrowed from the example page.
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.first_page %}
<li class="previous">
<a href="{{ paginator.first_page_path | prepend: site.baseurl | replace: '//', '/' }}">First</a>
</li>
{% endif %}
{% if paginator.previous_page %}
<li class="previous">
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">← Newer Posts</a>
</li>
{% endif %}
{% if paginator.page_trail %}
{% for trail in paginator.page_trail %}
<li {% if page.url == trail.path %}class="selected"{% endif %}>
<a href="{{ trail.path | prepend: site.baseurl | replace: '//', '/' }}" title="{{trail.title}}">{{ trail.num }}</a>
</li>
{% endfor %}
{% endif %}
{% if paginator.next_page %}
<li class="next">
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Older Posts →</a>
</li>
{% endif %}
{% if paginator.last_page %}
<li class="previous">
<a href="{{ paginator.last_page_path | prepend: site.baseurl | replace: '//', '/' }}">Last</a>
</li>
{% endif %}
</ul>
{% endif %}
We’ll add some styling to make it look slightly prettier:
ul.pager {
list-style: none;
li {
display: inline;
padding: 5px 5px 5px 10px;
border-color: #BABDB6;
border-style: solid;
border-width: 1px;
}
li.selected {
background-color: #EEEEFF;
}
}
And voilà!
Displaying categories
Displaying categories on pages are a useful way of navigating a website in order to find related content in collections curated by the author. These are also known as tags in blog nomenclature but I’ve opted to use the tags variable (pre-defined in Jekyll) for internal organization of pages (more on this later in a later post). With categories already a native concept in Jekyll we can simply iterate over them on a page level (_layouts/post.html in the Minima theme):
<div class="post-categories">
<h3>Posted in:</h3>
<ul>
{% for category in page.categories %}
<li>{{ category }}</li>
{% endfor %}
</ul>
</div>
And then just add some rounded corners and pretty colours via CSS:
.post-categories {
ul {
list-style: none;
li {
display: inline;
padding: 5px 10px 5px 10px;
border-radius: 20px;
background: #EEEEFF;
}
}
}
I’ve recently changed this home page to display full post content and not just the excerpts so that one can read in peace without having to click through to an article. To display the categories on the home page as well we need to edit the home layout (_layouts/home.html in the Minima theme). Instead of copying and pasting, let’s move the categories markup to an include file, _includes/page_categories.html in my case:
{% if include.categories %}
<div class="post-categories">
<h3>Posted in:</h3>
<ul>
{% for category in include.categories %}
<li>{{ category }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
Notice that the variable being looped over is now include.categories. This is because it is passed from the different pages/layouts as an include variable as such:
{% include page_categories.html categories=post.categories %}
In a future post we’ll explore category pages and tag clouds.
Photo by Goran Ivos on Unsplash