web-dev-qa-db-fra.com

moteur de modèle de jade, comment utiliser layout.jade?

J'ai un site Web dans node.js; pour créer une page, dites mypage J'ai remarqué que je dois créer à la fois un layout.jade et mypage.jade des dossiers. Si je mets du code dans mypage.jade il n'est pas affiché, donc je dois d'abord remplir layout.jade avec la mise en page de la page.

Ma question est, comment puis-je faire référence à l'intérieur layout.jade dont je souhaite charger le contenu mypage.jade dans un certain conteneur, par exemple? Puis-je avoir différentes pages avec la même mise en page? Comment puis-je faire ceci?

Merci

node.jsexpresspug
18
Masiar

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

Si vous ne souhaitez pas utiliser les mises en page, vous pouvez les désactiver globalement:

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

Si vous ne le faites pas, les mises en page sont activées par défaut et Express recherche la mise en page standard dans your_view_folder/layout.jade

Vous pouvez cependant spécifier une disposition distincte pour chaque itinéraire:

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

Voici comment votre fichier de mise en page pourrait être:

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

Notez que le corps sera tiré de "mypage.jade".

Modifier :

Voici un vrai exemple dans une application:

Le fichier d'application (contenant les routes et les configurations):
https://github.com/alexyoung/nodepad/blob/master/app.js

Le fichier de mise en page:
https://github.com/alexyoung/nodepad/blob/master/views/layout.jade

30
alessioalex

Un peu tard pour la fête mais j'ai eu du mal à trouver la réponse au départ ... Dans layout.jade

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

Puis dans index.jade

extends layout
    block myblock
        p Jade is cool

Rendra

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

En express 3.x

Utilisez des blocs de jade, pas des dispositions

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

4
rolin.tencent.Shenzhen

Je connais une approche qui m'a donné les meilleurs résultats, même avec angular (pour remplacer angular-route/ng-view)

Tout d'abord sera nécessaire d'installer une mise en page express:

npm install --save express-layout

Après cela, express recherchera le fichier layout.jade dans votre dossier views /. Donc, à l'intérieur de cela, vous pouvez utiliser:

views/layout.jade 

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

vues/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!'
});

Par défaut, express recherchera layout.jade dans votre dossier views /, mais vous pouvez modifier la valeur par défaut en utilisant (oui, il n'est pas nécessaire d'écrire l'extension .jade):

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

Après cela, express utilisera views/default.jade comme mise en page par défaut.

De plus, si vous souhaitez utiliser une mise en page différente dans une page particulière, vous pouvez utiliser:

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

Ici, express rendra login.jade comme mise en page.

Je suppose que vous utilisez Jade comme moteur de vue par défaut et ne changez pas le dossier par défaut pour les vues.

Voici le doc express-layout .

1
James Mallon