web-dev-qa-db-ja.com

Jade-異なるディレクトリからテンプレートをロードする

PeepcodeのNode.jsフルスタックビデオで作業しようとしていますが、古いバージョンのエクスプレス/ジェイドを使用しているようです。ブロック/拡張を使用してレイアウトをレンダリングすることについては言及されていません。

アプリで使用されるセットアップは、すべてのサブアプリに対してロードされる/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 listening on port " + app.get('port'));
});

サブアプリのルートファイルは/ apps/authentication/routesにあります

ルート。コーヒー

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

お時間をいただきありがとうございます。

templatesnode.jsexpresspug
17
StevenNunez

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});を設定する必要はありませんでした

17
StevenNunez

変数__dirnameを使用して、他のディレクトリのビューを接続できます。

例：

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

2つのレンダリング方法を使用しようとしています...レイアウトを拡張する最初のレイアウトと2番目のレイアウトはブロックコンテンツです。レイアウトを使用する場合、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')

ログインファイルは同じディレクトリにある必要があります。他のレイアウトを呼び出したい場合は、次のようにdirを使用できます。

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