Motor de plantillas para ExpressJS usando html puro
El uso de un motor de plantillas hoy en día no es tan popular como hace algunos años. El uso de ajax y otros motores de plantilla desplazaron el HTML a segundo plano. Aún así, siempre es necesario contar con algo simple y robusto sin aprender más de lo que ya sabemos. HTML sigue siendo lo que ves en el front, por ende, que mejor que usar un motor de plantillas basado en este arcaico lenguaje.
$ npm install trascender.render
const render = require("trascender.render");
this.express = express(); //tipico en app express
new render(this, __dirname + "/frontend/");//carpeta con vistas html
this.express.get("/",function(req,res){
res.render("index",{
title: "Hola mundo",
p: "El motor de plantillas trascender.render esta funcionando perfectamente",
a: "https://www.jotace.cl",
if: true,
repeat: [1,2,3,4,5]
});
});
Para utilizar una plantilla maestra deberá seguir el siguiente formato:
index.html
<!--use:main-->
Dentro del html maestro existirán las definiciones, secciones que podrán ser reemplazadas por quienes utilicen dicha plantilla:
main.html
<!--define:title-->
<!--define:nav-->
<!--define:main-->
<!--define:footer-->
Para que una vista reemplace su contenido deberá seguir el siguiente formato
index.html
<!--define:title-->
Hello, world!
<!--/define:title-->
<!--define:main-->
<h1>Hello, world!</h1>
<!--/define:main-->
Para incluir secciones externas y segregar aún más nuestras vistas, puedes utilizar el control include de la siguiente manera:
main.html
<!--include:nav-->
<!--include:footer-->
Para renderizar un dato como un texto deberás seguir el siguiente formato:
index.html
<h1>{{data:doc.title}}</h1>
<!--
entre {{}} debe ir data:
seguido del objeto al cual quieres acceder, en este caso, doc.title
-->
Para renderizar contenido de manera condicional, es decir, si cumple o no una función x, deberás seguir el siguiente formato:
index.html
<!--if:doc.if===true-->
<h2>Este parrafo se muestra solo si el campo if del objeto es verdadero</h2>
<!--/if-->
Por último tenemos el control repeat el cual se repetirá en base a un arreglo de información. Debes seguir el siguiente formato:
index.html
<!--repeat:doc.fieldarray-->
<p>{{data:doc.fieldarray[index]}}</p>
<!--/repeat:doc.fieldarray-->
Si todo va bien, el sistema se levantará utilizando el motor de vistas. Si agregas nodemon, agilizarás aún más el proceso de desarrollo. Suerte y buenos códigos ;)
Cualquier comentario favor informar
MIT
Free Software, Hell Yeah!