Updated Language Support

English Or Chinese?

Language support is one of the primary issues of my peronsal website. The very fisrt version of my website was built to showcase my portfolio for applying graduate schools, therefore it is in English. Later, I redesigned and added some Chinese blog posts to my website, which then became a hodgepodge mixing both English and Chinese contents.

First version of my personal website:

A friend of mine suggested that I should support only English, “Almost everyone who comes to your blog understands English, but not all of them understand Chinese.” But I still don’t want to give up on Chinese. After all, it is my mother language, I feel more comfortable writing and reading with it. Besides, many visitors of the website are my friends who are more familiar with Chinese, although they also understand English well.

Finally, I decided to support both langauges, though it requires a litte more effort. In December 2021, I updated my website and now you can switch between two languages in one click.

Writing In Both Languages

To achieve language switching, the first step is to write in both languages. For me, I would first create a draft writing in Typora (a minimalist Markdown writing software), and then use the split screen in Visual Studio Code (the software I use to write codes) to start translation:

Sometimes it is a good idea to use translation softwares first before polishing the wording manually, just to save time and effort.

Language Switching

After producing text materials in both languages, it is time to consider how to achieve language switching. The method I currently use is to create two identical websites, and then use a naming convention to switch between two websites.

For example, the English version of one article is www.zhangyongqi.com/en/xxx, and the corresponding Chinese version might be www.zhangyongqi.com/cn/xxx。

Once the URLs are identical in both websites, a switch button is added to jump between websites: it first determines the language version of the current website, then replace the cn in the URL with en, or replace en with cn accordingly.

Sample code:

if('en' === language.now){
  language.label = '中文';
  language.href = location.pathname.replace(/^\/en/, '/cn');
}else{
  language.label = 'English';
  language.href = location.pathname.replace(/^\/cn/, '/en');
}

Finally

Supporting both languages also means spending more time and energy on writing and translating, I am not 100% sure I would have enough patience and time to continue this language support in the future. However, for the time being, it is worthwhile.