So verwenden Sie das Jade-Tag der Node-Front-End-Template-Engine
php中世界最好的语言
Freigeben： 2018-05-30 11:10:36
Original
1403 Leute haben es durchsucht
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">'
};
Nach dem Login kopieren
doctype unterscheidet nicht zwischen Groß- und Kleinschreibung, daher haben die folgenden beiden den gleichen Effekt:
doctype Default
doctype default
Nach dem Login kopieren
Beispiel: Wenn wir eine XHTML 1.0 Strict-Dokumentdeklaration schreiben möchten , Sie können so schreiben:
doctype strict
Nach dem Login kopieren
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.
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.
Nach dem Login kopieren
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
Nach dem Login kopieren
. Dann wird der Inhalt unter diesem Tag von Jade in ein Codesegment analysiert:
p.
1. 001
2. 002
3. 003
4. 004
Nach dem Login kopieren
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
Nach dem Login kopieren
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
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.
Nach dem Login kopieren
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.
Nach dem Login kopieren
编译结果为：
this is a title.
this is a paragraph.
什么？写 p 写烦了？那就不写咯。
#id.class
#id.class1.class2 this is a p without tags.
Nach dem Login kopieren
编译结果为：
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.
Nach dem Login kopieren
结果是一样的：
this is a title.
this is a paragraph.
说来说去还是这两个属性，烦了？那我们换一个吧：
a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Jade-Tag der Node-Front-End-Template-Engine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
