Giới thiệu về Pug
Pug là gì? Đó là một công cụ mẫu cho các ứng dụng Node.js phía máy chủ.
Express có khả năng xử lý các công cụ mẫu phía máy chủ. Công cụ mẫu cho phép chúng tôi thêm dữ liệu vào chế độ xem và tạo HTML động.
Pug là tên mới của một thứ cũ. nó làNgọc 2.0.
Do vấn đề về nhãn hiệu, tên đã được đổi từ Jade thành Pug khi dự án phát hành phiên bản 2 vào năm 2016. Bạn vẫn có thể sử dụng Jade [hay còn gọi là Pug 1.0], nhưng về sau tốt nhất nên sử dụng Pug 2.0.
Cũng xemsự khác biệt giữa Jade và Pug
Express sử dụng Jade làm mặc định. Như đã nói ở trên, Jade là phiên bản cũ của Pug - cụ thể là Pug 1.0.
Mặc dù phiên bản cuối cùng của Jade đã được 3 năm tuổi [tại thời điểm viết bài, mùa hè 2018], nó vẫn là phiên bản mặc định trong Express vì lý do tương thích ngược.
Trang web chính thức của Pug là//pugjs.org/.
Pug trông như thế nào?
p Hello from FlavioThis template will create a p tag with the content Hello from Flavio.
As you can see, Pug is quite special. It takes the tag name as the first thing in a line, and the rest is the content that goes inside it.
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. This online converter from HTML to Jade [which is very similar, but a little different to Pug] will be a great help: //jsonformatter.org/html-to-jade
Install Pug
Installing Pug is as simple as running npm install:
Setup Pug to be the template engine in Express
and when initializing the Express app, we need to set it:
Your first Pug template
Create an about view:
and the template in views/about.pug:
p Hello from FlavioThis template will create a p tag with the content Hello from Flavio.
Interpolating variables in Pug
You can interpolate a variable using:
Interpolate a function return value
You can interpolate a function return value using:
Adding id and class attributes to elements
p#title p.titleSet the doctype
doctype html html head meta[charset='utf-8'] meta[http-equiv='X-UA-Compatible', content='IE=edge'] meta[name='description', content='Some description'] meta[name='viewport', content='width=device-width, initial-scale=1']Adding scripts and styles
html head script[src="script.js"] script[src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'] link[rel='stylesheet', href='css/main.css']Inline scripts
script alert['test']script. [function[b,o,i,l,e,r]{b.GoogleAnalyticsObject=l;b[l]||[b[l]= function[]{[b[l].q=b[l].q||[]].push[arguments]}];b[l].l=+new Date; e=o.createElement[i];r=o.getElementsByTagName[i][0]; e.src=//www.google-analytics.com/analytics.js; r.parentNode.insertBefore[e,r]}[window,document,script,ga]]; ga[create,UA-XXXXX-X];ga[send,pageview];
Loops
ul each color in ['Red', 'Yellow', 'Blue'] li= colorul each color, index in [Red, Yellow, Blue] li= 'Color number + index + ': + color
Conditionals
if name h2 Hello from #{name} else h2 Helloelse-if works too:
Another example:
if users.length > 2 each user in users ...Set variables
You can set variables in Pug templates:
- var name = 'Flavio' - var age = 35 - var roger = { name: 'Roger' } - var dogs = ['Roger', 'Syd']Incrementing variables
You can increment a numeric variable using ++:
age++Assigning variables to element values
p= namespan.age= ageIterating over variables
You can use for or each, they are interchangeable and there is no difference:
for dog in dogs li= dogul each dog in dogs li= dogYou can use .length to get the number of items:
p There are #{values.length}while is another kind of loop:
- var n = 0;ul while n