Detailed explanation of the use of Jade tags in the node front-end template engine

php中世界最好的语言

Release： 2018-05-22 10:27:31

Original

1676 people have browsed it

This time I will bring you node front-endtemplate engineDetailed explanation of the use of Jade tags, nodefront-end template NotesWhat 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.

doctype html
html
 head
 title
 body

Copy after login

The above code will be compiled into:

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body></body>
</html>

Copy after login

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:

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

Copy after login

编译结果为：

index.html

那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：

input(type="checkbox", name="all", checked, value="全选")

Copy after login

编译结果为：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！