Ausführliche Erläuterung der Node.js-Vorlagen-Engine Jade-js-Tutorial-php.cn

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 © Pandora

Nach dem Login kopieren

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>

Nach dem Login kopieren

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"
}

Nach dem Login kopieren

Jade-Code:

h1= title
p= body

Nach dem Login kopieren

Rendering Ausgabe-HTML:

<h1>Express.js Guide</h1>
<p>The Comprehensive Book on Express.js</p>

Nach dem Login kopieren

3. Variablen lesen

Der Wert der Variablen in Jade wird über #{ name gelesen } zu erreichen. Zum Beispiel:

- var title = "Node"

p I love #{title}

Nach dem Login kopieren

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=&#39;main&#39;)
  a(href=&#39;http://csdn.net&#39;, title=&#39;csdn主页&#39;， target=&#39;_blank&#39;) CSDN:中国软件联盟
  form(action="/login")
    button(type="submit", value="提交")

Nach dem Login kopieren

Ausgabe:

<p id="content" class=&#39;main&#39;>
  <a href=&#39;http://csdn.net&#39; title=&#39;csdn主页&#39; target=&#39;_blank&#39;> CSDN:中国软件联盟</a>
  <form action="/login">
    <button type="submit" value="提交">
  </form>
</p>

Nach dem Login kopieren

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

Nach dem Login kopieren

Für die obige Vorlage bereitgestellte Daten:

{
  url: "/logout",
  isActive: true,
  isChecked: false
}

Nach dem Login kopieren

Ausgabe nach dem endgültigen Rendering HTML:

<a href="" data-active=" rel="external nofollow" data-active"></a>
<label>
  <input type="checkbox" />yes / no
</label>

Nach dem Login kopieren

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 me

Nach dem Login kopieren

gerendertes 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>

Nach dem Login kopieren

Text

Verwenden Sie das „|“-Symbol, um den Originaltext auszugeben.

p 
  | 我两年前开始学习前端
  | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。

Nach dem Login kopieren

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!");

Nach dem Login kopieren

Generierter Code:

<script>
  console.log("Hello world!");
  setTiemout(function() {
    window.location.href = "http://csdn.net"
  }, 1000);

  console.log("Good bye!");
</script>

Nach dem Login kopieren

In ähnlicher Weise generiert style