Detailed explanation of the use of Jade tags in the node front-end template engine
php中世界最好的语言
Release： 2018-05-22 10:27:31
Original
1600 people have browsed it
This time I will bring you node front-endtemplate engineDetailed explanation of the use of Jade tags, nodefront-end templateNotesWhat are the precautions for using Jade tags in the engine, as follows This is a practical case, let’s take a look at it.
1. Document declaration
#When we start writing an html page, we must first write the DOCTYPE document declaration. Now it is usually the case Next we all use the HTML5 document declaration method, so how should we write it in jade?
There are two ways to write document declarations in jade:
We can write doctype html directly in the jade file
jade provides us with a simple writing method, (but it seems that jade does not recommend this method in the new version after the upgrade -_-||| )
Of course , jade also supports other types of document declarations by default, just use doctype to follow the following options. By default, jade supports:
var doctypes = exports.doctypes = {
'5': '<!DOCTYPE html>',
'xml': '<?xml version="1.0" encoding="utf-8" ?>',
'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
'1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};
Copy after login
doctype is not case-sensitive, so the following two have the same effect:
doctype Default
doctype default
Copy after login
For example: if we want to write an XHTML 1.0 Strict document declaration , you can write like this:
doctype strict
Copy after login
The compilation result is as follows:
Copy code The code is as follows:
##2、 Tag
The tag in jade is written very simply, it is just one word.
jade uses strict indentation to distinguish the beginning and end of tags. The default is 2 spaces to indicate indentation. If we want to write a label with content, for example, if we want to write a title, we only need to add a space after the label word, and then follow the content.
h1 this is a title.
p this is a paragraph.
Copy after login
The compilation result is:
this is a title.
this is a paragraph.
Sometimes, we will need to output some text in a special format or to improve the readability of the code, we need to display the following effect:
< ;p>
1. 001 2. 002 3. 003 4. 004
Then what we should do in jade How to write it? Here jade provides us with two methods. The first is to add a | and a space in front of each line:
p
| 1. 001
| 2. 002
| 3. 003
| 4. 004
Copy after login
The second method is: follow the label name with a . Number. Then the content under this tag will be parsed into a code segment by jade:
p.
1. 001
2. 002
3. 003
4. 004
Copy after login
Now some students are confused and confused. What is the difference between the two methods? Here we have to talk about tag mixing. If we have such a requirement, we need to add a strong tag after 1 in the above code. First of all, let’s talk about the first case, our writing method:
p
| 1. 001
strong aaa
| 2. 002
| 3. 003
| 4. 004
Copy after login
If it is the second writing method, we need to write it like this:
p.
1. 001
<strong>aaa</strong>
2. 002
3. 003
4. 004
Copy after login
The compilation result is as follows ：
1. 001 aaa 2. 002 3. 003 4. 004
##3. Tag’s attribute and attribute value##h1 p and other tags, we usually write id & class attributes for them, so how should this be written in jade? The same syntax as zen coding, we only need to write like this:
h1#id.class this is a title.
p#j-text.text this is a paragraph.
Copy after login
The compilation result is:
this is a title.
this is a paragraph.
等等，那我要是想添加多个 class 怎么办呢？这样办：
h1#id.class1.class2.class3 this is a title.
p#j-text.text this is a paragraph.
Copy after login
编译结果为：
this is a title.
this is a paragraph.
什么？写 p 写烦了？那就不写咯。
#id.class
#id.class1.class2 this is a p without tags.
Copy after login
编译结果为：
this is a p without tags.
这里要说明一下，在 jade 的语法里面，只有 p 标签能够省略不写.
说完了 id 和 class，我们再来说一下标签其他的属性应该怎么添加。jade 里添加其他属性和值的语法也和 zen coding 类似，我们需要在标签后面加上小括号()，然后按照(属性名=属性值)的格式写就好了，如果有多个属性，中间以逗号进行分割。
比如上面的 id 和 class 的写法我们就可以改写成：
h1(id="id", class="class") this is a title.
p(id="j-text", class="text") this is a paragraph.
Copy after login
结果是一样的：
this is a title.
this is a paragraph.
说来说去还是这两个属性，烦了？那我们换一个吧：
a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html
The above is the detailed content of Detailed explanation of the use of Jade tags in the node front-end template engine. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
