En Kuapay hemos diseñado y desarrollado un nuevo sistema de templates basado en el omnipresente clásico Mustache, que te ayuda a hacer una página web multi lenguaje sin el engorro de tener que crear HTML para cada lenguaje o de pre-compilar las páginas antes de crearlas, como sucede con los templates de PHP o Ruby.
Super Easy Template te ayuda a tener una página web en múltiples idiomas sin el tedioso paso de tener que compilar el código o usar ¨gettext()¨ en tu servidor, sino que es el cliente el que tiene la lógica de los templates en su navegador, y en consecuencia menos carga para tus servidores.
Super Easy Template te ayuda a crear templates en HTML donde en vez de colocar las palabras colocas placeholders a dichas palabras. Algo así:
<div class="basic">
<h1>{{template_title}}</h1>
<p>{{template_text}}</p>
</div>
<div class="flags"></div>
Tienes que tener un servidor web para poder poner en marcha el código.
Donde podemos ver los placeholders template_title y template_text. Para poner este template engine en marcha seguimos los siguientes pasos:
- Descargar el código del repositorio: https://github.com/kuapay/Super-Easy-Template-Engine
- Copia el contenido del repositorio completo al directorio base donde el servidor web tiene las páginas (en entornos linux suele ser /srv/www o /var/www).
- Reinicia el servidor web.
Accede a la página web de tu servidor web (normalmente http://localhost/index.html) y verás la siguiente página en tu explorador.
Ahora ya tienes tu página web en marcha. Lo que tienes que hacer es empezar a cambiar los templates y rellenar los archivos que contienen los diccionarios de locales. Aquí vamos a ver el ejemplo para poner un template nuevo, con su diccionario y sus idiomas.
Primer template
El primer template que vamos a introducir lo vamos a llamar nuevo.mustache. El nombre del fichero debe acabar en .mustache por una sencilla razón, y es que SET es compatible con más template engines que queramos incorporarle. Por ahora hemos introducido nada más Mustache. Dentro del archivo, que lo vamos a introducir en:
$WWW_HOME/templates/nuevo.mustache
El contenido del archivo va a ser el siguiente:
<div class="basic">
<h1>{{template_title}}</h1>
<p>{{template_text}}</p>
<p>{{template_another_text}}</p>
<div class="flags"></div>
</div>
Ahora vamos a añadir en el archivo de diccionario el contenido de este nuevo template. Abrimos locales/en_US.locale y añadimos el nuevo template:
"6": "Saturday",
"7": "Sunday"
},
"basic.mustache": {
"title": "This is the title of the basic template",
"text": "Text that explains what is this template about"
},
"nuevo.mustache": {
"title": "Title of my new template",
"text": "My new template has this text that is beautiful.",
"another_text": "And this second paragraph explains how to make paragraphs."
},
"flags.mustache": {
"change_language": "Change the language:",
"spanish": "into spanish",
"english": "into english"
}
Puedes ver que hemos añadido una sección JSON nueva al objeto del diccionario. Lo mismo hay que hacer en el diccionario locales/es_ES.locale donde vamos a añadir la misma sección, pero con el lenguaje apropiado:
"6": "Sabado",
"7": "Domingo"
},
"basic.mustache": {
"title": "Titulo del template basico",
"text": "Texto que compone el template basico"
},
"nuevo.mustache": {
"title": "Título de mi nuevo template",
"text": "Mi nuevo template tiene este texto tan molón.",
"another_text": "Y este segundo párrafo explica como hacer párrafos."
},
"flags.mustache": {
"change_language": "Cambia el idioma:",
"spanish": "a Castellano",
"english": "a Ingles"
}
Ya tenemos el template con sus idiomas listos. Ahora vamos a poner todo en su sitio para poder ver este template en un link en el template principal. Para ello modificamos templates/basic.mustache:
<div class="basic">
<h1>{{template_title}}</h1>
<p>{{template_text}}</p>
<a id="new_template_link" class="clickme">{{template_new_template_link}}</a>
</div>
<div class="flags"></div>
Y en el diccionario añadimos bajo la sección de basic.mustache las entradas para new_template_link, que en nuestro caso será “Mi nuevo template” y en inglés “Mi new template”.
Ahora queda la parte más cercana al Javascript, que es el indicar que cuando hagla click en el link, se muestre el nuevo template en la pantalla. Para esto, en el fichero javascripts/views/basic_view.js vamos a añadir las siguientes lineas:
BasicView.prototype.applyViewHandlers = function() {
// Any action we want to make with this
// template should be run here, as this
// method is executed once the HTML code
// is been injected in the page.
// When clicking on the Link, the new template
// will substitute this actual template (basic).
var that = this;
// Function.
$('#new_template_link').click(function() {
var mustache = 'nuevo.mustache';
var container = document.body;
var content = {};
// Add the propper Locale from the locale file
for(var i in app.locale[mustache]) {
content['template_' + i] = app.locale[mustache][i];
}
// let's clean the canvas to place
// the new template.
app.cleanCanvas();
// Include the Template in the Web Page inside the
// container we have specified.
Templates.to_html(
mustache,
content,
container,
function() {
that.applyViewHandlers();
}
);
});
app.views.flagsView = new FlagsView();
app.views.flagsView.render();
};
Ya tenemos listo el template, las funciones y el texto en los diferentes idiomas. Todo esto se realizará en cliente, por lo que no tenemos por qué tener complejos servidores en Ruby, PHP o Java. Simplemente un servidor web hace las veces de servicio para estos templates. En el explorador del cliente, se cargará el diccionario del lenguaje seleccionado por el usuario, y en consecuencia los templates se rellenan con los tags adecuados.
¡Ya estamos listos para ver el contenido del nuevo template en nuestro servidor!
