One of the famous template engine of node.js - Jade recently changes name to Pug.
Pug has easy grammer and it doesn’t have tag - so write html more effectively.
Insatll
node install pug --save
Set pug to express project
When using pug, you have to set it to app.js (project js)
var express = require('express');
...
// When you want to see html output with linebreaks
app.locals.pretty = true;
// set view engine to pug
app.set('view engine', 'pug');
// and add views directory
// have to put all pug files here
app.set('views', './views');
Add routing
when using template engine like pug use ‘render’ instead of ‘send’. send(filename, object)
app.get('/template', function(req, res) {
// use 'temp.pug', and gives 'title' and 'content' object
res.render('temp', {title: 'test', content: 'test'})
})
Pug usage
When use pug, indentation is pretty important.
html
head
title pug test
body
h1 pug test
is render to
<html>
<head>
<title>pug test</title>
</head>
<body>
<h1>pug test</h1>
</body>
</html>
Using class and id with . and #
body
div.testClass
p#testId
is render to
<body>
<div class="testClass">
<p id="testId"></p>
</div>
</body>
Add attribute using ()
meta(charset='utf-8')
a(href='seulcode.tistory.com')
td(
rowspan=2
calspan=3
title
)
is render to
<meta charset='utf-8'>
<a href="seulcode.tistory.com"></a>
<td rowspan="2" colspan="3" title=""></td>
Add javascript code using - or = (when not using escaped, use !=)
- for (var x=0; x < 3; x++)
li test
is render to
<li>item</li>
<li>item</li>
<li>item</li>
- var myName = 'seul'
h1 myName
is render to
<h1>seul</h1>
Need more information, read Pug documentation
'frontend > node.js' 카테고리의 다른 글
| Node.js: supervisor install and usage (0) | 2018.04.07 |
|---|