Multi Language Settings

Let's add the French language.
Nodejs
  • Create a new file fr.json in the fr folder in the i18n/ folder and copy the en.json file code in this file.
  • Now you need to add the language in the app.js file. In the app.use(i18n({ translationsPath: path.join(__dirname, 'i18n'), // <--- use here. Specify translations files path. siteLangs: ["en", "ru" , "it" , "gr" , "sp" ], textsVarName: 'translation' })); and add language in siteLangs array and make sure to add the french.jpg file in the src/assets/images/flags folder.
  • You can simply use key attributes in the EJS tag to convert the language text. Example: <div data-key="t-title">This is title.</div>

  • Add the below dropdown in the views/partials/topbar.html file in the language dropdown. 

    <% if(lang=="en" ) { %>
<img src="/assets/images/flags/us.jpg" alt="Header Language" height="16">
<% }  %> 
    <!-- item-->
<a href="?clang=en" class="dropdown-item notify-item language" data-lang="fr" title="French">
    <img src="assets/images/flags/french.jpg" alt="user-image" class="me-2 rounded" height="18">
    <span class="align-middle">French</span>
</a>

After completing these above steps you need to run the command npm run build command in the project directory. After running this process you need to run the command npm start . It will serve your app on the localhost.

© Skote.