मैं सिर्फ node.js + express + ejs से शुरू कर रहा हूं। मैं अनुरोधित ejs फ़ाइल को लेआउट फ़ाइल में खींचने के लिए कहीं भी नहीं ढूंढ सकता।ejs में लेआउट `उपज` विधि क्या है?
मुझे अच्छी तरह से पता है कि yield सही बात नहीं है।
उदा।
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
अंत में एक एक्सप्रेस अनुप्रयोग के लिए कुछ स्रोत कोड मिला:
<%- body %>
मुझे लगता है मैं मदद कर सकता है तुम यहाँ रगड़ जाओ। मैं आपको कुछ स्पष्टीकरण दूंगा।
लेआउट.ईजेएस सचमुच लेआउट है जो आपको कोड की स्निपेट से निर्मित HTML साइट रखने की आवश्यकता है :)।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title><%- title %></title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<!-- total container -->
<header>
<%- partial('topic.ejs') %>
<%- body %>
</header>
</body>
</html>
मैं तुम्हें कोड का एक विवरण दे देंगे:
मेरे layout.ejs तरह दिखता है। "हेडर" -टैग मेरी सभी सामग्री के साथ मेरा रैपर (800x600) है। "आंशिक" के साथ - कमांड आप स्रोत कोड के स्निपेट लोड कर सकते हैं। मेरी परीक्षा में "subject.ejs" छवियों और रंगों के साथ मेरा विषय-डिजाइन है जो प्रत्येक पृष्ठ पर रहना चाहिए (आप कह सकते हैं कि यह स्थिर है)।
की Sourcecode topic.ejs: (यह वास्तव में सिर्फ एचटीएमएल टैग है, एक div के साथ शुरू होता है और एक के साथ समाप्त होता है: पी)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
अब हर पृष्ठ मेरे topic.ejs लागू किया गया है (यदि आप पहले स्रोत कोड का पालन करें, आप इसे देख सकते हैं):
"<% - आंशिक ('topic.ejs')%>"।
इसका मतलब है: हे लेआउट! प्रत्येक पृष्ठ में लागू कोड का आंशिक है, इसे मिला ?! -अच्छा।
लेकिन "<% - शरीर%>" के बारे में क्या - कमांड? समझना आसान है। App.js की देखभाल करेगा <% - बॉडी%> बिल्कुल करेगा। लेकिन यह कैसे करता है, मैं इसे बाद में समझाऊंगा।
जैसा कि आपको पता होना चाहिए, HTML-पृष्ठ का पहला पृष्ठ "index.html" नाम दिया गया है। तो यहां, हमें अपना index.html भी लेना चाहिए और इसे "index.ejs" पर संकलित करना चाहिए। "Topic.ejs" के लिए एक ही प्रक्रिया का प्रयोग करें। की तरह एचटीएमएल टैग करने के लिए sourcecode कम करें:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
यहाँ से आप मेरी पर एक नज़र रखना चाहिए app.js:
app.get('/xyz', function(req, res){
res.render('index.ejs', { title: 'My Site' });
});
स्पष्टीकरण: xyz एक यादृच्छिक नाम है। खुद को चुनें। यह नाम अब आपका यूआरएल है। इसे मत समझो? नीचे उदाहरण देखें। ऐप के निष्पादन के माध्यम से अपना सर्वर शुरू करने के बाद।जेएस, आपका सर्वर विशेष रूप से बंदरगाह पर चलाता है (डिफ़ॉल्ट 3000 मुझे लगता है)। Index.html का आपका सामान्य URL "localhost: 3000/index.html" होना चाहिए। इसे अपने ब्राउज़र के पता बार में टाइप करें। आपकी साइट को दिखाया जाना चाहिए। अब इस प्रयास करें:
स्थानीय होस्ट: पोर्ट/xyz
app.get-methode में पहले दिखाया गया है, तो आप स्पष्ट कहते हैं कि अपने app.js: "/ xyz" के पीछे -path वहाँ खड़ा है "index.ejs" -फाइल। लेकिन इसका क्या मतलब है?
इसका मतलब है कि अब आप अपने ब्राउज़र के अपने पता बार में "locallhost: पोर्ट/xyz टाइप कर सकते हैं और आपकी primal index.html साइट की सामग्री दिखाया जाएगा, लेकिन आप देखेंगे कि layout.ejs की जेनरेट की गई सामग्री है। जादू
पीछे तर्क: (यदि आप फिर से लेआउट.ईजेएस पर एक नज़र डालें)
<% - बॉडी%> कमांड के साथ आप अपने लेआउट में केवल स्रोत कोड का एक स्निपेट लोड करते हैं। बस इसे करें: चलाने के बाद साइट पर राइट-क्लिक करें और आपको स्रोत-कोड दिखाएं। यह एक सामान्य HTML-sourcecode होना चाहिए। वास्तव में यह आपके लेआउट.ईजेएस का स्रोत कोड है, जिसने आपके कोड के कुछ स्निपेट ले लिए हैं।
सभी एक में:
के साथ% - बॉडी%> आपके layout.ejs में कमांड, आप कोड के स्निपेट में लोड कर सकते हैं। <% - बॉडी%> = "index.ejs", "contact.ejs", और इसी तरह। प्रत्येक .ejs फ़ाइल के लिए, आपको app.js को "get" -methode (उदाहरण निम्नानुसार) में विस्तारित करने की आवश्यकता है। यदि आपके पास और साइटें हैं (बेशक आपके पास सिर्फ एक साइट नहीं है), तो आपको नई साइट के लिए कोड की स्निपेट को .ejs फ़ाइल में रखना होगा (उदा .: contact.html => contact.ejs)। आप भी इस के लिए अपने app.js फ़ाइल का विस्तार करने की जरूरत है:
app.get('/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
या
app.get('/xyz/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
और भूल नहीं है .ejs-फाइलों में लिंक को बदलने के लिए: onclick = "खिड़की। location.replace ('contact.html') "आपके द्वारा app.get-methode में चुने गए नाम पर जाता है। उदाहरण के लिए यह onclick = "window.location.replace ('contact') में बदल जाता है"।
onclick = "window.location.replace ('से संपर्क')" onclick = "window.location.replace ('संपर्क')"
आप हो जाता है बस यूआरएल नाम से लिंक करें, फाइल पर नहीं। App.js अब आपके लिए इसे संभाल लेंगे :)
मैन, वे दस्तावेज़ों में उन्हें कैसे याद कर सकते हैं? –
एक पुराना धागा लाने के लिए नफरत है, लेकिन उसका जवाब कोई स्पष्टीकरण प्रदान नहीं करता है, क्या है। यह कथन कहां से संबंधित है? यह क्या करता है? आप संदर्भ में इसका उपयोग कैसे करते हैं? यह इतना निराशाजनक गैर-उत्तर है और मुझे नहीं लगता कि इसमें कितने वोट हैं। – Brian
प्रश्न यह समझता है कि <%= yield %> का अर्थ अन्य templating भाषाओं जैसे erb में है। यही कारण है कि यह अपवॉट हो रहा है, लेकिन वैसे भी, "लेआउट" में उपज वह स्थान है जिसमें आप "टेम्पलेट" प्रस्तुत करना चाहते हैं, जहां एक लेआउट को मूल टेम्पलेट के रूप में माना जा सकता है। –