Heim >Web-Frontend >js-Tutorial >Eine ausführliche Erklärung zum Einstieg in Jade in Node.js
Dieser Artikel stellt hauptsächlich die detaillierte Einführung in die Node.js-Vorlagen-Engine Jade vor. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.
Jade ist eine Template-Engine für Node.js. Sie basiert auf vielen Aspekten von Haml, daher ist ihre Syntax relativ ähnlich zu Haml. Darüber hinaus unterstützt Jade auch Leerzeichen.
1. Tags
In Jade wird jeder Text am Anfang einer Zeile standardmäßig als HTML-Tag interpretiert. Und Sie müssen nur den ersten Tag-Hinweis schreiben: „a8093152e673feb7aba1828c43532094“ muss nicht hinzugefügt werden. Weil Jade die schließenden und öffnenden Tags für uns rendern wird. Beispiel:
body p h1 Jade是Node.js的一个模板引擎 p 它借鉴了Haml的很多地方,所以语法上和Haml比较相近。 p footer © Pandora
Der endgültige HTML-Code, der von der obigen Jade-Vorlage gerendert wird, lautet:
<body> <p> <h1> Jade是Node.js的一个模板引擎</h1> <p>它借鉴了Haml的很多地方,所以语法上和Haml比较相近。</p> </p> <p> <footer>© Pandora</footer> </p> </body>
Hinweis: Wenn kein Tag-Name geschrieben wird, ist der Standardwert das p-Tag.
2. Variablen/Daten
Die an die Jade-Vorlage übergebenen Daten werden als Locals bezeichnet. Verwenden Sie das Gleichheitszeichen „=“, um den Wert einer Variablen auszugeben.
(Einheimische):
{ title: "Express.js Guide", body: "The Comprehensive Book on Express.js" }
Jade-Code:
h1= title p= body
gerenderte HTML-Ausgabe:
<h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>
3. Variablen lesen
Das Lesen des Werts einer Variablen in Jade wird durch #{name} erreicht. Zum Beispiel:
- var title = "Node" p I love #{title}
Der Wert der Variablen wird beim Kompilieren der Vorlage verarbeitet. Verwenden Sie ihn daher nicht in ausführbarem JavaScript (-).
4. Attribute
Attribute folgen der Beschriftung und werden durch „()“ umschlossen, und mehrere Attribute werden durch "," getrennt. Beispiel: Körper (Name1 = „Wert1“, Name2 = „Wert2“).
p(id="content", class='main') a(href='http://csdn.net', title='csdn主页', target='_blank') CSDN:中国软件联盟 form(action="/login") button(type="submit", value="提交")
Ausgabe:
<p id="content" class='main'> <a href='http://csdn.net' title='csdn主页' target='_blank'> CSDN:中国软件联盟</a> <form action="/login"> <button type="submit" value="提交"> </form> </p>
Dynamisches Attribut:
Dynamisches Attribut bedeutet, dass der Wert des Attributs dynamisch ist, d. h. eine Variable verwendet wird um den Wert des Attributs darzustellen. Das Symbol „|“ kann HTML-Knoteninhalte in eine neue Zeile schreiben. Beispiel:
a(href=url, data-active=isActive) label input(type="checkbox", checked=isChecked) | yes / no
Für die obige Vorlage bereitgestellte Daten:
{ url: "/logout", isActive: true, isChecked: false }
Endgültig gerenderte HTML-Ausgabe:
<a href="" data-active=" rel="external nofollow" data-active"></a> <label> <input type="checkbox" />yes / no </label>
Hinweis: Bei der Ausgabe von HTML-Code werden Attribute mit dem Wert „false“ verwendet . wird ignoriert; wenn kein Attributwert übergeben wird, wird standardmäßig „true“ verwendet.
5. Um Ärger zu sparen, können Sie die Klasse direkt schreiben nach dem Tag-Namen und dem ID-Namen. Beispiel:
p#content p.lead.center | Pandora_galen #side-bar.pull-right // 没有标签名,默认为“p” span.contact.span4 a(href="/contact" rel="external nofollow" rel="external nofollow" ) contact megerendertes Ausgabe-HTML:
<p id="content"> <p class="lead center"> Pandora_galen <p id="side-bar" class="pull-right"></p> <span class="contact span4"> <a href="/contact" rel="external nofollow" rel="external nofollow" > contact me </a> </span> </p>
6. Text
Verwenden Sie das „|“-Symbol, um den Originaltext auszugeben.
p | 我两年前开始学习前端 | 在此之间,我学过了html, jQuery, JavaScript, Python, Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。
7. Skript- und Stilblöcke
Verwenden Sie das „.“-Symbol, um
script. console.log("Hello world!"); setTiemout(function() { window.location.href = "http://csdn.net" }, 1000); console.log("Good bye!");generierten Code in HTML zu erstellen:
<script> console.log("Hello world!"); setTiemout(function() { window.location.href = "http://csdn.net" }, 1000); console.log("Good bye!"); </script>In ähnlicher Weise generiert Stil c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927.
8. JavaScript-Code
Verwenden Sie -, = oder! =Diese drei Symbole werden verwendet, um ausführbaren JS-Code in Jade zu schreiben, der die Ausgabe manipulieren kann. Dies ist nützlich, wenn Sie HTML-Elemente ausgeben und JavaScript einfügen. Allerdings müssen Sie dabei vorsichtig sein, um Cross-Site-Scripting-Angriffe (XSS) zu vermeiden.
Sie können es zum Beispiel verwenden! =Definieren Sie ein Array und geben Sie Tag-Daten aus:- var arr = ['<a>', '<b>', '<c>'] ul -for (var i = 0; i < arr.length; i++) li span= i span!= "unescaped:" + arr[i] + "vs." span= "escaped:" + arr[i]Der generierte Code lautet wie folgt:
<ul> <li><span>0</span><span>unescaped: <a>vs. </span><span>escaped: <a></span></li> <li><span>1</span><span>unescaped: <b>vs. </span><span>escaped: <b></span></li> <li><span>2</span><span>unescaped: <c>vs. </span><span>escaped: <c></span></li> </ul>Ein wesentlicher Unterschied zwischen der Template-Engine Jade und Handlers ist: Mit Jade kann fast alles JavaScript geschrieben werden Im Code beschränken sich die Entwickler jedoch auf eine kleine Anzahl integrierter und benutzerdefinierter Helfer.
9. Kommentare
Jade hat zwei Arten von Kommentaren:
f35d6e602fd7d0f0edfa6f7d103c1b57 >2cc198a1d5eb0d3eb508d858c9f5cbdb. Nicht auf der Seite ausgegeben - "//-"// 普通注释,会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释,不会输出到HTML页面 p (id="footer") copyright 2016Ausgabe:
<!-- 普通注释,会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
Hinzufügen ein Präfix – zur if-Anweisung, damit Sie Standard-JavaScript-Code schreiben können, können Sie ihn auch ohne Präfix oder Klammern verwenden, letzteres ist natürlich prägnanter. - var user = {}
- user.admin = Math.random() > 0.5
if user.admin
button(class = "launch") Launch Spacecraft
else
button(class = "login") Log in
Darüber hinaus gibt es „eslesse“, was weder „oder“ bedeutet! .
Hinweis: Es gibt kein Semikolon „;“ am Ende jeder Codezeile
Jede AnweisungIteration in Jade einfach. Verwenden Sie einfach die Each-Anweisung. - var language = ['JavaScript', 'Node', 'Python', 'Java']
p
each value, index in language
p= index + "," + value
Ausgabe:
<p> <p>0. JavaScript</p> <p>1. Node</p> <p>2. Python</p> <p>3. Java</p> </p>
Beispiel 2:
- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1] p each value, key in languages p= key + ":" + value
Ausgabe:
<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>12. Filter
Die Funktion des Filters besteht darin: einen Textblock in einer anderen Sprache zu schreiben; p
:markdown
# practical Node.js
[This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.
Hinweis: Um den Markdown-Filter zu verwenden, müssen Sie das Markdown-Modul sowie die Pakete Marked und Markdown NPM installieren.
- var coins = Math.round(Math.random() * 10) case coins when 0 p You have no money when 1 p You have a coin default p You have #{coins} coins!
14. Funktionsmixin
Wenn Sie Sass oder Compass Mixin verwendet haben, sind Sie sicher Es wird ihnen vertraut sein und die Methode zur Verwendung von Mixin in Jade ist im Grunde die gleiche wie bei ihnen. Syntax der -Deklaration: mixin name(param, param2, …….)
Aufruf: +name(data)
mixin row(items) tr each item, index in items td= item mixin table(tableData) table each row, index in tableData +row(row) - var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}] +table(node) - var js = [{name: 'backbone'}, {name: 'angular'}, {name: "emberJS"}] +table(js)
Ausgabe:
<table> <tr> <td>express</td> </tr> <tr> <td>Jade</td> </tr> <tr> <td>Handlebars</td> </tr> </table> <table> <tr> <td>backbone</td> </tr> <tr> <td>angular</td> </tr> <tr> <td>emberJS</td> </tr> </table>
15. include
include ist der Einführung externer JS- und CSS-Dateien sehr ähnlich. Es handelt sich um einen Top-Down-Ansatz: In der Hauptdatei, die andere Dateien enthält, entscheiden wir, was wir verwenden. Die Hauptdatei wird zuerst verarbeitet (lokale Daten können in der Hauptdatei definiert werden), und dann werden die in der Hauptdatei enthaltenen Unterdateien verarbeitet (die Unterdateien können in der Hauptdatei definierte lokale Daten verwenden). 🎜> Um eine Jade-Vorlage einzuschließen, verwenden Sie include /path/filename.
Zum Beispiel in Datei A:include ./includes/headerHinweis: Es ist nicht erforderlich, doppelte oder einfache Anführungszeichen hinzuzufügen Geben Sie hier Anführungszeichen für den Namen und den Pfad der Vorlage ein. Ein weiteres Beispiel: Starten Sie die Suche im übergeordneten Verzeichnis:
include ../includes/footerHinweis: Sie können keine Variablen in Dateinamen und Dateipfaden verwenden, da Includes/Partials zur Kompilierungszeit und nicht zur Ausführungszeit verarbeitet werden .
对于使用Sass、Compass又或者Less的人这些事再熟悉不过的了。
16、extend
extend与include“唱对台戏”,正好相反,extend是一种自底向上的方法。它所包含的文件决定它要替换主文件中哪那一部分。
使用格式: extend filename 和 block blockname;
示例-1: 在文件file_a里:
block header p some default text block content p loading... block footer p copyright
示例-2: 在文件file_b里:
extend file_a block header p very specific text block content .main-content
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung zum Einstieg in Jade in Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!