moteur de modèle jade, comment utiliser la mise en page.jade?

StackOverflow https://stackoverflow.com/questions/8402568

  •  28-10-2019
  •  | 
  •  

Question

J'ai un site Web dans Node.js; Pour créer une page, disons mypage J'ai remarqué que je devais créer à la fois un layout.jade et mypage.jade des dossiers. Si je mets de code mypage.jade il n'est pas affiché, donc je dois d'abord remplir layout.jade avec la disposition de la page.

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

Merci

Était-ce utile?

La solution

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

Si vous ne souhaitez pas utiliser les dispositions, vous pouvez les désactiver à l'échelle mondiale:

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

Si vous ne faites pas que les dispositions sont activées par défaut et les recherches expriment la mise en page standard dans votre_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".

Éditer:

Voici un vrai exemple dans une application:

Le fichier d'application (contenant des itinéraires et des 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

Autres conseils

Un peu en retard à la fête mais j'ai eu du mal à trouver la réponse au départ ... dans la mise en page.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>

Dans Express 3.x

Utilisez des blocs de jade, pas des dispositions

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

Je connais une approche qui m'a donné les meilleurs résultats, même avec Angular (pour substituer la route angulaire / ng-View)

Tout d'abord sera nécessaire pour installer Express-Layout:

npm install --save express-layout

Après cela, Express recherchera le fichier Layout.jade à l'intérieur de votre vues / dossier. Donc, à l'intérieur de cela, vous pouvez utiliser:

vues / disposition.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 vues / dossier, mais vous pouvez modifier la valeur par défaut, en utilisant (oui, il n'est pas nécessaire d'écrire une 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 disposition 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 modifiez pas le dossier par défaut pour les vues.

Voici la Doc express-layout.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top