All the content of the template must go into blocks, otherwise the engine does not know where to put them. Once this is done, you need to redefine blocks. Extending a base templateĪ template can extend a base template by using the extends keyword: extends home.pug head is intended to be used to add additional content to the heading, while the body content is made to be overridden by other pages. In this case one block, body, has some content, while head does not. Link(rel='stylesheet', href='css/main.css') Part of a template can be extended by using blocks: html In a Pug file you can include other Pug files: include otherfile.pug Defining blocksĪ well-organized template system will define a base template, and then all the other templates will extend from it. While is another kind of loop: - var n = 0 Installing Pug is as simple as running npm install:
#Variables pug template install#
This online converter from HTML to Jade (which is very similar, but a little different to Pug) will be a great help: Install Pug
If you are used to template engines that use HTML and interpolate variables like Handlebars (described next), you might run into issues, especially when you need to convert existing HTML to Pug. It takes the tag name as the first thing in a line, and the rest is the content that goes inside it. This template will create a p tag with the content Hello from Flavio.Īs you can see, Pug is quite special. Como se mencionó anteriormente, Jade es la versión anterior de Pug, específicamente Pug 1.0.Īunque la última versión de Jade tiene 3 años (en el momento de escribir este artículo, verano de 2018), sigue siendo la predeterminada en Express por razones de compatibilidad con versiones anteriores.Įl sitio web oficial de Pug es. También vea el diferencias entre Jade y PugĮxpress usa Jade como predeterminado. Aún puedes usar Jade (también conocido como Pug 1.0), pero en el futuro es mejor usar Pug 2.0. Es Jade 2.0.ĭebido a un problema de marca registrada, el nombre se cambió de Jade a Pug cuando el proyecto lanzó la versión 2 en 2016. Pug es el nuevo nombre de una cosa vieja. Los motores de plantilla nos permiten agregar datos a una vista y generar HTML de forma dinámica. ¿Qué es Pug? Es un motor de plantillas para aplicaciones Node.js del lado del servidor.Įxpress es capaz de manejar motores de plantillas del lado del servidor. Asignar variables a los valores de los elementos.Agregar atributos de identificación y clase a los elementos.Interpolar el valor de retorno de una función.Configurar Pug para que sea el motor de plantillas en Express.