जेड

Question

में लेआउट विरासत यदि आपको नहीं पता कि jade क्या है।
मैं टेम्पलेट विरासत system.My फ़ाइल संरचना के साथ समस्या हो रही है की तरह तो

/views/ 
    |-- layout.jade 
    /products/ 
     |-- index.jade 
     |-- product.jade 
/static/ 
    /stylesheets/ 
     |-- style.css 

समस्याओं है यह है कि जब उत्पाद पृष्ठ जो परम (स्थानीय होस्ट के रूप में एक आईडी प्राप्त करता है लोड हो रहा है: 3000/उत्पाद /: आईडी अगर/आईडी के लिए यह ठीक नहीं होगा), हालांकि लेआउट अभी भी सही तरीके से फैला हुआ है, यह स्टाइलशीट को ठीक से लोड नहीं करता है (पथ टूटा हुआ है)। मैं इसके आधा कर रहा हूं, हालांकि उत्पादों के सूचकांक पृष्ठ में स्टाइलशीट बस ठीक है।

Layout.jade

head 
    link(rel='stylesheet', href='stylesheets/style.css') 

Answer 1

यह शायद अपने href में रिश्तेदार पथ है। (/ पूर्ववर्ती स्टाइलशीट नोटिस) एक्सप्रेस प्रलेखन के आसपास खुदाई, मैं खोजने रहा है कि सबसे लोकप्रिय दृष्टिकोण इस तरह की साइट के आधार से स्टाइलशीट संदर्भ के लिए है:

link(rel='stylesheet','/stylesheets/style.css') 

यह आसान होने का लाभ मिलता है , और कई गहराई के मार्गों पर काम कर रहे हैं (/ के बारे में,/के बारे में/मुझे, आदि)। हालांकि, यह ऐप निर्देशिका गहराई का समर्थन नहीं करने का नकारात्मक है। उदाहरण के लिए, यदि आप अपने ऐप को होस्ट करना चाहते हैं: http://yourserver/yourapps/yourapp यह एक समस्या होगी। मुझे नहीं पता कि आप इस बारे में परवाह करते हैं या नहीं, अभिव्यक्ति के लिए अधिकांश उदाहरण निश्चित रूप से नहीं करते हैं :-)

हालांकि, यदि आप इसे सही तरीके से करना चाहते हैं, तो एक्सप्रेस जिथब पर एक उदाहरण है साइट: ब्लॉग। https://github.com/visionmedia/express/tree/master/examples/blog

यहां का दृष्टिकोण बेस यूआरएल को पकड़ने के लिए एक मिडलवेयर घटक का उपयोग करना है, और लेआउट व्यू में पारित स्थानीय लोगों में इसे सामान देना है। यहाँ अपने HTML कैसा लगेगा क्या करना है:

!!! 5 
html 
    head 
    title Blog 
    link(rel='stylesheet', href=base + '/style.css') 
    body 
    #container!= body 

महत्वपूर्ण बाहर की जाँच करने के लिए यदि आप इस दृष्टिकोण की आवश्यकता होती मिडलवेयर/locals.js हैं भागों, app.js जहां मिडलवेयर घटक ऊपर तार है, और layout.jade जहां बेस href का उपयोग किया जाता है।

हैप्पी कोडिंग!