Jade Template Engine

HInweis

Pug zählt als der Nachfolger von Jade:

Project Rename

Due to a trademark issue, the project name has been changed from “Jade” to “Pug” in conjunction with the release of Pug 2. This also means that we have changed the official supported file extension from .jade to .pug. Although .jade is still supported, it is deprecated. All users are encouraged to transition to .pug immediately.

Siehe auch

https://pugjs.org

Einführung

Jade ist eine auf node basierte HTML Template Engine, mit der man vereinfachtes html schreiben kann, das dann on the fly in html übersetzt wird. Damit kann man sehr schnell Code entwickeln. Man kann Jade auch einfach als Tool nehmen um schnell Code zu schreiben

https://t3n.de/news/jade-638027/
https://www.youtube.com/watch?v=l5AXcXAP4r8
https://www.youtube.com/watch?annotation_id=annotation_393736373&feature=iv&src_vid=-iOdDz2LnEk&v=wzAWI9h3q18

Quickstart

Installieren

Node muss vorhanden sein

npm install jade --global

HTML Files erstellen

1. Jade File z.B.

index.jade

doctype html
html(lang="de")
  head
    meta(charset="utf-8")
    title BlackBird Co.
    meta(name="description", content="")
    meta(name="author", content="")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(rel="stylesheet", href="css/style.css")
    link(rel="icon", type="image/png", href="images/favicon.png")

  body

    header.bird-box
      .back-bird
...

2. Den Watcher im Verzeichnis starten:

jade -w .

Jedesmal wenn das .jade File gespeichert wird, wird auch ein html File generiert.

Wichtige Befehle

File kompilieren

jade myFile.jade

Includes

head.jade

head
  title Meine Seite
  script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js')

index.jade

doctype
html
  include ./head.jade
  body

Textblöcke

div
  p Erster Absatz
  p
    |  Mit HTML
    br
    | dazu Pipe nehmen
  p.
    Mit Puhkt gehen auch <strong>HTML Tags</strong>
  p(id="myID",class="myClass").
    So gehen Attribute

  #2nd_div.lorem_ipsum.important
    So kann man schnell Divs mit ID und Klassen erzeugen

  ul
    li#listelement
      a(href='#') Steff

  ul
    li#anderesListElement: a(href="#") Superman
    li#anderesListElement: a(href="#") Batman

    //- Kommentar -> im HTML nicht sichtbar
    // Kommentar -> im HTML sichtbar

Variable, Mixins...

- myName = "Steff"
p Hello #{myName}

p 12 * 34 = #{12 * 34}

- website = "http://stephanschlegel.de"
a(href="#{website}) Meine Webseite

- heroes = ['Wonder Woman','Supergirl','Flash']
ul
  li#heroes: #{heroes[0]}
  li#heroes: #{heroes[1]}

Attribute

p(id="1st",class="blue").
 blablabla

Command Line

Command Line

$ jade [options] [dir|file ...] Options:
-h, --help             output usage information
-V, --version          output the version number
-O, --obj <path|str>   JavaScript options object or JSON file containing it
-o, --out <dir>        output the compiled html to <dir>
-p, --path <path>      filename used to resolve includes
-P, --pretty           compile pretty html output
-c, --client           compile function for client-side runtime.js
-n, --name <str>       the name of the compiled template (requires --client)
-D, --no-debug         compile without debugging (smaller functions)
-w, --watch            watch files for changes and automatically re-render
-E, --extension <ext>  specify the output file extension
--name-after-file      name the template after the last section of the file path
                       (requires --client and overriden by --name)
--doctype <str>        specify the doctype on the command line (useful if it
                       is not specified by the template) Examples Translate jade the templates dir:
$ jade templates
Create {foo,bar}.html

$ jade {foo,bar}.jade
Jade over stdio

$ jade < my.jade > my.html
Jade over stdio

$ echo "h1 Jade!" | jade
foo, bar dirs rendering to /tmp

$ jade foo bar --out /tmp