jadeAan de slag met jade


Opmerkingen

Pug (voorheen bekend als jade) is een krachtige sjabloon-engine die sterk wordt beïnvloed door Haml en geïmplementeerd met JavaScript voor Node.js en browsers.

  1. Produceert HTML
  2. Ondersteunt dynamische code
  3. Ondersteunt herbruikbaarheid (DRY)

Startpagina

Repository op GitHub

versies

versie Publicatiedatum
0.0.2 2010-07-03
1.0.0 2013/12/22
1.11.0 2015/06/12

Installatie of instellingen

Voordat je je kunt lanceren om met Pug te coderen, moet je aan enkele voorwaarden voldoen.

U moet installeren:

Na het installeren van NodeJS kunt u de juiste installatie van uw terminal controleren door:

$ node -v
 

Als dit lukt, wordt het nummer van de versie van Node afgedrukt.

Om Pug in uw project te installeren, is de voorkeur en gemakkelijke manier via NPM (Node Package Manager). Als u hiermee bekend bent, voert u deze coderegel gewoon uit in uw terminal:

$ npm install pug
 

Als u wereldwijd wilt installeren, kunt u het volgende typen:

$ npm install pug-cli -g
 

en rennen met

$ pug --help
 

Syntaxis

Pug (oude naam is Jade) is een schone, witruimte gevoelige syntaxis voor het schrijven van HTML. Hier is een eenvoudig voorbeeld:

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.
 

Produceert de volgende uitvoer 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 zijn de regels om van Pug een HTML-code te maken:

  1. Door de tekst te laten inspringen, wordt de HTML-structuur opgebouwd. inspringen kan worden gebruikt met spaties of tabbladen. Dit kon niet worden gemengd!
  2. HTML-tags worden geschreven zonder < en > . Attributen zijn plaatsen tussen ronde haakjes.
  3. Commentaar kan worden gemaakt met // of <!-- --> . Opmerkingen met //- zijn niet zichtbaar in de gerenderde HTML.
  4. Met #{ } wordt een aangeboden model gegenereerd: #{header} #{user.username} .
  5. De # (hashtag) zonder accolades zal een div element worden gemaakt met de tekst als ID. Voorbeeld #myID wordt weergegeven als <div id="myID"></div> .
  6. Met een . (punt) wordt een div gegenereerd met een klasseattribuut. Voorbeeld: .myClass wordt weergegeven als <div class="myClass"></div>
  7. Met = (gelijkheidsteken gevolgd door een spatie) wordt een variabele opgehaald. Voorbeeld: h1= title
  8. A != (Niet gelijk aan) heeft een variabele opgehaald zonder te ontsnappen.
  9. Met A - (koppelteken) kunt u JavaScript schrijven. Voorbeeld: - console.log("foo");
  10. Linken naar een extern bestand kan als volgt: script(src="/js/chat.js")
  11. Inline script zou dit kunnen gebruiken script. .
  12. Een richtlijn voor het toevoegen van de basislay-out: extends ../layout .
  13. Bij layout.pug gebeurt het invoegen met behulp van block content
  14. Het gebruik van partieel kan op twee manieren:
    1. door gedeeltelijke != partial(template file name/options) .
    2. Door include: include ../includes/footer
  15. Het omgekeerde van opnemen is extend . Dit maakt het mogelijk om vanaf een pagina "html block parts" naar een layoutpagina te sturen, bijvoorbeeld: extend layout
  16. Aaneenschakeling gebeurt met de + (plus) of # (hashtag) char. De plus wordt gebruikt bij JavaScript-code. De hashtag in HTML en geeft de inhoud weer: `p De naam is: # {mijnnaam}

Pug gebruiken met Node.js

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));
 

opties

  • bestandsnaam Gebruikt in uitzonderingen, en vereist bij gebruik omvat
  • compileDebug Wanneer false wordt er geen debug-instrumentatie gecompileerd
  • pretty Voeg witruimte voor vrij inspringen toe aan uitvoer (standaard false)