Heim >Web-Frontend >js-Tutorial >So verwenden Sie das Jade-Tag der Node-Front-End-Template-Engine

So verwenden Sie das Jade-Tag der Node-Front-End-Template-Engine

php中世界最好的语言Original: 2018-05-30 11:10:361457Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die Node-Frontend- Template-Engine Jade-Tag verwenden und welche Vorsichtsmaßnahmen für die Verwendung der Node--Frontend-Vorlage gelten Motor-Jade-Tag, wie folgt: Dies ist ein praktischer Fall, schauen wir uns ihn an.

1. Dokumentdeklaration

Wenn wir mit dem Schreiben einer HTML-Seite beginnen, müssen wir zuerst die DOCTYPE-Dokumentdeklaration schreiben case Als nächstes verwenden wir alle die HTML5-Dokumentdeklarationsmethode. Wie sollen wir sie also in Jade schreiben?

Es gibt zwei Möglichkeiten, Dokumentdeklarationen in Jade zu schreiben:

Wir können Doctype-HTML direkt in die Jade-Datei schreiben
Jade stellt uns eine einfache Schreibmethode zur Verfügung (aber es scheint, dass Jade diese Methode in der neuen Version nach dem Upgrade nicht empfiehlt -_-||| )

Natürlich , Jade unterstützt standardmäßig auch andere Arten von Dokumentdeklarationen. Verwenden Sie einfach doctype, um die folgenden Optionen zu befolgen. Standardmäßig unterstützt Jade:

var doctypes = exports.doctypes = {
 '5': '<!DOCTYPE html>',
 'xml': '<?xml version="1.0" encoding="utf-8" ?>',
 'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
 'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
 '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
 'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
 'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};

doctype unterscheidet nicht zwischen Groß- und Kleinschreibung, daher haben die folgenden beiden den gleichen Effekt:

doctype Default
doctype default

Beispiel: Wenn wir eine XHTML 1.0 Strict-Dokumentdeklaration schreiben möchten , Sie können so schreiben:

doctype strict

Das Kompilierungsergebnis ist wie folgt:

Code kopieren Der Code ist wie folgt:

2. Tags

Die Schreibweise von Tags in Jade ist sehr einfach, es ist nur ein Wort.

doctype html
html
 head
 title
 body

Der obige Code wird kompiliert in:

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body></body>
</html>

jade verwendet eine strikte Einrückung, um den Anfang und das Ende von Tags zu unterscheiden. Der Standardwert ist 2 Leerzeichen, um die Einrückung anzuzeigen.

Wenn wir beispielsweise eine Beschriftung mit Inhalt schreiben möchten, wenn wir einen Titel schreiben möchten, müssen wir nach dem Beschriftungswort nur ein Leerzeichen hinzufügen und dann dem Inhalt folgen.

h1 this is a title.
p this is a paragraph.

Das Kompilierungsergebnis ist:

das ist ein Titel.

das ist ein Absatz.

Manchmal müssen wir Text in einem speziellen Format ausgeben oder um die Lesbarkeit des Codes zu verbessern, müssen wir den folgenden Effekt anzeigen:

< ;p>
1. 001
2. 002
3. 003
4. 004

Was wir dann tun sollten jade Wie schreibt man es? Hier bietet uns jade zwei Methoden an:

p
 | 1. 001
 | 2. 002
 | 3. 003
 | 4. 004

. Dann wird der Inhalt unter diesem Tag von Jade in ein Codesegment analysiert:

Jetzt sind einige Schüler verwirrt und verwirrt. Was ist der Unterschied zwischen den beiden Methoden? Hier müssen wir über das Mischen von Tags sprechen. Wenn wir eine solche Anforderung haben, müssen wir im obigen Code nach 1 ein starkes Tag hinzufügen.

Lassen Sie uns zunächst über den ersten Fall sprechen und wie wir ihn schreiben:

p
 | 1. 001
 strong aaa
 | 2. 002
 | 3. 003
 | 4. 004

Wenn es sich um die zweite Schreibweise handelt, müssen wir ihn so schreiben:

p.
 1. 001
 <strong>aaa</strong>
 2. 002
 3. 003
 4. 004

Das Kompilierungsergebnis ist wie folgt:

1. 001
aaa
2. 002
3. 003
4. 004

3. Attribut und Attributwert

h1 p und andere Tags, wir schreiben normalerweise ID- und Klassenattribute für sie, also wie soll das in Jade geschrieben werden? Dieselbe Syntax wie bei der Zen-Codierung, wir müssen nur so schreiben:

h1#id.class this is a title.
p#j-text.text this is a paragraph.

Das Kompilierungsergebnis ist:

das ist ein Absatz.

等等，那我要是想添加多个 class 怎么办呢？这样办：

h1#id.class1.class2.class3 this is a title.
p#j-text.text this is a paragraph.

编译结果为：

this is a title.

this is a paragraph.

什么？写 p 写烦了？那就不写咯。

#id.class
#id.class1.class2 this is a p without tags.

编译结果为：

this is a p without tags.

这里要说明一下，在 jade 的语法里面，只有 p 标签能够省略不写.

说完了 id 和 class，我们再来说一下标签其他的属性应该怎么添加。jade 里添加其他属性和值的语法也和 zen coding 类似，我们需要在标签后面加上小括号()，然后按照(属性名=属性值)的格式写就好了，如果有多个属性，中间以逗号进行分割。

比如上面的 id 和 class 的写法我们就可以改写成：

h1(id="id", class="class") this is a title.
p(id="j-text", class="text") this is a paragraph.

结果是一样的：

this is a title.

this is a paragraph.

说来说去还是这两个属性，烦了？那我们换一个吧：

a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html

编译结果为：

index.html

那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：

input(type="checkbox", name="all", checked, value="全选")

编译结果为：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen