Maison > Article > interface Web > Explication de l'exemple de jade du moteur de modèle Node.js
Explication de l'exemple de jade du moteur de modèle Node.js
- 小云云original
- 2018-02-06 09:19:431648parcourir
Cet article vous propose principalement un tutoriel basé sur le moteur de template Node.js - jade quick learning and practices combat 1. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Préparation de l'environnement :
Installer jade globalement : npm install jade -g
Initialiser le package du projet.json : npm init --yes
Une fois l'installation terminée, vous pouvez utiliser jade --help pour afficher l'utilisation de la ligne de commande de jade
1. Créez un nouveau fichier index.jade dans le répertoire du projet
code inde.jade :
doctype html html head meta(charset='utf-8') title body h3 欢迎学习jade
1. L'étiquette est écrite selon le format d'indentation du HTML
2 L'attribut de l'étiquette peut être entre parenthèses
3. label a du contenu, il peut être écrit directement après le label
Ensuite, utilisez jade -P index.jade sur la ligne de commande pour compiler le fichier index.jade en un fichier index.html (organise le code. dans un format indenté. Sans ce paramètre, index.html sera compressé, peu propice à la lecture)
Code index.html compilé :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>欢迎学习jade</h3> </body> </html>
2. tels que la classe, l'identifiant et le texte multiligne
Nouveau fichier index2.jade, le code est le suivant :
doctype html html head meta(charset='utf8') title jade template engine body h1 jade template engine h1 jade template engine h1 jade template engine h1 jade template engine p#box.box1.box2(class='box3') #abc.box1.box2.box3 h3.box1.box2(class='abc def') a(href='http://www.taobao.com', target = 'blank') 淘宝 input(type='button', value='点我') br p. 1,this is <strong>hello</strong> 2,test 3,string p | 1, this is strong hello | 2, test | 3, test string
Exécutez la commande de compilation : jade -P 1, p#box.box1.box2(class='box3') Cette façon de faire. l'écriture est la façon d'écrire d'Emmet #C'est le point d'attribut id (.) C'est le support d'attribut de classe et c'est aussi la façon d'écrire l'attribut 2, #abc.box1.box2.box3, là n'y a pas de nom d'étiquette pour l'élément, la valeur par défaut est d'ajouter ces attributs à la balise p 3, deux façons d'écrire du texte multiligne p. 1,c'est La première façon d'écrire du texte sur plusieurs lignes : La balise p doit être suivi de a. La méthode d'écriture de la balise html originale p | 1, c'est 3. Commentaires code du modèle de jade : // p.box.box2 Ceci est un p 2, seuls les commentaires en jade ne seront pas compilés dans des fichiers html //- p#box.box2.box3 3, bloquer les commentaires (commentaires texte multilignes), le contenu commenté doit démarrer une nouvelle ligne 4. Faites attention au texte affiché derrière la case à cocher Ne le placez pas à côté de l'attribut et écrivez-le derrière la ligne verticale 4. Jade. menu actuel du modèle Transmettre les données du fichier json au modèle lors de la compilation, Créer de nouvelles données du fichier data.json Résultat compilé : Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>jade template engine</title>
</head>
<body>
<h1>jade template engine</h1>
<h1>jade template engine</h1>
<h1>jade template engine</h1>
<h1>jade template engine</h1>
<p id="box" class="box1 box2 box3"></p>
<p id="abc" class="box1 box2 box3"></p>
<h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a>
<input type="button" value="点我"><br>
<p>
1,this is
<strong>hello</strong>
2,test
3,string
</p>
<p> 1, this is<strong>hello</strong> 2, test
3, test string
</p>
</body>
</html>
hello
2,test
3,string
fort bonjour
| >
La deuxième façon d'écrire un texte multiligne : utilisez une barre verticale (|) devant le texte, suivie du contenu doctype html
html
head
meta(charset='utf8')
title jade模板引擎学习-by ghostwu
body
h3 单行注释
// p.box.box2 这是一段p
h3 不会编译到html文件的注释
//- p#box.box2.box3
h3 块注释,也叫多行注释
//-
input(type='checkbox', name='meinv', value='仙女') 仙女
input(type='checkbox', name='meinv', value='御姐') 御姐
h3 这里不是注释
input(type='checkbox', name='meinv', value='仙女')
| 仙女
input(type='checkbox', name='meinv', value='御姐')
| 御姐
1, commentaire sur une seule ligne <!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>jade模板引擎学习-by ghostwu</title>
</head>
<body>
<h3>单行注释</h3>
<!-- p.box.box2 这是一段p-->
<h3>不会编译到html文件的注释</h3>
<h3>块注释,也叫多行注释</h3>
<h3>这里不是注释</h3>
<input type="checkbox" name="meinv" value="仙女">仙女
<input type="checkbox" name="meinv" value="御姐">御姐
</body>
</html>
doctype html
html
head
meta(charset='utf8')
title jade模板引擎学习-by ghostwu
style.
* { margin : 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; color: white; }
#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
#nav li { float:left; }
#nav li.active { background:red; }
#nav li:hover { background:#09f; }
#nav li a{ padding: 5px 10px; }
body
p#nav
ul
li.active
a(href='javascript:;') 首页
li
a(href='javascript:;') 玄幻小说
li
a(href='javascript:;') 修真小说
li
a(href='javascript:;') 都世小说
li
a(href='javascript:;') 科幻小说
li
a(href='javascript:;') 网游小说
5. Variables d'interprétation doctype html
html
head
meta(charset='utf8')
- var title = 'jade模板引擎学习-by ghostwu';
title #{title.toUpperCase()}
style.
* { margin : 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; color: white; }
#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
#nav li { float:left; }
#nav li.active { background:red; }
#nav li:hover { background:#09f; }
#nav li a{ padding: 5px 10px; }
body
p#nav
ul
li.active
a(href='javascript:;') 首页
li
a(href='javascript:;') 玄幻小说
li
a(href='javascript:;') 修真小说
li
a(href='javascript:;') 都世小说
li
a(href='javascript:;') 科幻小说
li
a(href='javascript:;') 网游小说
{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:Commande de compilation : jade index2.jade -P -O data json -O spécifie un fichier json et transmet les données du fichier json au modèle doctype html
html
head
meta(charset='utf8')
- var title = 'jade模板引擎学习-by ghostwu';
title #{title.toUpperCase()}
body
h3 #{content}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>JADE模板引擎学习-BY GHOSTWU</title>
</head>
<body>
<h3>跟着ghostwu学习jade</h3>
</body>
</html>