Heim > Artikel > Web-Frontend > Eine ausführliche Erklärung zum Einstieg in Jade in Node.js

Eine ausführliche Erklärung zum Einstieg in Jade in Node.js

亚连Original: 2018-06-11 14:30:581222Durchsuche

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: „a8093152e673feb7aba1828c43532094“ 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 © 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 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=&#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>

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

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>

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

generierten Code in HTML zu erstellen:

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

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

In ähnlicher Weise generiert Stil c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927.

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 = [&#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>

Ein wesentlicher Unterschied zwischen der Template-Engine Jade und Handlers ist: Mit Jade kann fast alles JavaScript geschrieben werden Im Code beschränken sich die Entwickler jedoch auf eine kleine Anzahl integrierter und benutzerdefinierter Helfer.

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

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

Darüber hinaus gibt es „eslesse“, was weder „oder“ bedeutet! .

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

Jede Anweisung

Iteration in Jade 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 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.

Hinweis: Um den Markdown-Filter zu verwenden, müssen Sie das Markdown-Modul sowie die Pakete Marked und Markdown NPM installieren.

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. 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: &#39;backbone&#39;}, {name: &#39;angular&#39;}, {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

Hinweis: Es ist nicht erforderlich, doppelte oder einfache Anführungszeichen hinzuzufügen Geben Sie hier Anführungszeichen für den Namen und den Pfad der Vorlage ein.

Ein weiteres Beispiel: Starten Sie die Suche im übergeordneten Verzeichnis:

include ../includes/footer

Hinweis: Sie können keine Variablen in Dateinamen und Dateipfaden verwenden, da Includes/Partials zur Kompilierungszeit und nicht zur Ausführungszeit verarbeitet werden .

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

上面是我整理给大家的，希望今后会对大家有帮助。

在微信小程序中如何才能获取图片信息

在微信小程序中如何实现animation动画

使用百度地图如何去掉marker覆盖物具体该如何解决

在微信小程序中如何获取用户信息（详细教程）

在微信小程序中如何才可以获取用户手机号信息

在Vue中通过header组件如何开发（详细教程）

利用jquery如何写出PC端轮播图（详细教程）

详细讲解有关实现react服务器渲染问题

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Methoden zum Einfügen von DOM-Objektknoten mithilfe von JSNächster Artikel：Zusammenfassung der Methoden zum Einfügen von DOM-Objektknoten mithilfe von JS

In Verbindung stehende Artikel

Mehr sehen