This article mainly introduces the detailed introduction to the Node.js template engine Jade. Jade is a template engine for Node.js. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Jade is a template engine for Node.js. It draws on many aspects of Haml, so its syntax is similar to Haml. Moreover, Jade also supports spaces.
1. Tags
In Jade, any text at the beginning of a line is interpreted as an HTML tag by default. And you only need to write the opening tag-note: no need to add "<>". Because Jade will render the closing and opening tags for us. For example:
body
p
h1 Jade是Node.js的一个模板引擎
p 它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
p
footer © PandoraThe HTML code finally rendered by the Jade template above is:
##
<body>
<p>
<h1> Jade是Node.js的一个模板引擎</h1>
<p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p>
</p>
<p>
<footer>© Pandora</footer>
</p>
</body>2. Variables/data
The data passed to the Jade template is called locals. Use the equal sign "=" to output the value of a variable. (locals):{
title: "Express.js Guide",
body: "The Comprehensive Book on Express.js"
}##
h1= title p= body
<h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>
The value of reading variables in Jade is achieved through #{name}. For example:
- var title = "Node"
p I love #{title}The attributes follow the label and are enclosed by "()", and multiple attributes are separated by ",". For example: body (name1 = “value1”, name2 = “value2”).
p(id="content", class='main')
a(href='http://csdn.net', title='csdn主页'， target='_blank') CSDN:中国软件联盟
form(action="/login")
button(type="submit", value="提交")<p id="content" class='main'>
<a href='http://csdn.net' title='csdn主页' target='_blank'> CSDN:中国软件联盟</a>
<form action="/login">
<button type="submit" value="提交">
</form>
</p>Dynamic The attribute, that is, the value of the attribute is dynamic, that is, a variable is used to represent the value of the attribute. The symbol "|" can write HTML node content in a new line. For example:
a(href=url, data-active=isActive) label input(type="checkbox", checked=isChecked) | yes / no
{
url: "/logout",
isActive: true,
isChecked: false
}<a href="" data-active=" rel="external nofollow" data-active"></a> <label> <input type="checkbox" />yes / no </label>
5. Literal
To save trouble, you can write the class name and ID name directly after the tag name. For example:
p#content
p.lead.center
| Pandora_galen
#side-bar.pull-right // 没有标签名，默认为“p”
span.contact.span4
a(href="/contact" rel="external nofollow" rel="external nofollow" ) contact me<p id="content">
<p class="lead center">
Pandora_galen
<p id="side-bar" class="pull-right"></p>
<span class="contact span4">
<a href="/contact" rel="external nofollow" rel="external nofollow" > contact me </a>
</span>
</p>Use the "|" symbol to output the original text.
p | 我两年前开始学习前端 | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。
Use the "." symbol to create
# in HTML
##script.
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!"); Generated code:
##
<script>
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");
</script>Use -, = or! =These three symbols are used to write executable JS code in Jade that can manipulate the output. This is useful when outputting HTML elements and injecting JavaScript. However, you must be careful to avoid cross-site scripting (XSS) attacks when doing this. For example, you can use it! =Define an array, output tag data:
##- var arr = ['<a>', '<b>', '<c>']
ul
-for (var i = 0; i < arr.length; i++)
li
span= i
span!= "unescaped:" + arr[i] + "vs."
span= "escaped:" + arr[i]The generated code is as follows:
##
<ul> <li><span>0</span><span>unescaped: <a>vs. </span><span>escaped: <a></span></li> <li><span>1</span><span>unescaped: <b>vs. </span><span>escaped: <b></span></li> <li><span>2</span><span>unescaped: <c>vs. </span><span>escaped: <c></span></li> </ul>
9. Comments
Jade has two types of comments:
<1>. Output to the page— —“//” <2>. Not output to the page—— “//-”
##
// 普通注释，会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释，不会输出到HTML页面 p (id="footer") copyright 2016
<!-- 普通注释，会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
Add a prefix - to the if statement, so that you can write standard JavaScript code; you can also use it without prefixes or brackets , of course the latter is more concise.
- var user = {}
- user.admin = Math.random() > 0.5
if user.admin
button(class = "launch") Launch Spacecraft
else
button(class = "login") Log in
Note: There is no semicolon ";" at the end of each line of code
Iterate in Jade It's very simple, just use the each statement.
- var language = ['JavaScript', 'Node', 'Python', 'Java']
p
each value, index in language
p= index + "," + value
<p> <p>0. JavaScript</p> <p>1. Node</p> <p>2. Python</p> <p>3. Java</p> </p>
- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]
p
each value, key in languages
p= key + ":" + value<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>
The function of the filter is: Write in another language A text block;
p
:markdown
# practical Node.js
[This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.
13、case
- var coins = Math.round(Math.random() * 10)
case coins
when 0
p You have no money
when 1
p You have a coin
default
p You have #{coins} coins!14、Function mixin
If you have used sass or compass mixins, you will definitely be familiar with them, and the method of using mixins in Jade is basically the same as them.
声明的语法： mixin name(param, param2, …….)
调用： +name(data)
mixin row(items)
tr
each item, index in items
td= item
mixin table(tableData)
table
each row, index in tableData
+row(row)
- var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}]
+table(node)
- var js = [{name: 'backbone'}, {name: 'angular'}, {name: "emberJS"}]
+table(js)输出：
<table>
<tr>
<td>express</td>
</tr>
<tr>
<td>Jade</td>
</tr>
<tr>
<td>Handlebars</td>
</tr>
</table>
<table>
<tr>
<td>backbone</td>
</tr>
<tr>
<td>angular</td>
</tr>
<tr>
<td>emberJS</td>
</tr>
</table>15、include
include与引入JS和CSS外部文件很相似。它是自顶向下的方法： 在include其它文件的主文件里，我们决定要用什么。主文件会被首先处理（可以在主文件了定义数据locals），然后才会再接着处理主文件里所包含进来的子文件（子文件里可以使用主文件中定义的数据locals）；
包含一个Jade模板，用include /path/filename.
例如，在文件A里：
include ./includes/header
注意： 这里不用给模板名以及路径添加双引号或者单引号。
再例如，从父目录开始查找：
include ../includes/footer
注意：不能再文件名和文件路径中使用变量，因为includes/partials是在编译时处理的，而不是在执行时。
对于使用Sass、Compass又或者Less的人这些事再熟悉不过的了。
16、extend
extend与include“唱对台戏”，正好相反，extend是一种自底向上的方法。它所包含的文件决定它要替换主文件中哪那一部分。
使用格式： extend filename 和 block blockname;
示例-1： 在文件file_a里：
block header p some default text block content p loading... block footer p copyright
示例-2： 在文件file_b里：
extend file_a block header p very specific text block content .main-content
相关推荐：
node+express+jade制作简单网站指南_node.js
The above is the detailed content of Detailed explanation of Node.js template engine Jade. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
