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: „<>“ 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 © 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 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 me<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!");<script>
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");
</script>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]<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>
9. Kommentare
Jade hat zwei Arten von Kommentaren:
<1> ><2>. Nicht auf der Seite ausgegeben - "//-"// 普通注释，会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释，不会输出到HTML页面 p (id="footer") copyright 2016
<!-- 普通注释，会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
10. if-Anweisung
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
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
<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 + ":" + valueAusgabe:
<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>
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.
- 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/header
include ../includes/footer
对于使用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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1207
24
Ist NodeJS ein Backend-Framework?
Apr 21, 2024 am 05:09 AM
Node.js kann als Backend-Framework verwendet werden, da es Funktionen wie hohe Leistung, Skalierbarkeit, plattformübergreifende Unterstützung, ein umfangreiches Ökosystem und einfache Entwicklung bietet.
So verbinden Sie NodeJS mit der MySQL-Datenbank
Apr 21, 2024 am 06:13 AM
Um eine Verbindung zu einer MySQL-Datenbank herzustellen, müssen Sie die folgenden Schritte ausführen: Installieren Sie den MySQL2-Treiber. Verwenden Sie mysql2.createConnection(), um ein Verbindungsobjekt zu erstellen, das die Hostadresse, den Port, den Benutzernamen, das Passwort und den Datenbanknamen enthält. Verwenden Sie „connection.query()“, um Abfragen durchzuführen. Verwenden Sie abschließend Connection.end(), um die Verbindung zu beenden.
Was sind die globalen Variablen in NodeJS?
Apr 21, 2024 am 04:54 AM
Die folgenden globalen Variablen sind in Node.js vorhanden: Globales Objekt: global Kernmodul: Prozess, Konsole, erforderlich Laufzeitumgebungsvariablen: __dirname, __filename, __line, __column Konstanten: undefiniert, null, NaN, Infinity, -Infinity
Was ist der Unterschied zwischen den Dateien npm und npm.cmd im Installationsverzeichnis von nodejs?
Apr 21, 2024 am 05:18 AM
Es gibt zwei npm-bezogene Dateien im Node.js-Installationsverzeichnis: npm und npm.cmd. Die Unterschiede sind wie folgt: unterschiedliche Erweiterungen: npm ist eine ausführbare Datei und npm.cmd ist eine Befehlsfensterverknüpfung. Windows-Benutzer: npm.cmd kann über die Eingabeaufforderung verwendet werden, npm kann nur über die Befehlszeile ausgeführt werden. Kompatibilität: npm.cmd ist spezifisch für Windows-Systeme, npm ist plattformübergreifend verfügbar. Nutzungsempfehlungen: Windows-Benutzer verwenden npm.cmd, andere Betriebssysteme verwenden npm.
PI -Knotenunterricht: Was ist ein PI -Knoten? Wie installiere und richte ich einen PI -Knoten ein?
Mar 05, 2025 pm 05:57 PM
Detaillierte Erläuterungs- und Installationshandbuch für Pinetwork -Knoten In diesem Artikel wird das Pinetwork -Ökosystem im Detail vorgestellt - PI -Knoten, eine Schlüsselrolle im Pinetwork -Ökosystem und vollständige Schritte für die Installation und Konfiguration. Nach dem Start des Pinetwork -Blockchain -Testnetzes sind PI -Knoten zu einem wichtigen Bestandteil vieler Pioniere geworden, die aktiv an den Tests teilnehmen und sich auf die bevorstehende Hauptnetzwerkveröffentlichung vorbereiten. Wenn Sie Pinetwork noch nicht kennen, wenden Sie sich bitte an was Picoin ist? Was ist der Preis für die Auflistung? PI -Nutzung, Bergbau und Sicherheitsanalyse. Was ist Pinetwork? Das Pinetwork -Projekt begann 2019 und besitzt seine exklusive Kryptowährung PI -Münze. Das Projekt zielt darauf ab, eine zu erstellen, an der jeder teilnehmen kann
Gibt es einen großen Unterschied zwischen NodeJS und Java?
Apr 21, 2024 am 06:12 AM
Die Hauptunterschiede zwischen Node.js und Java sind Design und Funktionen: Ereignisgesteuert vs. Thread-gesteuert: Node.js ist ereignisgesteuert und Java ist Thread-gesteuert. Single-Threaded vs. Multi-Threaded: Node.js verwendet eine Single-Threaded-Ereignisschleife und Java verwendet eine Multithread-Architektur. Laufzeitumgebung: Node.js läuft auf der V8-JavaScript-Engine, während Java auf der JVM läuft. Syntax: Node.js verwendet JavaScript-Syntax, während Java Java-Syntax verwendet. Zweck: Node.js eignet sich für I/O-intensive Aufgaben, während Java für große Unternehmensanwendungen geeignet ist.
Ist NodeJS eine Back-End-Entwicklungssprache?
Apr 21, 2024 am 05:09 AM
Ja, Node.js ist eine Backend-Entwicklungssprache. Es wird für die Back-End-Entwicklung verwendet, einschließlich der Handhabung serverseitiger Geschäftslogik, der Verwaltung von Datenbankverbindungen und der Bereitstellung von APIs.
So stellen Sie das NodeJS-Projekt auf dem Server bereit
Apr 21, 2024 am 04:40 AM
Serverbereitstellungsschritte für ein Node.js-Projekt: Bereiten Sie die Bereitstellungsumgebung vor: Erhalten Sie Serverzugriff, installieren Sie Node.js, richten Sie ein Git-Repository ein. Erstellen Sie die Anwendung: Verwenden Sie npm run build, um bereitstellbaren Code und Abhängigkeiten zu generieren. Code auf den Server hochladen: über Git oder File Transfer Protocol. Abhängigkeiten installieren: Stellen Sie eine SSH-Verbindung zum Server her und installieren Sie Anwendungsabhängigkeiten mit npm install. Starten Sie die Anwendung: Verwenden Sie einen Befehl wie node index.js, um die Anwendung zu starten, oder verwenden Sie einen Prozessmanager wie pm2. Konfigurieren Sie einen Reverse-Proxy (optional): Verwenden Sie einen Reverse-Proxy wie Nginx oder Apache, um den Datenverkehr an Ihre Anwendung weiterzuleiten
