Heim > Artikel > Web-Frontend > Beispielerklärung für die Node.js-Template-Engine-Jade

Beispielerklärung für die Node.js-Template-Engine-Jade

小云云Original: 2018-02-06 09:19:431710Durchsuche

Dieser Artikel enthält hauptsächlich Tutorials, die auf der Node.js-Template-Engine basieren – schnelles Lernen und praktischer Kampf 1 von Jade. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Umgebungsvorbereitung:

Jade global installieren: npm install jade -g

Projekt package.json initialisieren: npm init --yes

Nachdem die Installation abgeschlossen ist, können Sie jade --help verwenden, um die Befehlszeilenverwendung von jade anzuzeigen

1. Erstellen Sie eine neue index.jade-Datei im Projektverzeichnis

inde.jade-Code :

doctype html
html
  head
    meta(charset='utf-8')
    title
  body
    h3 欢迎学习jade

1. Das Etikett wird im eingerückten Format von HTML geschrieben

2. Das Attribut des Etiketts kann in Klammern stehen

3 Hat Inhalt, kann er direkt nach der Beschriftung geschrieben werden

Dann verwenden Sie jade -P index.jade in der Befehlszeile, um die Datei index.jade in eine Datei index.html zu kompilieren (organisiert den Code). ein eingerücktes Format. Ohne diesen Parameter wird index.html komprimiert und ist nicht lesbar.)

Kompilierter index.html-Code:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h3>欢迎学习jade</h3>
 </body>
</html>

2 als Klasse, ID und mehrzeiliger Text

Neue index2.jade-Datei, der Code lautet wie folgt:

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    p#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h3.box1.box2(class='abc def')
    a(href='http://www.taobao.com',
    target = 'blank') 淘宝
    input(type='button', value='点我')
    br
    p.
      1,this is
      <strong>hello</strong>
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

Führen Sie den Kompilierungsbefehl aus: jade -P ghostwu.html Kompilieren Sie index2.jade in die Datei ghostwu.html. Der kompilierte Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade template engine</title>
 </head>
 <body>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <p id="box" class="box1 box2 box3"></p>
  <p id="abc" class="box1 box2 box3"></p>
  <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a>
  <input type="button" value="点我"><br>
  <p>
   1,this is
   <strong>hello</strong>
   2,test
   3,string
  </p>
  <p> 1, this is<strong>hello</strong> 2, test
    3, test string
  </p>
 </body>
</html>

1, p#box.box1.box2(class='box3') Diese Schreibweise ist Emmets Schreibweise #Es ist der ID-Attributpunkt (.) Es ist die Klassenattributklammer und es ist auch die Schreibweise des Attributs

2, #abc.box1.box2.box3, es gibt Überhaupt kein Beschriftungsname für das Element, standardmäßig werden diese Attribute zum p-Tag hinzugefügt

3, zwei Möglichkeiten, mehrzeiligen Text zu schreiben

1, das ist
hello
2,test
3,string

Die erste Möglichkeit, mehrzeiligen Text zu schreiben: Dem p-Tag sollte gefolgt werden von a. Die ursprüngliche HTML-Tag-Schreibmethode

| 1, das ist
starkes Hallo
|
Die zweite Möglichkeit, mehrzeiligen Text zu schreiben: Verwenden Sie einen vertikalen Strich (|) vor dem Text, gefolgt vom Inhalt

3. Kommentare

Jade-Vorlagencode:

Nach der Kompilierung:

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
  body
    h3 单行注释
    // p.box.box2 这是一段p
    h3 不会编译到html文件的注释
    //- p#box.box2.box3
    h3 块注释,也叫多行注释
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h3 这里不是注释
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

1, einzeiliger Kommentar

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade模板引擎学习-by ghostwu</title>
 </head>
 <body>
  <h3>单行注释</h3>
  <!-- p.box.box2 这是一段p-->
  <h3>不会编译到html文件的注释</h3>
  <h3>块注释,也叫多行注释</h3>
  <h3>这里不是注释</h3>
  <input type="checkbox" name="meinv" value="仙女">仙女
  <input type="checkbox" name="meinv" value="御姐">御姐
 </body>
</html>

// p.box.box2 Dies ist nur ein p

2 Kommentare in Jade werden nicht in HTML-Dateien kompiliert

//- p#box.box2.box3

3, Kommentare blockieren (mehrzeilige Textkommentare), der kommentierte Inhalt muss Start a Neue Zeile

4. Achten Sie auf den Anzeigetext hinter dem Kontrollkästchen. Platzieren Sie ihn nicht neben dem Attribut, sondern schreiben Sie ihn hinter die vertikale Linie.

4. Jade-Vorlage aktuelles Menü

Der Effekt nach dem Kompilieren (jade index.jade -P -w): -w: Überwachen Sie die Änderung der Datei in Echtzeit und aktualisieren Sie das Ergebnis sofort nach dem Speichern Hot Loading, das in der modernen Front-End-Entwicklungstechnologie sehr beliebt ist

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

5. Interpretationsvariablen

#{}: Variablen können erklärt werden, toUpperCase(): Variablen werden in Großbuchstaben konvertiert

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

Übergeben Sie die JSON-Dateidaten während der Kompilierung an die Vorlage,

Erstellen Sie neue data.json-Dateidaten

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:

Kompilierungsbefehl: jade index2.jade -P -O data. gibt eine JSON-Datei an und übergibt die Daten der JSON-Datei an die Vorlage

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
  body
    h3 #{content}

Kompiliertes Ergebnis:

Verwandte Empfehlungen:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 </head>
 <body>
  <h3>跟着ghostwu学习jade</h3>
 </body>
</html>

Detaillierte Erklärung der Node.js Template Engine Jade

Das obige ist der detaillierte Inhalt vonBeispielerklärung für die Node.js-Template-Engine-Jade. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

node.js json html npm String checkbox class JS this

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：JavaScript löscht die gesamte Optionscodefreigabe in selectNächster Artikel：JavaScript löscht die gesamte Optionscodefreigabe in select

In Verbindung stehende Artikel

Mehr sehen