How to create a multi lingual website?

Technology
1

Hello! I want to create a multilingual website like escargot but i don’t know how to do it… I want to use browser’s language and i also don’t know how to create everything… Have to duplicate all the pages and to translate them? i really idk pls help :slight_smile:

2

Make JSON files for each language, let JS choose the right JSON and make it apply the correct text for each text field.

3

You can go and look the script for the Escargot site. I’ll try and explain it below.

What I did is give every text element a unique id value (like “p1” for paragraph1, “s2-p1” for section2-paragraph2, etc).
Then, in a JSON file (let’s say “en.json”), I put the IDs in the keys and the correspondant HTML content in the values, like this:

"p1": "Hi, this is the <b>first</b> paragraph",
"s2-p1": "This is the second section of the <a href='duck.com'>website</a>",
"s2-p2": "<i>Another</i> paragraph"

Then, in a Javascript script, I open the JSON and read each key-value pair; read the key and search for an element with an identical ID, then write that value to the element’s innerHTML property.

If you have several pages in the website, you can group the paragraphs in the JSON inside of other objects like this:

"page1": {
    "p1": "Hi, this is the <b>first</b> paragraph",
    "s2-p1": "This is the second section of the <a href='duck.com'>website</a>",
    "s2-p2": "<i>Another</i> paragraph"
},
"page2": {
    "p1": "You are now in another page",
    "p2": "teeeeeeeext"
}

This allows you to have the same ID on different pages.
Then chech where the user is (looking at the URL they’re in) and do the same thing as before but only going through the items in the object with the name of the current page

Tell me if I missed something while explaining :b

1 Like