Explication détaillée de l'utilisation des balises Jade dans le moteur de modèles front-end du nœud
php中世界最好的语言
Libérer： 2018-05-22 10:27:31
original
1594 Les gens l'ont consulté
Cette fois, je vous apporte une explication détaillée de l'utilisation de la balise Jade dans le moteur de modèles front-end Quelles sont les précautions lors de l'utilisation de la balise Jade dans le. node modèle frontal moteur, comme suit C'est un cas pratique, jetons-y un coup d'œil.
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.
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 :
p.
1. 001
2. 002
3. 003
4. 004
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 :
h1 p et autres balises, nous écrivons généralement des attributs d'identification et de classe pour eux, alors comment devrions-nous écrire cela 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
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
