Dieser Artikel stellt hauptsächlich die detaillierte Einführung in die Node.js-Vorlagen-Engine vor. Jade ist eine Vorlagen-Engine für Node.js. Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden . Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
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: „<>“ muss nicht hinzugefügt werden. Weil Jade die schließenden und öffnenden Tags für uns rendern wird. Zum Beispiel:
body
p
h1 Jade是Node.js的一个模板引擎
p 它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
p
footer © PandoraDer 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 lokale Daten 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
Rendering Ausgabe-HTML:
<h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>
3. Variablen lesen
Der Wert der Variablen in Jade wird über #{ name gelesen } zu erreichen. 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, 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>Dynamische Eigenschaften:
Dynamische Attribute bedeuten, dass der Wert des Attributs dynamisch ist, d. h. eine Variable wird verwendet, 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
}Ausgabe nach dem endgültigen Rendering HTML:
<a href="" data-active=" rel="external nofollow" data-active"></a> <label> <input type="checkbox" />yes / no </label>
Hinweis: Attribute mit dem Wert „false“ werden bei der Ausgabe von HTML-Code ignoriert; wenn kein Attributwert übergeben wird, wird standardmäßig „true“ verwendet.
5. Literal
Um Ärger zu vermeiden, können Sie den Klassennamen und den ID-Namen direkt nach dem Tag-Namen schreiben. 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>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
<🎜 zu erstellen HTML >script.
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");<script>
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");
</script>