How to substitute specific pages? [HTML Multilingual Website]

Question

My question is pretty straight forward.

I have a static HTML website in English.

www.website.com

www.website.com/services

www.website.com/contacts

I also have it translated in German:

www.website.com/de/

www.website.com/de/services

www.website.com/de/contacts

My button (flag) for changing language is located next to my navigation:

<ul class="language">
   <li class="de"><a href="#"></a></li>
</ul>

Option 1: I can just replace the "#" with the German version of the page. For example on www.website.com it is <a href="www.website.com/de/"> and on www.website.com/services it is <a href="www.website.com/de/services">

But this is so much work. Is there an easier way for calling pages by using javascript or .htaccess..or whatever you suggest. My pages are in .html, so the .php option isn't efficient. And adding "id" to every element in order to translate it.. is even more complicated than the first option.

Thanks in advance!

score 0 · Answer 1 · answered Jun 07 '19 at 15:09

Ideally, you should probably do that with the server-side language of your website (PHP / ASP / Java / …). If you still want to do it in Javascript, you can do something like that to add /de on front of your current location:

<a href="www.website.com/de/" id="language">
<script>document.getElementById('language').setAttribute('href', '/de'+document.location.pathname);</script>

score 0 · Answer 2 · answered Jun 07 '19 at 15:11

0

yep I suspect this javascript should work:

$(document).ready(() => {
  let path = window.location.pathname;
  if (path.startsWith('/de'))
    $('a.lang-switch').attr('href', path.substr(3));
  else
    $('a.lang-switch').attr('href', '/de' + path);

  console.log($('a').attr('href'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="lang-switch">Change Language</a>

answered Jun 07 '19 at 15:11

Eugene Ghanizadeh Khoub

897
5
16

Does this only work, if files are with the same names? /services **and** /de/services – Jun 07 '19 at 15:16
@Sentar_Forinsky yes. how would you like it to work? – Eugene Ghanizadeh Khoub Jun 07 '19 at 15:18
Okay, I will try your solution. I just want an automatic way.. that finds the current page, and if user clicked the German flag -> to redirect him to the German version of it. – Jun 07 '19 at 15:31

score 0 · Answer 3 · answered Jun 07 '19 at 15:15

Do you have two distinct copies of the HTML? If so, this is probably pretty easy.

Go with your first option, but only for changing languages.
Include a <meta> tag that indicates the current language
Use a javascript event listener to intercept each link clicked and insert the language based on the above meta tag. Something like this;

let lang = document.getElementsByName('lang')[0].getAttribute('lang');

// Get the parent DIV, add click listener...
document.body.addEventListener("click", function(e) {
 // e.target was the clicked element
 if(e.target && e.target.nodeName == "A") {
  e.target.href.replace('yourwebsite.com', `yourwebsite.com/${lang}/`);
 }
});

<meta name='lang' lang='de'>

References: Part of code taken from an answer here

I just copied my (main) English language .html pages and replaced their text in the body. I added the tag to give Google and other search engines an indicator for language. Is first Option "practical" and used nowadays? — , Jun 07 '19 at 15:24

How to substitute specific pages? [HTML Multilingual Website]

3 Answers3