Looking for jade Keywords? Try Ask4Keywords

jadeErste Schritte mit Jade


Bemerkungen

Pug (früher bekannt als Jade) ist eine leistungsstarke Template-Engine, die stark von Haml beeinflusst und mit JavaScript für Node.js und Browser implementiert wurde.

  1. Erzeugt HTML
  2. Unterstützt dynamischen Code
  3. Unterstützt die Wiederverwendbarkeit (TROCKEN)

Startseite

Repository auf GitHub

Versionen

Ausführung Veröffentlichungsdatum
0,0,2 2010-07-03
1.0.0 2013-12-22
1.11.0 2015-06-12

Installation oder Setup

Bevor Sie mit Pug Code programmieren können, müssen Sie einige Voraussetzungen haben.

Sie müssen installieren:

Nach der Installation von NodeJS können Sie die korrekte Installation in Ihrem Terminal überprüfen:

$ node -v
 

Bei Erfolg wird die Nummer der Node-Version gedruckt.

Um Pug in Ihrem Projekt zu installieren, ist der bevorzugte und einfache Weg der NPM (Node Package Manager). Wenn Sie damit vertraut sind, führen Sie einfach diese Codezeile in Ihrem Terminal aus:

$ npm install pug
 

Wenn Sie global installieren möchten, können Sie Folgendes eingeben:

$ npm install pug-cli -g
 

und mit laufen

$ pug --help
 

Syntax

Pug (alter Name ist Jade) ist eine saubere, Whitespace-sensitive Syntax zum Schreiben von HTML. Hier ist ein einfaches Beispiel:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.
 

Erzeugt folgende Ausgabe als HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>
 

Hier sind die Regeln zum Rendern von Pug in HTML-Code:

  1. Durch Einrücken des Textes wird der HTML-Baum erstellt. Einrücken kann mit Leerzeichen oder Tabulatoren verwendet werden. Das konnte nicht gemischt werden!
  2. HTML-Tags werden ohne < und > . Attribute sind Stellen zwischen runden Klammern.
  3. Mit // oder <!-- --> Kommentar abgegeben werden. Kommentare mit //- sind im gerenderten HTML- //- nicht sichtbar.
  4. Mit #{ } wird ein angebotenes Modell generiert: #{header} #{user.username} .
  5. Das # (Hashtag) ohne geschweifte Klammern wird ein div Element mit dem Text als ID erstellt. Beispiel #myID wird als <div id="myID"></div> .
  6. Mit einem . (Punkt) wird ein div mit einem Klassenattribut generiert. Beispiel: .myClass wird als <div class="myClass"></div>
  7. Mit = (Gleichheitszeichen gefolgt von einem Leerzeichen) wird eine Variable abgerufen. Beispiel: h1= title
  8. A != (Ungleich) eine Variable abgerufen, ohne zu entkommen.
  9. Mit einem - (Bindestrich) können Sie JavaScript schreiben. Beispiel: - console.log("foo");
  10. Das Verknüpfen mit einer externen Datei kann folgendermaßen erfolgen: script(src="/js/chat.js")
  11. Inline-Skript könnte dieses script. .
  12. Eine Anweisung zum Hinzufügen des extends ../layout : extends ../layout .
  13. Bei layout.pug geschieht das Einsetzen durch Verwendung block content
  14. Die Verwendung von Teilweisen kann auf zwei Arten erfolgen:
    1. durch partiell != partial(template file name/options) .
    2. Mit include: include ../includes/footer
  15. Die Umkehrung von include ist extend . Dies ermöglicht es, von einer Seite "HTML- block " beispielsweise an eine Layoutseite zu senden: extend layout
  16. Verketten geschieht mit dem Zeichen + (Plus) oder # (Hashtag). Das Plus wird im JavaScript-Code verwendet. Der Hashtag in HTML und stellt den Inhalt dar: `p Der Name lautet: # {meinName}

Pug mit Node.js verwenden

var pug = require('pug');

// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);

// render
var html = pug.render('string of pug', merge(options, locals));

// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));
 

Optionen

  • Dateiname Wird in Ausnahmen verwendet und ist bei Verwendung von Includes erforderlich
  • compileDebug Bei false werden keine Debug-Instrumente kompiliert
  • pretty pretty-Einbuchtung Leerzeichen ausgeben (false per Default)