Jade - 从不同目录加载模板

Question

Jade - 从不同目录加载模板

19

我正在尝试使用Peepcode的Node.js全栈视频，似乎他们正在使用旧版的express/jade。没有提到使用block/extends来呈现布局。

该应用程序中使用的设置是具有适用于所有子应用程序的/views/layout.jade文件。子应用程序的视图位于/apps/< app_name >/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 listening 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

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| extends layout 2| 3| block content 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

感谢您的时间。

- StevenNunez

3个回答

6

您可以使用变量__dirname从其他目录连接视图。

示例：

app.get('/otherurl/' , (req, res) => { 
  res.render(`${__dirname}/../other_project/views/index`) 
});

- IvanM

3

您正在尝试使用两种渲染方法...

第一种是继承布局，第二种是块级内容。

当使用布局时，您会自动扩展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')

- andrescabana86

谢谢您。什么是“正确”的方法或渲染方式？由于我刚开始接触node/express/jade，我想尝试遵循社区制定的惯例。 - StevenNunez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- StevenNunez · Accepted Answer

看起来我只需要在 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});