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
感谢您的时间。
看起来我不得不在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')