This article mainly introduces the detailed introduction to the Node.js template engine Jade. Jade is a template engine for Node.js. Now I will share it with you and give you a reference.
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 id="nbsp-Jade是Node-js的一个模板引擎"> Jade是Node.js的一个模板引擎</h1>
<p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p>
</p>
<p>
<footer>© Pandora</footer>
</p>
</body>Note: If no tag name is written, the default is the p tag.
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"
}Jade code:
h1= title p= body
Rendered output HTML:
<h1 id="Express-js-nbsp-Guide">Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>
3. Read variables
Reading the value of a variable in Jade is achieved through #{name}. For example:
- var title = "Node"
p I love #{title}The value of the variable is processed when the template is compiled, so do not use it in executable JavaScript(-).
4. Attributes
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="提交")Output:
<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 attributes:
Dynamic attributes means that 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
The data provided to the above template:
{
url: "/logout",
isActive: true,
isChecked: false
}The HTML output after final rendering:
<a href="" data-active=" rel="external nofollow" data-active"></a> <label> <input type="checkbox" />yes / no </label>
Note: The attribute value of false is used when outputting HTML code will be ignored; when no attribute value is passed in, it will default to true.
5. Literal
To save trouble, you can write the class directly after the tag name name and ID 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 meRendered output HTML:
<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>6, text
Use the "|" symbol to output the original text.
p | 我两年前开始学习前端 | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。
7. Script and Style blocks
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>Similarly, style. generates .
8. JavaScript code
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 and 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>
One of the main differences between the template engine Jade and Handlebars is: Jade allows almost all JavaScript to be written in the code ; However, Handlebars limit developers to a small number of built-in and custom helpers.
9. Comments
There are two types of Jade comments:
. Output to the page - "//"
. Not output to the page - "//-"
// 普通注释，会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释，不会输出到HTML页面 p (id="footer") copyright 2016
Output:
<!-- 普通注释，会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
10, if statement
Add a prefix - to the if statement, so that you can write standard JavaScript code; you can also use it without the prefix or parentheses, 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 inIn addition, there is unless, which is equivalent to no or! .
Note: There is no semicolon ";" at the end of each line of code
11. Each statement
Iteration in Jade is very simple. Just use the each statement.
- var language = ['JavaScript', 'Node', 'Python', 'Java']
p
each value, index in language
p= index + "," + valueOutput:
<p> <p>0. JavaScript</p> <p>1. Node</p> <p>2. Python</p> <p>3. Java</p> </p>
Example 2:
- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]
p
each value, key in languages
p= key + ":" + valueOutput:
<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>
12, Filter
The function of the filter is: Use another language to write 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.Note: To use the Markdown filter, you need to install the Markdown module, as well as the Marked and Markdown NPM packages.
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 mixin, you are sure It won't be unfamiliar, and the usage of mixin in Jade is basically the same as them.
Declaration syntax: mixin name(param, param2, …….)
Call: 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)Output:
<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 is very similar to introducing JS and CSS external files. It's a top-down approach: in the main file that includes other files, we decide what to use. The main file will be processed first (data locals can be defined in the main file), and then the sub-files included in the main file will be processed (the sub-files can use data locals defined in the main file);
To include a Jade template, use include /path/filename.
For example, in file A:
include ./includes/header
Note: There is no need to add double quotes or single quotes to the template name and path here. .
Another example, start searching from the parent directory:
include ../includes/footer
Note: You cannot use variables in file names and file paths, because includes/partials are processed at compile time, not at execution time .
对于使用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
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
The above is the detailed content of A detailed explanation of getting started with Jade in Node.js. For more information, please follow other related articles on the PHP Chinese website!
Vercel是什么？怎么部署Node服务？May 07, 2022 pm 09:34 PMVercel是什么？本篇文章带大家了解一下Vercel，并介绍一下在Vercel中部署 Node 服务的方法，希望对大家有所帮助！
node.js gm是什么Jul 12, 2022 pm 06:28 PMgm是基于node.js的图片处理插件，它封装了图片处理工具GraphicsMagick（GM）和ImageMagick（IM），可使用spawn的方式调用。gm插件不是node默认安装的，需执行“npm install gm -S”进行安装才可使用。
火了！新的JavaScript运行时：Bun，性能完爆NodeJul 15, 2022 pm 02:03 PM今天跟大家介绍一个最新开源的 javaScript 运行时：Bun.js。比 Node.js 快三倍，新 JavaScript 运行时 Bun 火了！
nodejs中lts是什么意思Jun 29, 2022 pm 03:30 PM在nodejs中，lts是长期支持的意思，是“Long Time Support”的缩写；Node有奇数版本和偶数版本两条发布流程线，当一个奇数版本发布后，最近的一个偶数版本会立即进入LTS维护计划，一直持续18个月，在之后会有12个月的延长维护期，lts期间可以支持“bug fix”变更。
聊聊Node.js中的多进程和多线程Jul 25, 2022 pm 07:45 PM大家都知道 Node.js 是单线程的，却不知它也提供了多进（线）程模块来加速处理一些特殊任务，本文便带领大家了解下 Node.js 的多进（线）程，希望对大家有所帮助！
node爬取数据实例：聊聊怎么抓取小说章节May 02, 2022 am 10:00 AMnode怎么爬取数据？下面本篇文章给大家分享一个node爬虫实例，聊聊利用node抓取小说章节的方法，希望对大家有所帮助！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Zend Studio 13.0.1
Powerful PHP integrated development environment
