2011-12-06 69 views
18

我在node.js中有一個網站;創建一個頁面,說mypage我注意到我需要創建一個layout.jademypage.jade文件。如果我將代碼放在mypage.jade中,則不會顯示,所以首先我必須填寫頁面佈局layout.jade玉器模板引擎,如何使用layout.jade?

我的問題是,我如何在layout.jade內參考我想在某個容器中加載mypage.jade的內容,例如?我可以用相同的佈局有不同的頁面嗎?我怎樣才能做到這一點?

感謝

+0

您正在使用Express? – alessioalex

+0

是的,抱歉沒有提及它。我正在使用Express。 – Masiar

回答

30

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

如果你不希望使用的佈局,你可以在全球範圍禁用它們:

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

如果你不這樣做,佈局默認和快速啓用搜索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」 服用。

編輯

這裏的應用程序中的一個真實的例子:

的應用文件(包含路線和CONFIGS):
https://github.com/alexyoung/nodepad/blob/master/app.js

佈局文件:
https://github.com/alexyoung/nodepad/blob/master/views/layout.jade

+0

現在我正在做的是'res.render(__ dirname +'/ pages/index.jade',{user:usr});',所以你要說的是給包裹我的用戶的對象添加一個名爲佈局的字段:並給我的佈局?因爲現在它已經使用佈局,即使我沒有指定它(不加載'index.jade',但佈局。此外,div = body將給定的'.jade'文件的主體? – Masiar

+0

正如我在我的消息中所說的,佈局是默認啓用的,所以如果你不想爲特定頁面設置佈局,res.render('index.jade',{user:usr,layout:false}),否則提供一個佈局值。Body = .jade文件的內容是 – alessioalex

+0

非常感謝,你究竟在哪裏讀了這個?我在玉石網站上搜索了一下,但是找不到有用的東西。 – Masiar

4

有點晚了RTY但我掙扎着開始尋找答案...... 在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> 
+1

!=身體做什麼?這裏需要更多細節。 – qodeninja

+0

@qodeninja - 從文檔:「未轉義的緩衝區代碼以!=開始,並輸出評估模板中JavaScript表達式的結果。這不會做任何轉義,所以對用戶輸入不安全」 –

1

我知道,給了我最好的結果,即使有角的方法(來代替角路由/ NG-視圖)

首先將需要安裝快速佈局:

npm install --save express-layout 

之後,express會搜索你的layout.jade文件r 意見/文件夾。所以,這裏面你可以使用:

的意見/ 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!' 
}); 

默認情況下,快遞會在你的意見/文件夾layout.jade搜索,但你可以通過更改默認的,(是的,這是沒有必要寫.jade擴展名):

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

之後express將使用views/default.jade作爲默認佈局。

另外如果你想在某個特定頁面中使用不同的佈局,你可以使用:

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

這裏表達會使login.jade作爲佈局。

我想你正在使用Jade作爲默認視圖引擎,並且不要更改視圖的默認文件夾。

這裏是express-layout doc

+0

Nice approach..It爲我工作 –