web applications - Build same same web for different ccTLD -
i building webapp meteor.
my webapp have same ui (and pages) in different languages. localized , deployed on different cctlds (.cz, .sk, .hu, .tr, ... .com).
here similar case of want. czech parfums eshop. when scroll down bottom, there flags (links) different domains.
my webapp can broken down pieces:
- [db] database can same many languages.
- [common-code] of code same between different languages
- [routing & i18n] different parts every languages routing file , i18n file(s)
there should way how build/run/debug app different routing file , i18n file(s).
i don't want have 1 .com domain , able switch languages. why?
consider using 1 code base internationalization files. can use tap-i18n package (https://github.com/tapevents/tap-i18n) along iron-router , iron-router-i18n package (https://github.com/yoolab/iron-router-i18n). example:
meteor create intl meteor add tap:i18n meteor add iron:router meteor add martino:iron-router-i18n
this creates basic project demonstration purposes , adds tap-i18n, iron-router, , iron-router-i18n packages.
let's assume want support english, spanish, , french. create i18n directory store internationalization files. files contain text strings translated various versions of site (sorry if translations not perfect):
i18n/en.i18n.json:
{ "settings": "settings", "home": "home", "welcome text": "welcome meteor!", "home text": "this home page.", "settings text": "on page can modify settings." }
i18n/es.i18n.json:
{ "settings": "configuracion", "home": "inicial", "welcome text": "bienvenido meteoro!", "home text": "esta es la pagina de inicio.", "settings text": "en esta pagina usted puede modificar la configuracion." }
i18n/fr.i18n.json:
{ "settings": "parametres", "home": "premiere", "welcome text": "bienvenue au meteor!", "home text": "cette page est la page d'accueil.", "settings text": "sur cette page vous pouvez modifier les parametres." }
note file names start language code (en, es, fr). i'm using code list http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry, code doesn't matter correctly reference later in iron-router-i18n configuration.
now create settings.json file application specify language want use current deployment. here i'm using 'es' spanish (again, must match prefix used above i18n file):
settings.json:
{ "public": { "i18nlanguagecode": "es" } }
this 1 , file need modified each deployment.
on startup of theapplication, call tapi18n setlanguage function, passing in value settings.json file, , i'll register global template helper current language:
intl.js:
if (meteor.isclient) { tapi18n.setlanguage(meteor.settings.public.i18nlanguagecode); template.registerhelper("getcurrentlanguage", function(){ return meteor.settings.public.i18nlanguagecode; }); }
here intl.html file:
<template name="layout"> <h1>{{_ "welcome text"}}</h1> {{> yield}} </template> <template name="home"> <p>{{_ "home text"}}</p> <p><a href="{{pathfor route='settings' lang=getcurrentlanguage}}">{{_ "settings"}}</a></p> </template> <template name="settings"> <p>{{_ "settings text"}}</p> <p><a href="{{pathfor route='home' lang='en'}}">{{_ "home"}}</a></p> </template>
notice helper provided tap-i18n package (the underscore followed string in quotes). these placeholders ("welcome text", "home text", "settings text", "settings", "home") replaced proper translation text i18n files created. getcurrentlanguage
function passes current language code iron-router-i18n pathfor helper.
now let's create router configuration.
router.js:
i18nconf.configure({ defaultlanguage: 'en', languages: [meteor.settings.public.i18nlanguagecode], autoconflanguage: true }); router.configure({ layouttemplate: 'layout', i18n: { compulsorylangcode: false, langcodefordefaultlanguage: false, addlangcode: function(url){ return url; }, langcodeaction: function(path){ /* default router.setlanguage called , not want */ } } }); router.route('/', function() { this.render('home'); }, { name: 'home' }); router.route('settings', function() { this.render('settings'); }, { i18n: { languages: { es: { path: '/ajustes' }, fr: { path: '/parametres'} } } });
notice i'm passing meteor.settings.public.i18nlanguagecode
i18nconf.configure
, , each route want translated path, need add configuration:
i18n: { languages: { es: { path: '/ajustes' }, fr: { path: '/parametres'} } }
when run meteor, run using settings file:
meteor run --settings settings.json
i've created sample repo here: https://github.com/markleiber/intl
Comments
Post a Comment