Pug is a robust, flexible, feature-rich HTML template engine, developed specifically for Node.js platform. Pug was renamed evolved from Jade.
By an indentation (represented nesting relationships between labels) way to write procedural code, during compilation, the tag is not necessary to consider the question closed. You can accelerate the speed of writing code, but also to provide a convenient code reuse.
advantage:
1, no end tag
2, forcing indentation
3, code reuse and maintenance
4, the same label written with CSS
Build pug environment:
1, node.js and download npm
2, download pug, command: npm install pug-cli -g
an examination:
/ ************************************************* ******* property basic usage **************************************** ******************************* /
A (the href = ' Baidu.com ' ) Baidu equivalent to -> <a href= "Baidu.com"> Baidu </a> A (class = 'Button', the href = 'Baidu.com') Baidu like is equivalent to -> <a class="button" href="baidu.com"> Baidu </a>
Js form of expression
// - logged - var the Authenticated = to true body ( class = the Authenticated? ' Authed ' : ' anon ' ) is equivalent to -> <body class = " authed " > </ body>
Multiline property
input( type='checkbox' name='agreement' checked ) 等价于--> <input type="checkbox" name="agreement" checked="checked" />
Properties Embed:
- var URL = ' PUG-the test.html ' ; A (the href = ' / ' + URL) link | | - = URL ' https://example.com/ ' A (the href = URL) another link is equivalent to -> <a href= "/pug-test.html"> link </a> <a href= "https://example.com/"> another link </a>
Boolean property:
input(type='checkbox' checked) | | input(type='checkbox' checked=true) | | input(type='checkbox' checked=false) | | input(type='checkbox' checked=true.toString()) 等价于--> <input type="checkbox" checked="checked" /> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" checked="true" />
Style attributes:
style(Style) properties can be a string (just like other common attributes) may also be an object
a(style={color: 'red', background: 'green'})
等价于-->
<a style="color:red;background:green;"></a>
Class properties:
class(Class) attribute can be a string (just like other common attributes) may also be an array that contains more than one class name
- var classes = ['foo', 'bar', 'baz'] a(class=classes) | | //- the class attribute may also be repeated to merge arrays a.bang(class=classes class=['bing']) 等价于--> <a class="foo bar baz"></a> <a class="bang foo bar baz bing"></a>
It can also be mapped to a class name true or false an object, which is useful when using the conditional class.
- var currentUrl = '/about' a(class={active: currentUrl === '/'} href='/') Home | | a(class={active: currentUrl === '/about'} href='/about') About 等价于--> <a href="/">Home</a> <a class="active" href="/about">About</a>
/ ************************************************* ****** literal ****************************************** ****************** /
Class literals:
.Classname class can be used to define the syntax: a.button equivalent to -> <a class = "the Button"> </a> consider the use of div tag as the name of this behavior is so common, so if you omit off label name, then it is the default value: .content equivalent to ---> <div class = " Content " > </ div>
id literals:
#Idname ID can be used to define the syntax: A # main - Link is equivalent to -> <a id= "main-link"> </a> consider the use of div tag as the name of this behavior is so common, so if you omit the tag name if it is the default value: #content equivalent to -> <div the above mentioned id = " Content " > </ div>