Hello, Jade!

Jade - движок рендеринга шаблонов Node.js. Для примера напишем простое веб-приложение на фреймворке express. To begin with не мешало бы настроить текстовый редактор на использование двух пробелов в качестве табуляции, так как jade использует отступы в два пробела для определения местонахождения HTML-элементов.



Настроились? Запускаем консоль Node.js, создаем каталог приложения, переходим в созданный каталог.

Устанавливаем express и jade:
- npm install express jade

Создадим каталоги view и public для шаблонов представлений и статических файлов соответственно.

Открываем текстовый редактор, пишем код шаблона.

!!! 5
html
  head
    link(type='text/css', rel='stylesheet', href='public/style.css')
    title=title
  body
    #hello
      a(href='http://jade-lang.com/') #{title}

Сохраняем файл, назовем его index.jade, в каталог view.
Кстати, HTML в Jade удобно конвертировать здесь.

Создадим файл стиля.

#hello {font: bold 18px Verdana, sans-serif;}
a {text-decoration: none;}
a:hover {text-decoration: underline; color: red;}

Назовем файл style.css, сохраняем в каталог public.

Пишем код файла приложения.

var express = require('express'), app = express();
app.set('/views', __dirname + '/views');
app.use('/public', express.static(__dirname + '/public'));
app.get('/', function(req, res) {
 res.render('index.jade', {title: 'Hello, Jade!'});
});
app.listen(3000);
console.log('Listening on port 3000 ... ');

Сохраняем файл с именем app.js, выполняем.

Открываем браузер, идем по адресу http://localhost:3000/ ...

Узнать больше о возможностях jade можно на сайте интерактивной документации.