Introduction
Pug is a server-side templating engine that can dynamically generate html markup. Generally, templating engines are very powerful tools when it comes to generating contents for the web. Pug is particularly amazing because of its easy syntax and full support for javascript codes in the markup.
Pug vs HTML
Well, if you already know the html tags then basically you can learn to write pug in a very short period of time. However, these are the some of differences between pug codes and html codes that are worth noting:
- Elements have no opening and closing tags, they are written as is. Element nesting is done through indentation (hey there, python fans).
- Classes and ids are specified in a syntax similar to CSS Selectors.
- General element attributes are enclosed within parenthesis.
So, now that we have noted this, let's go ahead to see how it works. Supposing we have the html markup below :
<body>
<div class=user>
<div class=user-name> Blue Writer </div>
<div class=user-email id=hidden> bluWrita@example.com </div>
<div class=user-status> Proffessional </div>
</div>
</body>
We can rewrite this markup more concisely in pug as follows :
body
div.user
div.user-name Blue Writer
div.user-email#hidden bluWrita@example.com
div.user-status Proffessional
Awesome right ?, You can see how easy and fun it is to generate document markup using pug.
Element Atributes
Okay, so at this point you might be wondering so classes start with a '.' and id's start with a '#', but what about other attributes like src, width, style, href etc. Well these attributes can easily be specified as comma-seperated key-value pairs in parenthesis (even the comma is optional). For example let's consider an anchor tag with class "home-link" and href value of '/home', this can be written in pug as
a.home-link(href="/home")
This is the general syntax for other attributes such as src, width, height, style etc. For example the markup below
<div class='header'>
<div class='links'>
<a href='/home' id='homelink'> Home </a>
<a href='/abput' id='aboutlink'> About </a>
<a href='/services' id='homelink'> Services </a>
</div>
<img src='/logo' width='60' height='60' class='logo' />
<div style='bottom-padding:10px'> ---- ---- </div>
</div>
written in pug looks like :
.header
.links
a(href='/home')#homelink Services
a(href='/about')#about Services
a(href='/services')#services Services
img.logo(src='/logo', width='60' height='60')
Conclusion
Pug is a very powerful templating language that has support for the many languages. The official documentation which talks about the more powerful features is located here. That's all for now. Thanks for reading.