Heim > Artikel > Web-Frontend > Beispielerklärung für die Node.js-Template-Engine-Jade
Dieser Artikel enthält hauptsächlich Tutorials, die auf der Node.js-Template-Engine basieren – schnelles Lernen und praktischer Kampf 1 von Jade. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Umgebungsvorbereitung:
Jade global installieren: npm install jade -g
Projekt package.json initialisieren: npm init --yes
Nachdem die Installation abgeschlossen ist, können Sie jade --help verwenden, um die Befehlszeilenverwendung von jade anzuzeigen
1. Erstellen Sie eine neue index.jade-Datei im Projektverzeichnis
inde.jade-Code :
doctype html html head meta(charset='utf-8') title body h3 欢迎学习jade
1. Das Etikett wird im eingerückten Format von HTML geschrieben
2. Das Attribut des Etiketts kann in Klammern stehen
3 Hat Inhalt, kann er direkt nach der Beschriftung geschrieben werden
Dann verwenden Sie jade -P index.jade in der Befehlszeile, um die Datei index.jade in eine Datei index.html zu kompilieren (organisiert den Code). ein eingerücktes Format. Ohne diesen Parameter wird index.html komprimiert und ist nicht lesbar.)
Kompilierter index.html-Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>欢迎学习jade</h3> </body> </html>
2 als Klasse, ID und mehrzeiliger Text
Neue index2.jade-Datei, der Code lautet wie folgt:
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
Führen Sie den Kompilierungsbefehl aus: jade -P
<!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>
1, p#box.box1.box2(class='box3') Diese Schreibweise ist Emmets Schreibweise #Es ist der ID-Attributpunkt (.) Es ist die Klassenattributklammer und es ist auch die Schreibweise des Attributs
2, #abc.box1.box2.box3, es gibt Überhaupt kein Beschriftungsname für das Element, standardmäßig werden diese Attribute zum p-Tag hinzugefügt
3, zwei Möglichkeiten, mehrzeiligen Text zu schreiben
p.
1, das ist
hello
2,test
3,string
Die erste Möglichkeit, mehrzeiligen Text zu schreiben: Dem p-Tag sollte gefolgt werden von a. Die ursprüngliche HTML-Tag-Schreibmethode
p
| 1, das ist
starkes Hallo
|
Die zweite Möglichkeit, mehrzeiligen Text zu schreiben: Verwenden Sie einen vertikalen Strich (|) vor dem Text, gefolgt vom Inhalt
3. Kommentare
Jade-Vorlagencode:
Nach der Kompilierung: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, einzeiliger Kommentar
<!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>
// p.box.box2 Dies ist nur ein p
2 Kommentare in Jade werden nicht in HTML-Dateien kompiliert
//- p#box.box2.box3
3, Kommentare blockieren (mehrzeilige Textkommentare), der kommentierte Inhalt muss Start a Neue Zeile
4. Achten Sie auf den Anzeigetext hinter dem Kontrollkästchen. Platzieren Sie ihn nicht neben dem Attribut, sondern schreiben Sie ihn hinter die vertikale Linie.
4. Jade-Vorlage aktuelles Menü
Der Effekt nach dem Kompilieren (jade index.jade -P -w): -w: Überwachen Sie die Änderung der Datei in Echtzeit und aktualisieren Sie das Ergebnis sofort nach dem Speichern Hot Loading, das in der modernen Front-End-Entwicklungstechnologie sehr beliebt istdoctype 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. Interpretationsvariablen
#{}: Variablen können erklärt werden, toUpperCase(): Variablen werden in Großbuchstaben konvertiertdoctype 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:;') 网游小说
Übergeben Sie die JSON-Dateidaten während der Kompilierung an die Vorlage,
Erstellen Sie neue data.json-Dateidaten
{ "content" : "跟着ghostwu学习jade" } index2.jade文件模板:Kompilierungsbefehl: jade index2.jade -P -O data. gibt eine JSON-Datei an und übergibt die Daten der JSON-Datei an die Vorlage
doctype html html head meta(charset='utf8') - var title = 'jade模板引擎学习-by ghostwu'; title #{title.toUpperCase()} body h3 #{content}
Kompiliertes Ergebnis:
Verwandte Empfehlungen:<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>JADE模板引擎学习-BY GHOSTWU</title> </head> <body> <h3>跟着ghostwu学习jade</h3> </body> </html>
Das obige ist der detaillierte Inhalt vonBeispielerklärung für die Node.js-Template-Engine-Jade. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!