smws
v1.0.2
Published
Simple multilingual website module
Downloads
14
Maintainers
Readme
smws
Simple multilingual website module
This is lightweight module, which help to render and controle you pages and paths.
Work with Express.js, tested with EJS and Eta view engines.
You can create multilingual website with SEO friendly urls.
To see and test example pls visit test on Github
Installation
$ npm i smws
Features
- Check language from params or cookies,
- Render view engine template with options from language file,
- Not needed to setup
app.get
for each language, - SEO friendly urls;
Functions
smws.switcher(req,res);
- use to switch languages from client-side;
smws.run(req,res,val);
- use to render template and contole params;
smws.split(path);
- use to make multilingual url ;
Setup example
Setup you app file
For example:
const express = require('express'),
cookieParser = require('cookie-parser'), // needed cookie-parser
bodyParser = require('body-parser'), // needed body-parser
smws = require('smws'), // require smws
app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
app.use(cookieParser());
app.listen(process.env.PORT || 3000, () => {
console.log('Server running on port 3000');
});
Configure module:
Use smws.config({options});
to setup module defaults;
This function is mandatory to setup
smws.config({
defaultLang: 'de',
languages: ['en','de','ru'],
origin: 'https://yourdomain.com'
});
Config options:
languages
Are your website languages, write in array. By default['en']
,defaultLang
Is prefered default language which will be rendered when someone first time visit your homepage. By default'en'
,langDir
Is directory name in root where you store your .json files with traslations. By default'languages'
,origin
Is youre website origin. By default'http://localhost:3000'
,cookieName
Is cookie name which will be used to set language. By default'lang'
,langParam
Is path param for languages. By default'lang'
;
Write your GET requests
When you write your paths use smws.split('path')
to GET SEO friendly urls with params in all languages.
For example:
app.get(smws.split('/:lang/:category/'), (req,res)=>{
/////////////////////
});
Response templates and controle urls
Use smws.run({options});
to render template and controle your params:
app.get(smws.split('/:lang/:category/'), (req,res)=>{
smws.run(req,res,{
page: 'index',
useParams: ['lang', 'category'],
page404: 'page404'
});
});
Run options:
page
Template in views which will be used for response. By defaultindex
;useParams
Array of params which need to controle, example:You have this path
/:lang/:category/:userID
, and you want to controle translation only for:lang
and:category
params.You have language .json files ru.json and en.json.
In language files you add translation for this params (more about language files below).
for en.json
lang: 'en', category: 'category'
and ru.jsonlang: 'ru', category: 'kategoriya'
,then function allows to open paths like
/en/category/:userID
or/ru/kategoriya/:userID
,But sends 404 page when path will be
/en/kategoriya/:userID
or/ru/category/:userID
;
page404
Template for 404 page. If not added then will responsePage not found
;
Setup language files
Default dir languages
, you can change it in smws.config({options});
.
Use file names same with you are defined in smws.config({languages: ['en','ru']});
.
Language file example:
// en.json
{
"smws": {
"category": "category",
"lang": "en"
},
"hello": "Hello world"
}
Language switcher
You will need to setup backend and front-end to change prefered language!
In backend use smws.switcher(req,res);
:
// example:
app.post('/:lang/languages',(res,req)=>{
smws.switcher(req,res);
});
In front-end:
<!-- using Eta engine -->
<form action="/<%= it.smws.lang %>/language" method="post">
<button class="en-button" type="submit" name="lang" value="en">EN</button>
<button class="ru-button" type="submit" name="lang" value="ru">RU</button>
</form>
<!-- using ejs engine -->
<form action="/<%= smws.lang %>/language" method="post">
<button class="en-button" type="submit" name="lang" value="en">EN</button>
<button class="ru-button" type="submit" name="lang" value="ru">RU</button>
</form>
Thank you for attention!
Hope this module will be helpfull for someone!
If you like it and want to say thx