Jade - 從不同目錄加載模板

我正在嘗試使用Peepcode的Node.js Full Stack視頻，看起來他們使用的是舊版本的express/jade。沒有提及使用塊/擴展來渲染布局。Jade - 從不同目錄加載模板

該應用使用的設置是爲所有子應用加載一個/views/layout.jade文件。子應用程序的視圖位於/ apps //視圖中。

我的server.js看起來很標準。快遞是3.0.0rc1版本

require('coffee-script'); 

var express = require('express') 
    , http = require('http') 
    , path = require('path'); 

var app = express(); 

app.configure(function(){ 
    app.set('port', process.env.PORT || 3000); 
    app.set('views', __dirname + '/views'); 
    app.set('view engine', 'jade'); 
    app.use(express.favicon()); 
    app.use(express.logger('dev')); 
    app.use(express.bodyParser()); 
    app.use(express.methodOverride()); 
    app.use(app.router); 
    app.use(express.static(path.join(__dirname, 'public'))); 
}); 

app.configure('development', function(){ 
    app.use(express.errorHandler()); 
}); 

require('./apps/authentication/routes')(app) 

http.createServer(app).listen(app.get('port'), function(){ 
    console.log("Express server listening on port " + app.get('port')); 
});

我的路線子應用程序文件在/應用/認證/路線

routes.coffee

routes = (app) -> 

    app.get "/login", (req,res) -> 
    res.render "#{__dirname}/views/login", 
     title: "Login" 
     stylesheet: 'login' 

module.exports = routes

我打算在渲染視圖這個。

extends layout 

block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password) 
    input(type='submit', name='Submit')

最後佈局。

doctype 5 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/#{stylesheet}.css') 
    body 
    block content

去爲localhost：3000 /登錄呈現此：

快遞 500錯誤：/Users/StevenNunez/code/HotPie/apps/authentication/views/login.jade:1> 1 |擴展布局2 | 3 |阻止內容4 |我們的文件夾結構：（'action ='/ sessions'，method ='post'）ENOENT，沒有這樣的文件或目錄'/Users/StevenNunez/code/HotPie/apps/authentication/views/layout.jade'

我的文件夾結構：

. 
├── ' 
├── apps 
│   └── authentication 
│    ├── routes.coffee 
│    └── views 
│     └── login.jade 
├── package.json 
├── public 
├── server.js 
└── views 
    ├── index.jade 
    └── layout.jade

謝謝你的時間。

來源

2012-07-26 StevenNunez

它看起來像我不得不只給在extends調用的相對路徑。

extends ../../../views/layout 

block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password') 
    input(type='submit', name='Submit')

我沒有設置app.set('view options',{layout:false});

來源

2012-07-26 20:54:01 StevenNunez

好吧......它工作正常......但設置應用程序，因爲是正確的方式來使用擴展方法 – andrescabana86 2012-07-26 20:58:15

我正在通過相同的教程，並遇到一樣的問題。出於某種原因，我不習慣使用'擴展../../../views/layout'。有沒有其他的選擇？ – Feech 2012-08-26 13:45:38

太棒了。正是我需要的！ – Hcabnettek 2013-01-30 03:45:23

您正在嘗試使用兩種渲染方法... 第一種佈局擴展布局，第二種是塊內容。使用佈局時，您將自動擴展文件夾login.jade中的佈局文件。

這是沒有必要使用extends，你不能使用block句子，但如果你想使用extends你必須禁用佈局。

一下添加到應用程序：

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

app.set('view engine', 'jade');

後像佈局延伸擴展文件：

layout.jade

doctype 5 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/#{stylesheet}.css') 
    body 
    block content

login.jade

extends layout 

block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password) 
    input(type='submit', name='Submit')

登錄文件必須在同一目錄。如果你想調用其他的佈局，你可以使用這樣的目錄：

appDirectory 
    views 
    layout 
    otherViews 
    login

login.jade

extends ../views/layout  
block content 
    form(action='/sessions', method='post') 
    label 
     | Username 
     input(type='text', name='user') 
    label 
     | Password 
     input(type='password', name='password) 
    input(type='submit', name='Submit')

來源

2012-07-26 19:12:27 andrescabana86

感謝。什麼是「正確」的方法或渲染？因爲我剛剛進入node/express/jade，我想嘗試並遵循社區制定的約定。 – StevenNunez 2012-07-26 20:31:02

都是正確的，這取決於你和你的技能 – andrescabana86 2012-07-26 20:57:37

可以使用可變__dirname到的意見來自其他目錄連接。

實施例：

app.get('/otherurl/' , function(req, res){ 
    res.render(__dirname + '/../other_project/views/index') 
});

來源

2013-06-21 06:09:22 IvanM

Jade - 從不同目錄加載模板

回答

相關問題