玉 - 从不同的目录加载模板 [英] Jade - Loading templates from different directories

问题描述

我正在尝试使用Peepcode的Node.js Full Stack视频，似乎他们使用的是旧版本的express / jade。没有提到使用块/扩展来渲染布局。

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

我的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 listen on port+ app.get（'port'））; 
}）; 
  

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

routes.coffee

  routes =（app） - > 
 
 app.get/ login，（req，res） - > 
 res.render＃{__ dirname} / views / login，
 title：Login
 stylesheet：'login'
 
 module.exports = routes 
  

我打算为此渲染的视图。

login.jade

 扩展布局
 
块内容
 form（action = / sessions'，method ='post'）
 label 
 |用户名
 input（type ='text'，name ='user'）
 label 
 |密码
输入（type ='password'，name ='密码）
输入（type ='submit'，name ='提交'）
  

最后的布局。

  doctype 5 
 html 
 head 
 title = title 
 link（rel ='stylesheet'，href ='/ stylesheets /＃{stylesheet} .css'）
 body 
块内容
  

转到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'

我的文件夹结构：

 。 
├──'
├──应用程序
│└──认证
│├──routes.coffee 
│└──意见
│ └──login.jade 
├──package.json 
├──public 
├──server.js 
└──views 
├──索引.jade 
└──layout.jade 
  

谢谢你的时间。 >

解决方案

看起来我不得不在 extends 中给出相对路径。

  extends ../../../views/layout 
 
块内容
 form（action ='/ sessions'，method ='post'）
 label 
 |用户名
 input（type ='text'，name ='user'）
 label 
 |密码
输入（type ='password'，name ='password'）
 input（type ='submit'，name ='Submit'）
  pre> 
 
 
我没有设置 app.set（'view options'，{layout：false}）;  
 
I'm trying to work on Peepcode's Node.js Full Stack videos and it seems they're using an older version of express/jade. No mention of using block/extends to render layouts. 

The setup used in the app is to have a /views/layout.jade file that loads for all sub-apps. The sub-apps' views are located in /apps//views.

My server.js seems pretty standard. Express is version 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'));
});
My routes file for the sub-app is in /apps/authentication/routes

routes.coffee
routes = (app) ->

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

module.exports = routes
The view I intend on rendering for this.

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')
And Finally the layout.
doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/#{stylesheet}.css')
  body
    block content
Going to localhost:3000/login renders this:

Express
500 Error: /Users/StevenNunez/code/HotPie/apps/authentication/views/login.jade:1 > 1| extends layout 2| 3| block content 4| form(action='/sessions', method='post') ENOENT, no such file or directory '/Users/StevenNunez/code/HotPie/apps/authentication/views/layout.jade'

My folder structure:
.
├── '
├── apps
│   └── authentication
│       ├── routes.coffee
│       └── views
│           └── login.jade
├── package.json
├── public
├── server.js
└── views
    ├── index.jade
    └── layout.jade
Thank you for your time.
解决方案
It looks like I had to just give the relative path in the extends call.
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')
I didn't have to set app.set('view options',{layout:false});

                        
这篇关于玉 - 从不同的目录加载模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！