Home>

I have a question about how to switch between multilingual pages.

Suppose you have a Japanese page in the current domain "hogehoge.com".
A new English version of the page will be created for this,
When creating the same page structure as the Japanese version in the directory "hogehoge.com/en/~"
Language switching in header a I want to switch between Japanese and English with the tag link button "JP/EN".

The following is the most helpful thing to look for
https://www.webdesignleaves.com/wp/jquery/220/
It was,

I want to expand the Japanese page directly under the directory/jp/instead of cutting it.
I want to link in/en/only when it becomes English,
In this case, how can I write it in JS (jQuery) to make the transition correctly?

Also, not only switching between JP and EN, but also when transitioning from the header to another content (page such as contact form or privacy policy) when i am on the English version page, transition from English page to English page. I want to

I only understand HTML and CSS, and JS is in trouble because I have only enough understanding to use copy and paste.

The ideal movement is as follows.

[Click to switch the language in the header ...]
1) Top page (Japanese) ⇒ Top page (English version)
2) Lower content A page (Japanese: "hogehoge.com/content A") ⇒ English version of the same content A page ("hogehoge.com/en/content A")
[When moving from the header to another page, the language is mom]
3) Lower content page A (in English version) ⇒ Click another content B page in the header ⇒ English version content B page is displayed

  • Answer # 1

    If you want to operate with JS instead of the server side, you can get the URL of the link destination with the following code.

    let current_path = location.pathname,
        path_arr = current_path.split ('/'),
        link_to;
    if (path_arr [1] === "en") {
        path_arr.splice (1, 1);
    } else {
        path_arr.splice (1, 0,'en');
    }
    link_to = path_arr.join ('/');


    After that, you can write a script that either assigns this link_to value to the language switching button when the page loads, or skips to this URL when the button is clicked.

    [Addition]
    "Assign the value of link_to to the language switching button when the page loads" is, for example, as follows.
    Let's assume that the id of the language switching link a is lang-switch.

    const linkBtn = document.getElementById ('lang-switch');
    document.addEventListener ('DOMContentLoaded', function () {
        linkBtn.setAttribute ('href', link_to);
    });


    "When you click the button, skip to this URL" is the following method.

    const linkBtn = document.getElementById ('lang-switch');
    linkBtn.addEventListener ('click', function (e) {
        e.preventDefault ();
        location.href = link_to;
    });


    By the way, if you use jQuery, it will be as follows.

    const linkBtn = $('# lang-switch');
    $(function () {
        linkBtn.attr ('href', link_to);
    });
    const linkBtn = $('# lang-switch');
    linkBtn.on ('click', function (e) {
        e.preventDefault ();
        location.href = link_to;
    });

Related articles