Paginate a Dual Language Blog in Jekyll
I’ve been looking for a dual language solution that will paginate both blogs and have finally got something working. Most of the solutions I found wouldn’t paginate the secondary language blog since Jekyll will only paginate one blog by default.
TL;DR
I’m paginating the secondary language blog with Georg Schmidl’s Jekyll Paginate Multiple plugin. I’ve setup an example repo here.
What Did Not Work
Here are a few of the plugins I’ve tried that did not work for me:
Plugins:
- Multilingual by Octopress
- Jekyll Multiple Languages by Anthony Gaudino
- Jekyll Multiple Languages by Huqiu Liao
- Jekyll Multilingual by Patrice Brend’amour
- Jekyll Language Plugin by Vincent Wochnik
- Polyglot Jekyll by Mattia Tezzele
- Polyglot by Samuel Volin
I also tried the Octopress Paginate plugin which is supposed to allow multilingual pagination. I couldn’t get that to work either. It would throw errors or simply wouldn’t build.
There are a few tutorials around the interwebz that attempt to get multi-language blogs to work on GitHub Pages—meaning without plugins. The two below came close but neither would paginate the secondary language blog.
Tutorials:
What Did Work
I didn’t need this to work on GitHub pages so being a plugin wasn’t a problem, but I did need it to work on CloudCannon. After contacting CloudCannon for ideas, Ross setup a repo for me and sent me an email explaining the structure. I didn’t like the exact structure he’d used, but it got me thinking. He didn’t use plugins and was able to do everything I wanted except the pagination.
So here’s what I’ve got working so far:
- Create a directory for the secondary language. In the example repo, I’ve used
/th
. - Add all the translated documents there—the secondary
index.html
,about.html
, etc. - Be sure to add
include: [th]
to your_config.yml
file so Jekyll knows where those files live.
Pagination Settings
In order to paginate the secondary language blog, I’m using the jekyll-paginate-multiple plugin. The plugin’s README file does a good job of explaining the setup. My paginate settings in the _config.yml
file are slightly different since I’m not outputting the English blog in a /en
directory.
paginate_multiple:
- paginate: 3
paginate_path: '/blog/page:num/'
sub_dir: '/en'
- paginate: 3
paginate_path: '/th/blog/page:num/'
sub_dir: '/th'
Language Switcher
Since the secondary language is added as a subdirectory we’ll need to add “/th” before the page URL or remove it if we’re on a Thai language page.
{% if page.language == 'en' %}
<a class="menu-item" href="{{ page.url | prepend: '/th' }}">ภาษาไทย</a>
{% endif %}
{% if page.language == 'th' %}
<a class="menu-item" href="{{ page.url | remove: '/th' }}">English</a>
{% endif %}
Dates
In order to have blog post dates in the appropriate language, we’ve got to tell Jekyll what those dates are called. Not only did I want the dates displayed in the correct language, I wanted them ordered differently. Since I was working with Thai language I wanted it to output in day-month-year and in English month-day-year like this:
- 4 กุมภาพันธ์ 2017
- February 4, 2017
This code is 100% swiped from Sylvain Durand’s Making Jekyll Multilingual article.
I created a date.html
file in the _includes
directory with the following:
{% capture hide %}
{% if include.mode != 'month' %}
{% assign day = include.date | date: "%-d" %}
{% endif %}
{% if page.language == 'th' %}
{% assign m = include.date | date: "%-m" %}
{% case m %}
{% when '1' %}
{% capture month %}มกราคม{% endcapture %}
{% when '2' %}
{% capture month %}กุมภาพันธ์{% endcapture %}
{% when '3' %}
{% capture month %}มีนาคม{% endcapture %}
{% when '4' %}
{% capture month %}เมษายน{% endcapture %}
{% when '5' %}
{% capture month %}พฤษภาคม{% endcapture %}
{% when '6' %}
{% capture month %}มิถุนายน{% endcapture %}
{% when '7' %}
{% capture month %}กรกฎาคม{% endcapture %}
{% when '8' %}
{% capture month %}สิงหาคม{% endcapture %}
{% when '9' %}
{% capture month %}กันยายน{% endcapture %}
{% when '10' %}
{% capture month %}ตุลาคม{% endcapture %}
{% when '11' %}
{% capture month %}พฤศจิกายน{% endcapture %}
{% when '12' %}
{% capture month %}ธันวาคม{% endcapture %}
{% endcase %}
{% else %}
{% capture month %}{{ include.date | date: "%B" }}{% endcapture %}
{% endif %}
{% capture year %}{{ include.date | date: "%Y" }}{% endcapture %}
{% endcapture %}
I then created two time-files in the _includes
directory: page-time.html
and post-time.html
. I use {% include page-time.html %}
when I’m calling from within a page or a post since I need to call page.date
. And I use {% include post-time.html %}
when I’m calling inside a loop where I’ve used {% for post in paginator.posts %}
and need to call post.date
.
Be sure to call the date file ({% include date.html date=page.date %}
) in your page and post time-files.
TODO
I’m still looking for a way to paginate categories. If you know of a way or find some documentation or a tutorial that might lead somewhere, please get in touch.