如何替换特定页面？ [HTML多语种网站]

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!

Answer 1

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>

Answer 2

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> 

Answer 3

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

1. Go with your first option, but only for changing languages.
2. Include a <meta> tag that indicates the current language
3. 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