Comment utiliser la balise Jade du moteur de modèles frontaux de nœuds-js tutoriel-php.cn

Comment utiliser la balise Jade du moteur de modèles frontaux de nœuds

php中世界最好的语言

Libérer： 2018-05-30 11:10:36

original

1436 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser le moteur de modèle front-end du nœud Balise Jade, et quelles sont les précautions pour utiliser le modèle front-end du nœud tag Jade du moteur, comme suit C'est un cas pratique, jetons-y un oeil.

1. Déclaration du document

Quand on commence à écrire une page html, il faut d'abord rédiger la déclaration du document DOCTYPE. Maintenant, c'est généralement le cas. cas Ensuite, nous utilisons tous la méthode de déclaration de document HTML5, alors comment devrions-nous l'écrire en jade ?

Il existe deux façons d'écrire des déclarations de document en jade :

On peut écrire du doctype html directement dans le fichier jade
jade nous fournit une méthode d'écriture simple, (mais il semble que jade ne recommande pas cette méthode dans la nouvelle version après la mise à jour -_-||| )

Bien sûr, jade prend également en charge d'autres types de déclarations de documents par défaut, utilisez simplement doctype pour suivre les options suivantes. Par défaut, jade prend en charge :

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">'
};

Copier après la connexion

doctype n'est pas sensible à la casse, donc les deux suivants ont le même effet :

doctype Default
doctype default

Copier après la connexion

Par exemple : si nous voulons écrire du XHTML 1.0 Déclaration de document stricte, vous pouvez écrire ainsi :

doctype strict

Copier après la connexion

Le résultat de la compilation est le suivant :

Copier le code Le code est le suivant :

2. Balises

La méthode d'écriture des balises en jade est très simple, c'est juste un mot.

doctype html
html
 head
 title
 body

Copier après la connexion

Le code ci-dessus sera compilé en :

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

Copier après la connexion

jade utilise une indentation stricte pour distinguer le début et la fin des balises. La valeur par défaut est de 2 espaces pour indiquer l'indentation.

Si nous voulons écrire une étiquette avec du contenu, par exemple, si nous voulons écrire un titre, il suffit d'ajouter un espace après le mot de l'étiquette, puis de suivre le contenu.

h1 this is a title.
p this is a paragraph.

Copier après la connexion

Le résultat de la compilation est :

ceci est un titre.

ceci est un paragraphe.< ; /p>

Parfois, nous devons afficher du texte dans un format spécial ou pour améliorer la lisibilité du code, nous devons afficher l'effet suivant :

1. 001
2. 002
3. 003
4. 004

Alors nous sommes dans jade Comment devons-nous écrire ? Ici, jade nous propose deux méthodes La première consiste à ajouter un | et un espace devant chaque ligne :

p
 | 1. 001
 | 2. 002
 | 3. 003
 | 4. 004

Copier après la connexion

La deuxième méthode est : après le nom de la balise Followed. par un . Ensuite, le contenu sous cette balise sera analysé en un segment de code par jade :

Copier après la connexion

Maintenant, certains étudiants sont confus et confus. Quelle est la différence entre ces deux méthodes ? Ici, nous devons parler de mélange de balises. Si nous avons une telle exigence, nous devons ajouter une balise forte après 1 dans le code ci-dessus.

Tout d'abord, parlons du premier cas, de la façon dont nous l'écrivons :

p
 | 1. 001
 strong aaa
 | 2. 002
 | 3. 003
 | 4. 004

Copier après la connexion

Si c'est la deuxième façon d'écrire, nous devons l'écrire comme ceci :

p.
 1. 001
 <strong>aaa</strong>
 2. 002
 3. 003
 4. 004

Copier après la connexion

Les résultats de la compilation sont les suivants :

1. 001
aaa
2. 002
3. 003
4. 004

3. attribut de la balise et valeur d'attribut

h1 p et autres balises, nous écrivons généralement des attributs d'identification et de classe pour elles, alors comment cela devrait-il être écrit en jade ? La même syntaxe que le codage zen, il suffit d'écrire comme ceci :

h1#id.class this is a title.
p#j-text.text this is a paragraph.

Copier après la connexion

Le résultat de la compilation est :

ceci est un titre.

ceci est un paragraphe.

等等，那我要是想添加多个 class 怎么办呢？这样办：

h1#id.class1.class2.class3 this is a title.
p#j-text.text this is a paragraph.

Copier après la connexion

编译结果为：

this is a title.

this is a paragraph.

什么？写 p 写烦了？那就不写咯。

#id.class
#id.class1.class2 this is a p without tags.

Copier après la connexion

编译结果为：

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.

Copier après la connexion

结果是一样的：

this is a title.

this is a paragraph.

说来说去还是这两个属性，烦了？那我们换一个吧：

a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html

Copier après la connexion

编译结果为：

index.html

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

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

Copier après la connexion

编译结果为：

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