Ein Jade -Tutorial für Anfänger

Ziemlich ordentlich, richtig?

<span><span><span><div> class<span>="movie-card"</span> id<span>="oceans-11"</span>>
  <span><span><span><h1 id="class-span-movie-title-span-gt"> class<span>="movie-title"</span>></h1></span>Ocean's 11<span><span></span>></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="/img/oceans-11.png" class="lazy" alt="Ein Jade -Tutorial für Anfänger" > src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul> class<span>="genre-list"</span>></ul></span>
</span>    <span><span><span><li>></li></span>Comedy<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Thriller<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

dieses Beispiel auf CodePen

anzeigen

Aber es hört hier nicht auf. Jade bietet eine spezielle Abkürzung für IDs und Klassen und vereinfacht unser Markup mithilfe einer vertrauten Notation weiter:

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster()
  ul.genre-list
    li Comedy
    li Thriller

dieses Beispiel auf CodePen

anzeigen

Wie Sie sehen, verwendet Jade die gleiche Syntax wie das, mit dem wir beim Schreiben von CSS -Selektoren bereits vertraut sind, und erleichtert es noch einfacher, Klassen zu erkennen.

Textblöcke

Nehmen wir an, Sie haben ein Absatz -Tag und möchten einen großen Textblock hineinlegen. Jade behandelt das erste Wort jeder Zeile als HTML -Tag - also was machst du?

Sie haben möglicherweise eine unschuldige Zeit im ersten Codebeispiel in diesem Artikel bemerkt. Hinzufügen einer Periode (Vollstopp) nach dem Tag zeigt an, dass alles in diesem Tag Text ist und Jade nicht mehr das erste Wort in jeder Zeile als HTML -Tag behandelt.

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

dieses Beispiel auf CodePen

anzeigen

und nur um den Punkt nach Hause zu fahren, wenn ich in diesem Beispiel den Zeitraum nach dem P -Tag entfernen würde, würde das kompilierte HTML das „I“ in dem Wort „Ich bin“ als Eröffnungs -Tag behandeln (in diesem Fall, es wäre das Tag).

leistungsstarke Merkmale

Jetzt, da wir die Grundlagen behandelt haben, werfen wir einen Blick auf einige leistungsstarke Funktionen, die Ihr Markup intelligenter machen. Wir werden uns die folgenden Funktionen in diesem Tutorial ansehen:

• Loops
• JavaScript
• Interpolation
• mixins

Verwenden Sie JavaScript in Jade

Jade wird mit JavaScript implementiert, sodass es super einfach ist, JavaScript in Jade zu verwenden. Hier ist ein Beispiel.

- var x = 5;
div
  ul
    - for (var i=1; i

<p> Was haben wir hier gerade gemacht?! Indem wir eine Linie mit einem Bindestrich starten, geben wir dem Jade -Compiler an, dass wir JavaScript verwenden möchten, und es funktioniert einfach, wie wir es erwarten würden. Hier ist, was Sie erhalten, wenn Sie den obigen Jade -Code für HTML kompilieren: </p>

<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

dieses Beispiel auf CodePen

anzeigen

Wir verwenden einen Bindestrich, wenn der Code keine direkte Ausgabe hinzufügt. Wenn wir JavaScript verwenden möchten, um etwas in Jade auszugeben, verwenden wir =. Lassen Sie uns den obigen Code optimieren, um eine Seriennummer anzuzeigen.

- var x = 5;
div
  ul
    - for (var i=1; i

<p> und voilà, wir haben jetzt Seriennummern: </p>

<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>1. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>2. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>3. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>4. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>5. Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

dieses Beispiel auf CodePen

anzeigen

In diesem Fall wäre eine geordnete Liste natürlich viel angemessener, aber Sie erhalten den Punkt. Wenn Sie sich jetzt Sorgen über XSS und HTML -Flucht machen, lesen Sie die Dokumente für weitere Informationen.

Loops

jade bietet eine hervorragende Schleifensyntax, damit Sie nicht auf JavaScript zurückgreifen müssen. Lassen Sie uns über ein Array gehen:

- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

und dies wird wie folgt kompilieren:

<span><span><span><div>>
  <span><span><span><h1 id="gt">></h1></span>Famous Droids from Star Wars<span><span></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>R2D2<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>C3PO<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>BB8<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span>
</div></span>></span></span>

dieses Beispiel auf CodePen

anzeigen

Sie können über Objekte iterieren und auch während der Loops verwenden. Weitere Informationen finden Sie in den Dokumenten.

Interpolation

Es kann ärgerlich werden, JavaScript in Text wie dieses p = "Hallo" "ProfileName" zu mischen. Wie geht es dir? ". Hat Jade eine elegante Lösung dafür? Sie wetten.

<span><span><span><div> class<span>="movie-card"</span> id<span>="oceans-11"</span>>
  <span><span><span><h1 id="class-span-movie-title-span-gt"> class<span>="movie-title"</span>></h1></span>Ocean's 11<span><span></span>></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="/img/oceans-11.png" class="lazy" alt="Ein Jade -Tutorial für Anfänger" > src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul> class<span>="genre-list"</span>></ul></span>
</span>    <span><span><span><li>></li></span>Comedy<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Thriller<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

dieses Beispiel auf CodePen

anzeigen

Ist das nicht ordentlich?

mixins

Mixins sind wie Funktionen. Sie nehmen Parameter als Eingabe an und geben Markup als Ausgabe an. Mixins werden mit dem Mixin -Schlüsselwort definiert.

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster()
  ul.genre-list
    li Comedy
    li Thriller

Sobald das Mixin definiert ist, können Sie das Mixin mit der Syntax aufrufen.

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

, die HTML wie folgt ausgeben:

- var x = 5;
div
  ul
    - for (var i=1; i


<h2 id="alles-zusammenfügen"> alles zusammenfügen </h2>
<p> Lassen Sie uns alles zusammenstellen, was wir bisher gelernt haben. Angenommen, wir haben eine schöne Reihe von Filmen, wobei jeder Artikel den Titel des Films, die Besetzung (ein Sub-Array), die Bewertung, das Genre, einen Link zur IMDB-Seite und den Bildpfad für das Poster des Films enthält. Das Array sieht ungefähr so ​​aus (White Space für Lesbarkeit hinzugefügt): </p>

<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

Wir haben 10 Filme und wollen für jeden von ihnen schöne Filmkarten erstellen. Zunächst planen wir nicht, den IMDB -Link zu verwenden. Wenn ein Film über 5 bewertet wird, geben wir ihm einen Daumen hoch, sonst geben wir ihm einen Daumen runter. Wir werden alle schönen Funktionen von JADE verwenden, um einen modularen Code zu schreiben, um Folgendes zu tun:

1. Erstellen Sie ein Mixin für eine Filmkarte
   
   • Iterieren Sie die Besetzungsliste und zeigen Sie die Schauspieler an. Wir werden dasselbe mit Genres tun.
   • Überprüfen Sie die Bewertung und entscheiden Sie, ob ein Daumen nach oben oder einen Daumen nach unten angezeigt werden soll.
2. durch die Filmliste iterieren und mit dem Mixin eine Karte pro Film erstellen.

Erstellen wir zuerst den Mixin.

- var x = 5;
div
  ul
    - for (var i=1; i

<p> Es ist viel los, aber ich bin sicher, dass es bekannt aussieht - wir haben das alles in diesem Tutorial behandelt. Jetzt müssen wir nur unser Mixin in einer Schleife verwenden: </p>

<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>1. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>2. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>3. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>4. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>5. Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

Das ist es. Ist das elegant oder was? Hier ist der endgültige Code.

- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

Und hier ist das kompilierte HTML:

<span><span><span><div>>
  <span><span><span><h1 id="gt">></h1></span>Famous Droids from Star Wars<span><span></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>R2D2<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>C3PO<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>BB8<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span>
</div></span>></span></span>

Aber warte eine Minute. Was ist, wenn wir jetzt zur IMDB -Seite des Films gehen möchten, wenn wir auf den Titel eines Films klicken? Wir können eine Zeile hinzufügen: a (href = move.imdburl) dem Mixin.

- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?

dieses Beispiel auf CodePen

anzeigen

Schlussfolgerung

Wir wussten nichts über Jade zum Bau einiger wunderschöner modularer Filmkarten. Jade hat noch viel mehr zu tun, aber ich habe einige Konzepte beschönigt, um die Dinge einfach zu halten. Ich hoffe also, dieses Tutorial hat Ihre Neugier geweckt, mehr zu erfahren.

Wichtiger Hinweis: Wie einige von Ihnen vielleicht bereits wissen, wurde Jade aufgrund eines Software -Markenanspruchs in PUG umbenannt. In Zukunft werden Artikel über Jade den neuen Namen "Mops" oder "Pugjs" verwenden.

häufig gestellte Fragen (FAQs) zum Jade -Tutorial für Anfänger

Was ist Jade und warum ist es für die Webentwicklung wichtig? Es bietet eine saubere, elegante Syntax, mit der Entwickler HTML -Vorlagen auf viel prägnantere Weise schreiben können. JADE ist wichtig in der Webentwicklung, da es den Zeitaufwand für den Schreiben von HTML -Code verringert und den Entwicklungsprozess effizienter macht. Es unterstützt auch Dynamic Code, was bedeutet, dass Sie Variablen und Ausdrücke einbeziehen können, die bei der Rendert der HTML bewertet werden.

Wie installiere ich Jade? JS und NPM (Node Package Manager) auf Ihrem Computer installiert. Sobald Sie diese haben, können Sie Jade auf Ihrem System weltweit installieren, indem Sie den Befehl npm installieren jade -g in Ihrem Terminal oder Eingabeaufforderung installieren. Auf diese Weise können Sie Jade aus einem Verzeichnis auf Ihrem Computer verwenden.

Wie kann ich HTML in Jade umwandeln? . Um es manuell zu tun, müssen Sie die Jade -Syntax verstehen und wie sie HTML abbildet. Zum Beispiel werden HTML -Tags zu Jade -Elementen, HTML -Attribute werden zu Jade -Attributen und so weiter. Online -Tools können diesen Prozess automatisieren, aber es ist immer noch wichtig, die zugrunde liegenden Conversion -Regeln zu verstehen.

Was sind die Hauptunterschiede zwischen Jade und HTML? Syntax. Jade verwendet Einrückung, um verschachtelte Elemente zu repräsentieren, und erfordert keine Schließungs -Tags, wodurch es prägnanter ist als HTML. HTML wird jedoch stärker eingesetzt und verstanden, und einige Entwickler finden ihre expliziten Schluss -Tags und die mangelnden Eindrückungsregeln leichter zu lesen und zu verstehen.

Wie verwende ich Variablen in Jade? In Jade kann mit der - Syntax definiert werden. Zum Beispiel definiert - var title = 'home' eine Variable namens Titel mit dem Wert "Home". Sie können diese Variable dann in Ihrer JADE -Vorlage verwenden, indem Sie sie mit #{} vorangestellt. Zum Beispiel würde H1 = Titel als

home

in html. Jade unterstützt eine Vielzahl von JavaScript-Konstrukten, einschließlich Variablen, Ausdrücken, Kontrollstrukturen (wie IF-ELSE-Anweisungen und für Schleifen) und Funktionen. Um JavaScript -Code in Ihre Jade -Vorlage aufzunehmen, können Sie ihn mit -. Verwenden des Schlüsselworts einschließen. Zum Beispiel würde der Header integriert den Inhalt der Header.jade -Datei zu diesem Zeitpunkt in der Vorlage.

Wie kommentiere ich in Jade?

Kommentare in Jade können mit // hinzugefügt werden. Zum Beispiel würde // Dies ist ein Kommentar würde Ihrem Jade -Code einen Kommentar hinzufügen. Beachten Sie, dass dieser Kommentar nicht in das gerenderte HTML aufgenommen wird. Zum Beispiel ist P Dies ist ein Text, der als

in HTML ein Text

rendern würde. Sie können auch die Markdown-Syntax in JADE verwenden, indem Sie Ihren Text mit: markdown- Code. Wenn beim Rendern einer Jade -Vorlage ein Fehler auftritt, stellt Jade eine Ausnahme aus, die Sie angemessen fangen und verarbeiten können.

Das obige ist der detaillierte Inhalt vonEin Jade -Tutorial für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!