web-dev-qa-db-ja.com

jadeテンプレートエンジン、layout.jadeの使用方法

Node.jsにウェブサイトがあります。ページを作成するには、mypageと言います。_layout.jade_ファイルと_mypage.jade_ファイルの両方を作成する必要があることに気付きました。コードを_mypage.jade_に配置すると表示されないため、最初に_layout.jade_にページのレイアウトを入力する必要があります。

私の質問は、たとえば_layout.jade_の内容を特定のコンテナにロードしたい_mypage.jade_の内部をどのように参照すればよいですか？同じレイアウトで異なるページを作成できますか？これどうやってするの？

ありがとう

node.jsexpresspug
18
Masiar

http://expressjs.com/guide.html#view-rendering

レイアウトを使用したくない場合は、それらをグローバルに無効にすることができます。

app.set('view options', {
  layout: false
});

そうしないと、デフォルトでレイアウトが有効になり、Expressはyour_view_folder/layout.jadeで標準レイアウトを検索します。

ただし、ルートごとに個別のレイアウトを指定できます。

res.render('page', { layout: 'mylayout.jade' }); 
// you can omit .jade if you set the view engine to jade

レイアウトファイルは次のようになります。

doctype html
html(lang="en")
  head
    title Testing 123
  body
    div!= body

本文は「mypage.jade」から取得されることに注意してください。

編集：

アプリケーションの実際の例を次に示します。

アプリケーションファイル（ルートと設定を含む）：
https://github.com/alexyoung/nodepad/blob/master/app.js

レイアウトファイル：
https://github.com/alexyoung/nodepad/blob/master/views/layout.jade

30
alessioalex

パーティーには少し遅れましたが、最初は答えを見つけるのに苦労しました... layout.jade

doctype html
html(lang="en")
    head
    body
        h1 Hello World
        block myblock

次にindex.jadeで

extends layout
    block myblock
        p Jade is cool

レンダリングします

<!DOCTYPE html>
<html lang="en">
<head>
<body>
    <h1>Hello World</h1>
    <p>Jade is cool</p>
</body>
</html>
5
Scott Rickman

Express 3.x

レイアウトではなくJadeブロックを使用する

http://www.devthought.com/code/use-jade-blocks-not-layouts/

4
rolin.tencent.Shenzhen

angular（angular-route/ng-viewの代わりに）を使用しても、最高の結果が得られたアプローチを知っています

まず、express-layoutをインストールする必要があります。

npm install --save express-layout

その後、expressはviews /フォルダー内のlayout.jadeファイルを検索します。だから、その中であなたは使うことができます：

views/layout.jade

html
  head
    meta(charset='utf-8')
    title= title
  body
    div!= body

views/home.jade

h1 Welcome aboard, matey!

server.js

var express = require('express'),
    layout = require('express-layout');

var app = express();

app.get('/', function(req, res) {
    res.render('home', {
    title: 'Welcome!'
});

デフォルトでは、expressはviews /フォルダーでlayout.jadeを検索しますが、（はい、.jade拡張子を記述する必要はありません）を使用してデフォルトを変更できます。

app.set('layout', 'default');

その後、expressはデフォルトのレイアウトとしてviews/default.jadeを使用します。

また、特定のページで別のレイアウトを使用する場合は、以下を使用できます。

app.get('/', function(req, res) {
    res.render('home', {
    layout: 'login',
    title: 'Welcome!'
});

ここで、expressはレイアウトとしてlogin.jadeをレンダリングします。

デフォルトのビューエンジンとしてJadeを使用しており、ビューのデフォルトフォルダーを変更していないと思います。

これが express-layout doc です。

1
James Mallon