-
Notifications
You must be signed in to change notification settings - Fork 1
Home
rbatinov edited this page Jul 7, 2021
·
1 revision
This is a template for MultiLanguage support of a website. It uses only JavaScript to implement the logic. It is easy to implement and does not require some extra frameworks or extensions.
Structure of Project:
-
Resources Folder
- Here you can store all files with translations - in this example these are en.js and bg.js.
- You simply create a variable with keys and string value with translation.
- Key values need to be added in data-tag attribute in every HTML element which you want to be translated.
-
Scripts Folder
-
defaultValues.js
- All default values for the template.
-
myFunctions.js
- All functions that are used.
- getCookie - it is used to check if cookie with language exists. I prefer to store the language in cookie in order to remember the clients preferences.
- translateAll - translates all elements in DOM where data-tag exists
- Note that all html elements need to have data-tag attribute with their key in order to be translated.
-
Translate.js
- This is the implementation of the Language class. It creates an instance with default language. The default language is set in the defaltValues.js file.
- getVal - returns the translated value by the key passed. You can pass default value, if no key exists or 'undefined' will be returend.
-
defaultValues.js
-
Styles Folder
- style.css - simple styles for presentation page
-
index.html
- Example page where you can test the translation of page.