DEV Community

Discussion on: Help: How to make a multilanguage website?

Collapse
squidbe profile image
squidbe

You have a very French name 😀.
A couple of people have mentioned the dictionary approach, and that really seems most suitable for your use case (it's been a few years, but last time I had to deal with this, we used a dictionary and a translation service). It's also pretty easy to implement and makes text changes a breeze. Server-side might be better for SEO, but if you're not that worried about it, client-side is totally fine.

Collapse
cecilelebleu profile image
Cécile Lebleu Author

Oui, je suis moitié française :) (Yes, I'm half french!)
Although for now, I'm looking to translate to Spanish, because of the market in my location.

Using a dictionary sounds like the best option so far, but I'm still wondering how I could keep the language "preference" when moving from page to page. Do you have any suggestions?

Collapse
squidbe profile image
squidbe • Edited on

Je suis Français aussi (Cajun, en fait).

Easiest way to persist the preference would be local storage or a cookie. When the user selects the language preference, you just point to the relevant dictionary object (could be a file or you could just load the object into memory on page load depending on how much text there is).

You mentioned you might duplicate pages in the different languages, but you can just use tokens to reference the text (e.g., {{ myPage.title }} -- see Avalander's post), and dynamically swap the text upon user selection without page requests. If you load the dictionaries when the user first hits the site, you won't need to make subsequent requests, and the UX will be very snappy. However, if you're really gonna go with vanilla JS, then using tokens will likely be more work than it's worth (a framework like Vue gives you that functionality out of the box); in that case, just use innerHTML or innerText on id-targeted elements, e.g., <div id="biography"><!-- your script inserts language-specific biography text here --></div>. Good luck!