Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Node.js-Vorlagen-Engine Jade

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

小云云Original: 2018-01-20 09:13:051865Durchsuche

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: „a8093152e673feb7aba1828c43532094“ 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

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 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=&#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="提交")

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>

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 me

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>

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

Generierter Code:

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

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

In ähnlicher Weise generiert style c9ccee2e6ea535a969eb3f532ad9fe89e90442d4aba9b6409c93259f982d1eec.

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 Etikettendaten aus:

- var arr = [&#39;<a>&#39;, &#39;<b>&#39;, &#39;<c>&#39;]
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>

Einer der Hauptunterschiede zwischen den Template-Engines Jade und Handlers besteht darin, dass Jade das Schreiben fast des gesamten JavaScripts in den Code zulässt.

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 2016

Ausgabe:

<!-- 普通注释，会输出到渲染后生成的HTML页面 -->
<p> Hello Jade content </p>

<p id="footer">copyright 2016</p>

10. If-Anweisung

Fügen Sie der if-Anweisung ein Präfix hinzu, damit Sie Standard-JavaScript-Code schreiben können. Das ist nicht nötig, keine Klammern, 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 es sei denn, was gleichbedeutend mit nicht oder ist! .

Hinweis: Es gibt kein Semikolon „;“ am Ende jeder Codezeile

Jede Anweisung

Iteration in Jade Es ist ganz einfach, verwenden Sie einfach die Each-Anweisung.

- var language = [&#39;JavaScript&#39;, &#39;Node&#39;, &#39;Python&#39;, &#39;Java&#39;]
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 = [&#39;JavaScript&#39;: -1, &#39;Node&#39;: 2, &#39;Python&#39;: 3, &#39;Java&#39;: 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 ist: Schreiben Sie einen Textblock in einer anderen Sprache.

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 das Marked- und Markdown-NPM installieren Pakete.

13. Fall

- 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. Funktionsmischung

Wenn Sie Sass- oder Compass-Mixins verwendet haben, sind Sie sicherlich mit ihnen vertraut, und die Methode zur Verwendung von Mixins in Jade ist im Grunde dieselbe.

声明的语法： mixin name(param, param2, …….)

调用： +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: &#39;backbone&#39;}, {name: &#39;angular&#39;}, {name: "emberJS"}]
+table(js)

输出：

<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与引入JS和CSS外部文件很相似。它是自顶向下的方法：在include其它文件的主文件里，我们决定要用什么。主文件会被首先处理（可以在主文件了定义数据locals），然后才会再接着处理主文件里所包含进来的子文件（子文件里可以使用主文件中定义的数据locals）；

包含一个Jade模板，用include /path/filename.

例如，在文件A里：

include ./includes/header

注意：这里不用给模板名以及路径添加双引号或者单引号。

再例如，从父目录开始查找：

include ../includes/footer

注意：不能再文件名和文件路径中使用变量，因为includes/partials是在编译时处理的，而不是在执行时。

对于使用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

In Verbindung stehende Artikel

Mehr sehen