PUG HTML
Introduction to Pug
Pug is a template engine implemented in JavaScript that allows you to dynamically generate HTML, like Thymeleaf in Java and Twig in PHP. Its syntax is inspired by Haml. It is therefore minimalist and based on indentations. I have never used pug but my first impressions are rather mixed.
Previously « Jade »
Before, Pug was called Jade. Only Jade has become a registered trademark and as the domain of the trademark is very close (both refer to the software world), the people in charge of the repository on Github have chosen to rename it.
Command to install Pug
npm install pug-cli -g or
yarn global add pug-cliTo compile a file (example: example.pug into example.html), we use:
pug -P example.pug
The Syntax
The names of tags in Pug are represented by selectors inspired by CSS syntax. In addition, its indentation dependent syntax makes it more condensed, more readable and less prone to problems of the absence of a closing tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marmiton</title>
<link href="fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&family=Sansita+Swashed:wght@300&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="../css/marmiton.css">
</head>
<body>
<div class="bloc">
<a href="">
<div class="image_bloc">
<img src="https://assets.afcdn.com/recipe/20171113/74835_w300h400c1cx2646cy1780.jpg" alt="">
</div>
</a>
<div class="wraper">
<span class="contenu_bloc_circle"></span>
<a href="" class="contenu_icon">
<i class="far fa-heart icon_heart"></i>
</a>
<a class="bloc_contenu" href="">
<div class="contenu_bloc">
<div class="bloc_text">
<div class="bloc_titre">
<h2>
Velouté potimarron-marron simple et goûteux
</h2>
</div>
</div>
</div>
</a>
</div>
<div class="type_bloc">Recette du jour</div>
</div>
</body>
</html>Nothing new in the above code now let’s pugified it.
doctype html
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title Marmiton
link(href='fontawesome-free-5.15.1-web/css/all.css', rel='stylesheet')
link(href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&family=Sansita+Swashed:wght@300&display=swap', rel='stylesheet')
link(rel='stylesheet', href='../css/marmiton.css')
.bloc
a(href='')
.image_bloc
img(src='https://assets.afcdn.com/recipe/20171113/74835_w300h400c1cx2646cy1780.jpg', alt='')
.wraper
span.contenu_bloc_circle
a.contenu_icon(href='')
i.far.fa-heart.icon_heart
a.bloc_contenu(href='')
.contenu_bloc
.bloc_text
.bloc_titre
h2
| Velouté potimarron-marron simple et goûteux
.type_bloc Recette du jour
A div tag is implicitly added when it is not associated with the css selector. We used dots in our css for a class, yes? Pug too! No more need to write the div. Make sure to wrap these attributes well as href. With that we have a full pug component, full of all the syntactic warmth you could possibly want in pug. The result here will be exactly the same as our original HTML component. It’s pretty darn quick to write too.
Attributes
Tag attributes look similar to HTML (with optional commas), but their values are just regular JavaScript.
a(href='//needemand.com') Needemand
|
|
a(class='veillepug' href='//needemand.com') Needemand
|
|
a(class='veillepug', href='//needemand.com') Needemandgives in html
<a href="//needemand.com">Needemand</a>
<a class="veillepug" href="//needemand.com">Needemand</a>
<a class="veillepug" href="//needemand.com">Needemand</a>Multiline Attributes
If you have many attributes, you can also spread them across many lines:
input(
type='checkbox'
name='agreement'
checked
)gives in html
<input type="checkbox" name="agreement" checked="checked" />Variables
You’re all set with learning pug’s condensed syntax, now let’s get into some more complex features. Variables are handy little buggers which let you store values and reuse them later on. This is really useful for stuff like your page title or link.
- var url = 'pug-test.html';
- var pageTitle = 'Veille technologie pug'
a(href='/' + url) Link
|
|
- url = 'https://example.com/'
a(href=url) Another link
h1 #{pageTitle} In pug we use - var to declare a variable, and = to assign a value. To reference those variables, we can use interpolation - a way to tell pug that the following text is actually a variable .
<a href="/pug-test.html">Link</a>
<a href="https://example.com/">Another link</a>
<h1>Veille technologie pug </h1>Install the htmlPugConverter on VSCode
Open the extension manager and find the htmlPugConvertor extension developed by waynehong. This extension is based on the html2pug and pug converters. Start the installation
The extension allows
- pug2html to convert Pug code to HTML.
- html2pug to convert HTMl code to Pug code.
The conversion of the Pug or HTML is done by selecting the code beforehand then by calling the VSCode palette (CMD + Shift + P) then pug
Conclusion
Pug is a powerful tool that makes coding faster. We have seen here that a tiny fraction of these possibilities. you will find more information on the official site of pug which includes other more interesting functionality such as the conditional, iteration or even case statement which is a shorthand for Java’s switch statement.
https://codepen.io/mimoduo/post/learn-pug-js-with-pugs
