Multi Language Settings
Let's add the French language.
- Create a new file fr.json in the fr folder in the
wwwroot/assets/lang
folder and copy theen.json
file code in this file. -
Now you need to add the language in the
wwwroot/assets/js/app.js
file. In the function setLanguage, add the "Switch case" condition as below code and make sure to add the french.jpg file in thewwwroot/assets/images/flags
folder.if (lang == 'en') { document.getElementById("header-lang-img").src = "/assets/images/flags/us.jpg"; }
- You can simply use key attributes in the HTML tag to convert the language text. Example: <div data-key="t-title">This is title.</div>
-
Add the below dropdown in the
Views/Shared/_topbar.html
file in the language dropdown.<!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="en"> <img src="~/assets/images/flags/us.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">English</span> </a>