Post translation

Many parts of this site such as buttons, pages and parahraphs are in two languages. They're translated in the simplest way – having the two languages written side by side. This is fine for just two languages, any visitors will see both translation at once.

But for blog posts this method would be an even bigger inconvenience. If I put one translation under the other, users would have to scroll down to see it. If I split them in two columns, it would be a pain to read, even more so on mobile devices with a narrow screen. Using collapsible and expandable menus would be nicer, but ultimately everything is still on one page.

That's why I decided to have two variants of every post – an english one and a bulgarian one. At the top they'll have a link to the other version of the post. However, it would be annoying to do this each time I create a post. Thankfully, Publii allows for customized HTML to be added to the beginning or end of every page or post. That way I could go to Tools and Plugins > Custom HTML > Before every post and add the following:

<p class="msg msg--info" id="langlink"><a href="">Натиснете тук</a></p>

But that's not all – every page has a different link. So I had to add some JavaScript to determine the URL depending on the current address of the page.

<script>
    // Take the current URL address
    var currentURL = window.location.href;
   // Pages whose address ends with "-2" are duplicates, and thus in english
    if(currentURL.slice(-3)=="-2/") {
        // Remove the "-2" from the URL to go to the bulgarian page
    	document.getElementById("langlink").innerHTML = 
    "<a href=\"" + currentURL.replace("-2/", "/") + "\">Натиснете тук</a>, за да видите поста на български.";
    } else {
        // Add the "-2" to the URL to go to the english page
    	document.getElementById("langlink").innerHTML = "<a href=\"" + currentURL.replace(/.$/, "") + "-2/" + "\">Click here</a> to view this post in English.";
    }
</script>

It's certainly not polished, but it works. As far as I follow the same naming conventions for posts, there should be no problem.