2011-12-06 9 views
18

मेरे पास node.js में एक वेबसाइट है; एक पृष्ठ बनाने के लिए, mypage कहें मैंने देखा कि मुझे layout.jade और mypage.jade फ़ाइलों दोनों बनाने की आवश्यकता है। अगर मैं mypage.jade में कोड डालता हूं तो यह प्रदर्शित नहीं होता है, इसलिए पहले मुझे पृष्ठ के लेआउट के साथ layout.jade भरना होगा।जेड टेम्पलेट इंजन, layout.jade का उपयोग कैसे करें?

मेरा प्रश्न है, मैं layout.jade के अंदर संदर्भ कैसे दूं कि मैं एक निश्चित कंटेनर में mypage.jade की सामग्री लोड करना चाहता हूं, उदाहरण के लिए? क्या मेरे पास एक ही लेआउट के साथ अलग-अलग पेज हो सकते हैं? मैं यह कैसे कर सकता हूँ?

धन्यवाद

+0

आप एक्सप्रेस का उपयोग कर रहे हैं? – alessioalex

+0

हां, इसका उल्लेख करने के लिए खेद है। मैं एक्सप्रेस का उपयोग कर रहा हूँ। – Masiar

उत्तर

30

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

आप लेआउट का उपयोग नहीं करना चाहते हैं तो आप उन्हें विश्व स्तर पर निष्क्रिय कर सकते हैं:

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

आपको लगता है कि लेआउट डिफ़ॉल्ट और एक्सप्रेस से सक्षम होते हैं ऐसा नहीं करते हैं 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

+0

अभी मैं जो कर रहा हूं वह है 'res.render (__ dirname +'/pages/index.jade ', {user: usr});', तो आप जो कह रहे हैं वह उस ऑब्जेक्ट को देना है जो मेरे उपयोगकर्ता को भी लपेटता है लेआउट नामक एक फ़ील्ड जोड़ें: और अपना लेआउट दें? क्योंकि अभी यह पहले से ही लेआउट का उपयोग करता है, भले ही मैं इसे निर्दिष्ट नहीं करता ('index.jade' लोड नहीं करता है लेकिन लेआउट। इसके अलावा, div = body क्या होगा? दिए गए' .jade' फ़ाइल का शरीर? – Masiar

+0

जैसा कि मैंने अपने संदेश में कहा था, लेआउट डिफ़ॉल्ट रूप से सक्षम हैं। इसलिए res.render ('index.jade', {user: usr, layout: false}) यदि आप किसी विशिष्ट पृष्ठ के लिए लेआउट नहीं चाहते हैं, अन्यथा लेआउट के लिए एक मूल्य प्रदान करें। बॉडी = .jade फ़ाइल की सामग्री हाँ – alessioalex

+0

बहुत बहुत धन्यवाद, आपने इसे कहां पढ़ा? मैंने जेड वेबसाइट के चारों ओर खोज की लेकिन वास्तव में कुछ उपयोगी नहीं पाया। – Masiar

4

थोड़ा सा देर से rty लेकिन मैं शुरू में जवाब खोजने के लिए

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<body> 
    <h1>Hello World</h1> 
    <p>Jade is cool</p> 
</body> 
</html> 
+1

क्या करता है! = शरीर क्या करता है? यहां अधिक जानकारी चाहिए। – qodeninja

+0

@qodeninja - दस्तावेज़ों से: "अनचाहे buffered कोड के साथ शुरू होता है! = और टेम्पलेट में जावास्क्रिप्ट अभिव्यक्ति का मूल्यांकन करने के परिणाम आउटपुट करता है। यह किसी भी भागने से नहीं करता है, इसलिए उपयोगकर्ता इनपुट के लिए सुरक्षित नहीं है" –

4

रेंडर करेगा एक्सप्रेस 3 में index.jade

extends layout 
    block myblock 
     p Jade is cool 

में फिर layout.jade

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

में संघर्ष करना पड़ा ... ।एक्स

उपयोग जेड ब्लॉक, लेआउट नहीं

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

1

मैं एक दृष्टिकोण है कि मुझे सबसे अच्छा परिणाम दिया है, यहां तक ​​कि कोणीय साथ पता (कोणीय मार्ग/एनजी-व्यू विकल्प)

सबसे पहले एक्सप्रेस लेआउट स्थापित करने के लिए आवश्यक होगा:

npm install --save express-layout 

उसके बाद, एक्सप्रेस आपके अंदर लेआउट.जेड फ़ाइल की खोज करेगा आर विचार/ फ़ोल्डर। तो, कि के अंदर आप का उपयोग कर सकते हैं:

विचारों/layout.jade

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

विचारों/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!' 
}); 

डिफ़ॉल्ट व्यक्त अपने विचारों/ फ़ोल्डर में layout.jade के लिए खोज करेंगे, लेकिन आप डिफ़ॉल्ट को बदल सकते हैं का उपयोग करके, (हाँ, यह .jade विस्तार लिखने के लिए आवश्यक नहीं है) द्वारा:

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

उसके बाद एक्सप्रेस डिफ़ॉल्ट लेआउट के रूप में views/default.jade का उपयोग करेगा।

इसके अलावा आप एक विशेष पृष्ठ में एक अलग लेआउट का उपयोग करना चाहते हैं, आप का उपयोग कर सकते हैं:

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

यहाँ लेआउट के रूप में login.jade प्रस्तुत करना होगा व्यक्त करते हैं।

मुझे लगता है कि आप जेड को डिफ़ॉल्ट दृश्य इंजन के रूप में उपयोग कर रहे हैं, और दृश्यों के लिए डिफ़ॉल्ट फ़ोल्डर को नहीं बदलते हैं।

यहां express-layout doc है।

+0

अच्छा दृष्टिकोण .. यह मेरे लिए काम किया –

संबंधित मुद्दे