движок шаблонов Jade, как использовать layout.jade? - PullRequest
Новая
       3

движок шаблонов Jade, как использовать layout.jade?

18 голосов
/ 06 декабря 2011

У меня есть сайт в node.js;чтобы создать страницу, скажем, mypage Я заметил, что мне нужно создать файлы layout.jade и mypage.jade.Если я добавлю код в mypage.jade, он не отображается, поэтому сначала я должен заполнить layout.jade макетом страницы.

У меня вопрос, как мне ссылаться внутри layout.jade на то, чтонапример, загружать содержимое mypage.jade в определенный контейнер?Могу ли я иметь разные страницы с одинаковым макетом?Как я могу это сделать?

Спасибо

Ответы [ 4 ]

30 голосов
/ 06 декабря 2011

http://expressjs.com/guide.html#view-rendering

Если вы не хотите использовать макеты, вы можете отключить их глобально: 

app.set('view options', {
  layout: false
});

Если вы этого не сделаете, макеты включены по умолчанию, и Express ищет стандартный макет в your_view_folder / layout.jade

Вы можете указать отдельный макет для каждого маршрута: 

res.render('page', { layout: 'mylayout.jade' }); 
// you can omit .jade if you set the view engine to jade

Вот как может выглядеть ваш файл макета: 

doctype html
html(lang="en")
  head
    title Testing 123
  body
    div!= body

Обратите внимание, что тело будет взято из "mypage.jade".

Редактировать :

Вот реальный пример приложения:

Файл приложения (содержит маршруты и конфиги):
https://github.com/alexyoung/nodepad/blob/master/app.js

Файл макета:
https://github.com/alexyoung/nodepad/blob/master/views/layout.jade

5 голосов
/ 23 мая 2012

Немного опоздал на вечеринку, но я изо всех сил пытался сначала найти ответ ... В layout.jade 

doctype html
html(lang="en")
    head
    body
        h1 Hello World
        block myblock

Затем в index.jade 

extends layout
    block myblock
        p Jade is cool

Визуализация 

<!DOCTYPE html>
<html lang="en">
<head>
<body>
    <h1>Hello World</h1>
    <p>Jade is cool</p>
</body>
</html>
4 голосов
/ 22 октября 2013

В экспрессе 3.x

Используйте нефритовые блоки, а не макеты

http://www.devthought.com/code/use-jade-blocks-not-layouts/

1 голос
/ 24 января 2016

Я знаю подход, который дал мне лучшие результаты, даже с угловым (вместо angular-route / ng-view)

В первую очередь нужно будет установить express-layout: 

npm install --save express-layout

После этого Express выполнит поиск файла layout.jade в вашей папке views / . Итак, внутри этого вы можете использовать:

Вид / layout.jade 

html
  head
    meta(charset='utf-8')
    title= title
  body
    div!= body

вид / home.jade 

h1 Welcome aboard, matey!

server.js 

var express = require('express'),
    layout = require('express-layout');

var app = express();

app.get('/', function(req, res) {
    res.render('home', {
    title: 'Welcome!'
});

По умолчанию Express будет искать layout.jade в папке views / , но вы можете изменить значение по умолчанию, используя (да, нет необходимости писать расширение .jade): 

app.set('layout', 'default');

После этого экспресс будет использовать views / default.jade в качестве макета по умолчанию.

Также, если вы хотите использовать другой макет на конкретной странице, вы можете использовать: 

app.get('/', function(req, res) {
    res.render('home', {
    layout: 'login',
    title: 'Welcome!'
});

Здесь express будет отображать login.jade в качестве макета.

Полагаю, вы используете Jade в качестве движка представления по умолчанию и не меняете папку по умолчанию для представлений.

Вот документ express-layout .

...