Multilingual

At a glance

The community member wants to create a multilingual project, and has successfully fetched and bound the data by creating two separate pages (one for English and one for Arabic). However, they don't want to have separate pages, and instead want the page content to change according to the language selected by the user in a dropdown. A comment suggests adding a parameter to the page path to represent the language (e.g. /blog/:lang/:slug), which would allow the query to dynamically fetch the proper language and slug.

PPushparaj

I want my project to be a multilingual, so I have successfully fetched and bind the data by creating two separate pages(same design) one for English and other one for Arabic, But I don't want it to be separate pages which means by selecting a languages in a dropdown the page contents should change accordingly with respective language when it select by a users, can you help me with this.

6 comments

JJohn Siciliano

Add a parameter to your page path to represent the lang. e.g. /blog/:lang/:slug

Then your query can dynamically fetch the proper language and slug.

mmustafasheikh

Sorry is there a video tutorial on multilingual sites (using hygraph or similar CMS allows adding multi languages) but best practice on handling data and setting this up properly in WS, along with lang switcher would be great thanks

JJohn Siciliano

Hey not yet but this is on my list to do!

mmustafasheikh

Thanks John. Would be super super helpful.

Sorry to add to list but also a dark / light mode switcher (to add to your previously done dark light mode video which was great )

mmustafasheikh

+ would be interesting to see how translated pages can flip for rtl languages 😬

JJohn Siciliano

🙂 https://github.com/webstudio-is/webstudio/issues/4743

Join the Webstudio community

Multilingual