--- layout: post status: publish published: true title: A simple way to get a multilingual blog author: Julien Lengrand-Lambert author_login: jlengrand author_email: julien@lengrand.fr author_url: http://www.lengrand.fr wordpress_id: 366 wordpress_url: http://www.lengrand.fr/?p=366 date: 2011-12-12 13:55:52.000000000 +01:00 categories: - tips tags: - pluxml - javascript - website - language - multiingual - html comments: - id: 87 author: Mike author_email: mike@mike.cim author_url: '' date: !binary |- MjAxMS0xMi0xMiAyMDo0Njo1OCArMDEwMA== date_gmt: !binary |- MjAxMS0xMi0xMiAxOTo0Njo1OCArMDEwMA== content: Ugh JavaScript, that is a terrible solution. Use JS to add interaction, don't use it to show/hide information. Use separate pages, with their own language tag and their own URL. The internet will thank you, and so will people using screen readers! - id: 88 author: Julien Lengrand-Lambert author_email: julien@lengrand.fr author_url: http://www.lengrand.fr date: !binary |- MjAxMS0xMi0xMiAyMTo0ODowNiArMDEwMA== date_gmt: !binary |- MjAxMS0xMi0xMiAyMDo0ODowNiArMDEwMA== content: ! "I agree on the fact that this is not the best trick ever used. As you say, javascript should not be used to hide information. \r\n\r\nThere are some pros though. My first idea in creating the blog was to have two templates and separate pages. The thing is that it is the same as creating two different blogs. You have twice as much updates to perform, with half references. . . \r\n\r\nI think Javascript might be used in case you have a \"prefered\" language, and make another available \"as a gift\" for people." --- Hi all, Some time ago, I searched for a way to have a blog as simple as possible (and avoid wordpress or joomla monsters). I ended up using Pluxml for a while, and you can find the result here . One of the things I wanted absolutely was to write my blogs in several languages (french and english). After some time, I finally found a way to do it with a bit of javascript. The main idea is simple : You get one div by language. On startup, only one div is shown, and a click on a "switch language" link shows the other div while making the first disappear. You can see an example of the result here. To do this, you need two things :

Insert some javascript functions in your webpage. You can do this by importing a file, or simply copying the following code in your template:

{% highlight javascript %} {% endhighlight %}

Then, Write down your article in both languages, one after the other in you editor. Each language should be placed in a separate div; and a button placed to switch from one language to the other. Here is an example :

{% highlight javascript %} Français / English

My article in english

Mon article en français


{% endhighlight %}



There you are ! The "class = cachediv" is used to hide the on load.


All you have to do now is to "beautify" the code by changing the link into a flag, and enhance the way div are displayed.The bad thing is you will have some javascript code in your articles, and both languages are present on the same page.

Hope this help ;)


And if you have a better idea, please let me know !


[source]
NOTE : Sorry for the code being in french (its not mine). I could take some time to translate it if you want :) 

Note: I have recently done some cleanup and the sample website is not available any more (It needs a server with PHP to run). However, you can find the source of the [dark theme here](https://github.com/jlengrand/pluxml_theme_darkFuture).