Add both engines and consolidate.js in your package.json In yourapp.js var engines = require(‘consolidate’); app.engine(‘jade’, engines.jade); app.engine(‘handlebars’, engines.handlebars); More info here
Jade has a cleaner, more readable syntax and comes with filters and helpers: https://github.com/visionmedia/jade#a7 If you’re going to migrate HTML files to jade, this converter might come handy: http://html2jade.aaron-powell.com/ …but you can also use HTML. app.set(‘view engine’, ‘html’); http://expressjs.com/guide.html#view-rendering I’m using EJS ( http://code.google.com/p/embeddedjavascript/) as the rendering engine in my express app, but keep a … Read more
parent.jade doctype 5 html block link -var selected = ‘home’; //default -var menu = { ‘home’: ‘/home’, ‘blog’: ‘/blog’, ‘contact’: ‘/contact’ }; body nav ul each val, key in menu li if selected === key a.selected(href=val, title=key)= key else a(href=val, title=key)= key child.jade extends parent block link -var selected = ‘blog’;
use #{} notation if you want to interpolate a variable in the contents of an element. you can just use the variable names straight up if you want to use them in attributes. link(rel=”stylesheet”, href=”https://stackoverflow.com/stylesheets/” + pref + ‘.css’) equivalent: link(rel=”stylesheet”, href=”https://stackoverflow.com/stylesheets/” + locals.pref + ‘.css’) when to use #{}: a(href=”https://stackoverflow.com/stylesheets/” + locals.pref + ‘.css’) … Read more
//- Just indent the comment like normal elements Just indent your comment like you do other elements. Just be careful that you have your indention correct or you may comment out more than you intended.
Ah ha! Figured it out. Create a block at the top of the base layout and add your variables in there. _layout.jade: block variables doctype html html(lang=”en-au”) head meta(charset=”utf-8″) block css body(class=(body_class || “it-did-not-work”)) block header block content block footer home.jade: extends _layout block variables – var body_class=”i-am-the-home-page” block header h1 home
There is also a great resource called Jade Template Syntax by example.
Background Actually jade/pug syntax allows plain HTML (or any other plain text) through the use of 3 syntaxes, as you can see in the reference on the project’s site. dot syntax (also known as “Block in a Tag”) ul. <li><a href=”#book-a”>Book A</a></li> <li><a href=”#book-b”>Book B</a></li> pipe syntax (also known as “Piped Text”) ul | <li><a … Read more
Jade is supposed to come with a command line utility that does exactly that. See here https://github.com/visionmedia/jade#jade1 Or see just above it for a make file that runs it. – Edit – it seems Jade was renamed to Pug – see https://github.com/pugjs/pug/issues/2184 but the answer remains – Pug comes with a command line tool – … Read more
You should be able to simply include it within a jade template: As mentioned include can be used to include other content such as html or css. By providing an extension, Jade will read that file in, apply any filter matching the file’s extension, and insert that content into the output. html // … body … Read more