Jade – 从不同目录加载模板

我正在尝试使用Peepcode的Node.js Full Stackvideo,看起来他们使用的是旧版本的express / jade。 没有提及使用块/扩展来渲染布局。

应用程序中使用的设置是为所有子应用程序加载一个/views/layout.jade文件。 子应用的视图位于/ apps //视图中。

我的server.js似乎很标准。 Express是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')); }); 

我的路线文件的子应用程序是在/应用程序/身份validation/路线

routes.coffee

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

我打算为此呈现的视图。

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') 

最后是布局。

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

去localhost:3000 /login呈现这个:

Express 500错误:/Users/StevenNunez/code/HotPie/apps/authentication/views/login.jade:1> 1 | 扩展布局2 | 3 | 阻止内容4 | form(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 

感谢您的时间。

       

网上收集的解决方案 "Jade – 从不同目录加载模板"

看起来我不得不在extends调用中给出相对path。

 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});

您可以使用variables__dirname连接来自其他目录的视图。

例:

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

您正尝试使用两种渲染方法…扩展布局的第一个布局,第二个是块内容。 在使用布局时,您将自动扩展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') 

login文件必须在相同的目录中。 如果你想调用其他布局,你可以使用这样的目录:

 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')