【Jekyll + jQuery】Implementing a switching-language button which works only in specific articles

14 minute read A

Background

You can skip this section if you need.

Wathcing Google Analysis, I found people from Singapole, China, U.S.A. etc. have accessed this web page, so I implemented a switch bottun to change language like Japanese and English with JQuery.

But I haven’t written any jQuery and javaScript codes, so I didn’t come up with any ideas about how to implement it and I had extremely struggled.

If you are also concerned with something similar to this, plz refer to this article because I put togather detailed implementing ways.

Rough specifications

  1. Showing the same switching-language button(top of the page’s one) in specific articles
  2. About translating, I thought using Google Translate or DeepL is a good idea, but I decided to translate by myself because I am practicing English writing. -> Anather marldown file is necessary for the English article.
  3. Not displaying the button on the list of “recent articles” by using collections: Jekyll’s function
  4. Displaying just “English article available” on the list of recent articles if BOTH Japanese and English articles are prepared.
  5. Making URL of English article Japanese article's url/en

I show you the finished product I originally wanted to implement

package

Here’s an article on taking the TOEFL for the first time!

Implementing button

I borrowed the design of the button from the following site.

See the Pen How to show buttons for changing lang. on pages powered by Jekyll by htnabe (@htnabe) on CodePen.


It seems possible to make various stylish buttons by rewriting css and html. I like the current button’s design tho.

About the content of JS, especially about how to handle the button, of course it is up to you. Change the code according to where you want the buttons to be placed and what you want them to do.

Also, note that in the case of jQuery, $(document).ready(function(){}) and $(window).bind("load" function(){}) works in very different ways.

The former works after DOM is build and the latter works after objects(images, buttons and other elements) used in the site are built. If you are new to DOM, I reccomend you to read the site below, it’s a bit difficult tho.

Especially NOTE that the processing in $(window).bind("load" function(){}) is “If en is included in URL, check ENG button.” and if you put this processing inside of $(document).ready(function(){}), it won’t never work.

Setting up the appearance condition of the switching-language button

I prepared ja_enparameter this time and I made the button to appear only the time when ja_en: true.

It’s really easy to implement this process. In the case of Jekyll, changing and checking values of parameters including ja_en is easy by defining them in _config.yml and each article’s fromt matter.

For example, embedding ja_en in the front matter of this article would look like this.

---
title: 【Jekyll + jQuery】Implementing a switching-language button which works only in specific articles
tag:
  - Jekyll
  - jQuery
  - switch language
categories: Tech
show_date: true
ja_en: true
classes: wide
permalink: /tech/changeLangJektll/en
excerpt: I implemented a switching-language  button which works in only specific this site's articles with jQuery. I decided to write this article because there aren't any Japanese who is writing this kind of article.
---


Then, I wanna show the button only when ja_en: true so I have to rewrite the code which is displayed with CODEPEN by using ja_en parameter. I named this file as page__meta-ja_en.html.

1
2
3
4
5
6
7
8
9
10
11
<!--page__meta-ja_en.html-->
{% assign document = post | default: page %}
{% if document.ja_en %}
    <span class="page__meta-changelang"><i class="fas fa-fw fa-exchange-alt" aria-hidden="true"></i>A
  	<input type="radio" name="switch" id="radio1" checked>
  	<label for="radio1">JAN</label>
  	<input type="radio" name="switch" id="radio2">
  	<label for="radio2">ENG</label>
    </span>
{% endif %}


By following this way, it’s possible to make the button appear only in tha case of ja_en: true.

Displaying “English article availabe” on the list of recent articles

In this case, I also used ja_en-parameter.

The method is,

  1. Write ja_en: true on the front matter in Japanese article which is pair of English one
  2. Showing “English article available” only when ja_en: true by using corresponding html file or files

THIS IS IT! I implemented this processing by making a new html file(page__meta.html) and just rewrited the part of switching button of JAN <=> ENG. Here is the example.

<!--page__meta.html-->
{% highlight html linenos %}{% raw %}
{% assign document = post | default: page %}
{% if document.ja_en %}
    <span class="page__meta-changelang"><i class="fas fa-fw fa-exchange-alt" aria-hidden="true"></i> A: English article available
    </span>
{% endif %}


So for instance, by using the 2 html files I just introduced and following this way bellow, you can show the button.

  1. Show switching button on articles by naking page_meta-ja_en.html
  2. Include page__meta.html in a html file(e.g.post.html) which is a file to show content of the article
  3. Show switching button on articles by naking page_meta.html
  4. Include page__meta.html in a html file(e.g.post.html)which is a file to show content of the article

Quarantine English articles using Jekyll’s collection feature

I thought it would be mess to display English and japanese articles on recent articles list simultaneously, so I deceded to manage English articles in a separate folder from Japanese articles(/_posts) by using the collection feature of Jekyll.

I referred to the following site. Sry I didn’t refer to other English pages…

Then, I createda folder named /eng-posts under the root of the homepage-folder and put it in and I wrote the following text in _config.tml.

collections:
  eng-posts:
    output: true


This allows external files to read the markdown files in the eng-posts folder.

Lastly, the URL’s setting for English articles follow the URLs of Japanese articles/en form used in various sites. Simply add to the front matter of the article as permalink: /tech/changeLangJektll/en and you can check it at the desired URL.

One comment ... After implementing this, I realized that it would take a lot of work to make it work for all articles, and Google Transform and DeepL is working prety well.