Jade - 从不同目录加载模板

Ste*_*nez 17 templates node.js express pug

我正在尝试使用Peepcode的Node.js Full Stack视频,看起来他们正在使用旧版本的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'));
});
Run Code Online (Sandbox Code Playgroud)

子应用程序的路由文件位于/ apps/authentication/routes中

routes.coffee

routes = (app) ->

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

module.exports = routes
Run Code Online (Sandbox Code Playgroud)

我打算为此渲染的视图.

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')
Run Code Online (Sandbox Code Playgroud)

最后是布局.

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

转到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
Run Code Online (Sandbox Code Playgroud)

感谢您的时间.

Ste*_*nez 17

看起来我不得不在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')
Run Code Online (Sandbox Code Playgroud)

我没有必要设置 app.set('view options',{layout:false});

  • 为了避免`../../../ views/layout`你可以设置jade的`basedir`配置变量:`app.locals.basedir = __dirname +'/ views';`之后你应该使用'absolute' (视图中的绝对值)视图中的路径,例如:`extends/layout` (10认同)
  • 我正在研究相同的教程并遇到了同样的问题.出于某种原因,我不习惯使用'extends ../../../views/layout'.有替代方案吗? (6认同)

Iva*_*anM 5

您可以使用变量__dirname来连接其他目录中的视图.

例:

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