Multi Language Settings

Let's add the French language.
  • Create a new file fr.json in the fr folder in the src/lang folder and copy the en.json file code in this file.
  • Now you need to add the language in the src/js/app.js file. In the function setLanguage, add the "else if" condition as below code and make sure to add the french.jpg file in the src/images/flags folder. 
    else if (lang == 'ru') {
document.getElementById("header-lang-img").src = "/static/images/flags/russia.jpg";
}
break;
  • You can simply use key attributes in the HTML tag to convert the language text. Example: <div key="t-title">This is title.</div>

  • Add the below dropdown in the templates/partials/header.html file in the language dropdown. 

    <a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ru">
     <img src="{% static 'images/flags/french.jpg' %}" alt="user-image" class="me-1" height="12"> <span class="align-middle">French</span>
</a>
© Skote.