जेड के बजाय एक्सप्रेस में HTML का उपयोग करना


103

एक्सप्रेस के साथ Node.JS का उपयोग करते समय मैं जेड से कैसे छुटकारा पा सकता हूं? मैं सिर्फ सादे html का उपयोग करना चाहता हूं। अन्य लेखों में मैंने देखा है कि लोगों ने app.register () की सिफारिश की है जिसे अब नवीनतम संस्करण में हटा दिया गया है।

जवाबों:


78

आप इसे इस तरह से कर सकते हैं:

  1. Ejs स्थापित करें:

    npm install ejs
  2. अपने टेम्पलेट इंजन को app.js में ejs के रूप में सेट करें

    // app.js
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');
  3. अब आपकी रूट फाइल में आप टेम्प्लेट वेरिएबल असाइन कर सकते हैं

    // ./routes/index.js
    exports.index = function(req, res){
    res.render('index', { title: 'ejs' });};
  4. तब आप अपना html view / view directory में बना सकते हैं।


2
मैंने अभी नोड.जेएस का उपयोग शुरू किया है समाधान मेरे लिए स्पष्ट नहीं है। मेरी एक छोटी सी html वेबसाइट है। मुझे अपनी साइट के माध्यम से नोडमैलर का उपयोग करके ईमेल भेजने के लिए नोड की आवश्यकता है। मैंने आवश्यक सब कुछ स्थापित कर दिया है। हालाँकि, यह विचार करना होगा कि एक्सप्रेस का उपयोग करके मेरी वेबसाइट चलाने के लिए app.js फ़ाइल में क्या जाना चाहिए
user2457956

4
चर को कैसे प्रिंट करें titleHtml फाइल में ?
मास्टर योदा

3
अगर कोई अभी भी सोच रहा है कि चर को कैसे प्रिंट किया जाए, जैसे @MasterYoda ने पूछा, तो आप इसे html: <% = title%> पर इस तरह प्रिंट कर सकते हैं।
लुकास माइन

62

जेड भी html इनपुट को स्वीकार करता है।
शुद्ध html सबमिट करने के लिए बस लाइन के अंत में एक डॉट जोड़ें।
यदि वह आपके लिए चाल करता है तो प्रयास करें:

doctype html              
html. // THAT DOT
    <body>     
        <div>Hello, yes this is dog</div>
    </body>

PS - HTML बंद करने की कोई आवश्यकता नहीं है - यह जेड द्वारा स्वचालित रूप से किया जाता है।


7
सिद्धांत 5 अब पदावनत हो गया है। पहली पंक्ति के रूप में "doctype html" का उपयोग करें।
स्नोर्केलजेब्रा

डॉट के लिए डॉक्स: pugjs.org/language/plain-text.html#block-in-a-tag
Alexander Taubenkorb

18

एक्सप्रेस 3 के रूप में आप बस उपयोग कर सकते हैं response.sendFile

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});)

से आधिकारिक एक्सप्रेस API संदर्भ :

res.sendfile(path, [options], [fn]])

फ़ाइल को दिए गए पथ पर स्थानांतरित करें।

फ़ाइल नाम के विस्तार के आधार पर सामग्री-प्रकार की प्रतिक्रिया हेडर फ़ील्ड को स्वचालित रूप से डिफॉल्ट करता है। कॉलबैक fn(err)तब ट्रांसफर किया जाता है जब ट्रांसफर पूरा होता है या जब कोई त्रुटि होती है।

चेतावनी

res.sendFileHTTP कैश हेडर के माध्यम से क्लाइंट-साइड कैश प्रदान करता है लेकिन यह सर्वर-साइड पर फ़ाइल सामग्री को कैश नहीं करता है। उपरोक्त कोड प्रत्येक अनुरोध पर डिस्क को हिट करेगा


2
मेरा मानना ​​है कि ओपी अभी भी नियमित HTML सिंटैक्स के साथ कुछ प्रकार के टेम्प्लेटिंग का उपयोग करना चाहता है। sendfileआपको किसी भी टेम्प्लेटिंग को करने की अनुमति नहीं देता है क्योंकि यह सिर्फ एक फाइल से बाइट भेजता है। इसके अलावा, मैं sendfileइस तरह का उपयोग करने के खिलाफ सिफारिश करूंगा क्योंकि इसका मतलब है कि आप डिस्क को हर बार एक अनुरोध - एक विशाल अड़चन - में मार देंगे। उच्च-ट्रैफ़िक पृष्ठों के लिए, आपको वास्तव में इन-मेमोरी कैशिंग करना चाहिए।
josh3736

1
@ josh3736 अगर आप ओपी के इरादे के बारे में सही हैं, तो सवाल को सुधारना चाहिए। आप प्रत्येक अनुरोध पर डिस्क को मारने के बारे में सही हैं, मैं इस तथ्य के बारे में चेतावनी देने के लिए अपने उत्तर को बेहतर बनाऊंगा। कृपया निम्नलिखित के बारे में चेतावनी देने के लिए अपना सुधार करने पर विचार करें: यदि आप एक अनुकूलित इंजन को लागू करते हैं तो आपको कैचिंग फ़ीचर (यदि वांछित है) लागू करना चाहिए, तो इसे एक्सप्रेस द्वारा नियंत्रित नहीं किया जाएगा।
लैकोनाबास

17

मेरी राय में, HTML फ़ाइलों को पढ़ने के लिए ejs जितना बड़ा कुछ का उपयोग करना थोड़ा भारी है। मैंने अभी-अभी html files के लिए अपना स्वयं का टेम्पलेट इंजन लिखा है जो उल्लेखनीय रूप से सरल है। फ़ाइल इस तरह दिखती है:

var fs = require('fs');
module.exports = function(path, options, fn){
    var cacheLocation = path + ':html';
    if(typeof module.exports.cache[cacheLocation] === "string"){
        return fn(null, module.exports.cache[cacheLocation]);
    }
    fs.readFile(path, 'utf8', function(err, data){
        if(err) { return fn(err); }
        return fn(null, module.exports.cache[cacheLocation] = data);
    });
}
module.exports.cache = {};

मुझे मेरा HTMLEngine कहा जाता है, और जिस तरह से आप इसे इस्तेमाल करते हैं वह बस कह कर है:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');

11

app.register()मूल्यह्रास नहीं किया गया है, इसे सिर्फ app.engine()इसलिए नाम दिया गया है क्योंकि एक्सप्रेस 3 जिस तरह से टेम्पलेट इंजनों को संभालता है, उसमें बदलाव करता है

एक्सप्रेस 2.x टेम्पलेट इंजन संगतता के लिए निम्नलिखित मॉड्यूल निर्यात की आवश्यकता होती है:

exports.compile = function(templateString, options) {
    return a Function;
};

एक्सप्रेस 3.x टेम्पलेट इंजन को निम्नलिखित निर्यात करना चाहिए:

exports.__express = function(filename, options, callback) {
  callback(err, string);
};

यदि कोई टेम्पलेट इंजन इस पद्धति को उजागर नहीं करता है, तो आप भाग्य से बाहर नहीं हैं, यह app.engine()विधि आपको किसी भी फ़ंक्शन को एक्सटेंशन में मैप करने की अनुमति देती है। मान लीजिए कि आपके पास मार्कडाउन लाइब्रेरी है और .md फ़ाइलों को प्रस्तुत करना चाहते हैं, लेकिन इस लाइब्रेरी ने एक्सप्रेस का समर्थन नहीं किया है, तो आपका app.engine()कॉल इस तरह दिखाई दे सकता है:

var markdown = require('some-markdown-library');
var fs = require('fs');

app.engine('md', function(path, options, fn){
  fs.readFile(path, 'utf8', function(err, str){
    if (err) return fn(err);
    str = markdown.parse(str).toString();
    fn(null, str);
  });
});

यदि आप एक टेम्प्लेटिंग इंजन की तलाश कर रहे हैं जो आपको 'प्लेन' HTML का उपयोग करने की अनुमति देता है, तो मैं doT की सलाह देता हूं क्योंकि यह बहुत तेज़ है

बेशक, ध्यान रखें कि एक्सप्रेस 3 व्यू मॉडल पत्तियां आपको (या आपके टेम्प्लेटिंग इंजन) तक कैशिंग दिखाई देती हैं। उत्पादन के माहौल में, आप शायद अपने विचारों को स्मृति में कैश करना चाहते हैं ताकि आप हर अनुरोध पर डिस्क I / O नहीं कर रहे हैं।


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

@ josh3736: फ़ायरफ़ॉक्स 41 में आपका "बहुत तेज़" हाइपरलिंक काम करता है, लेकिन क्रोमियम संस्करण 45.0.2454.101 उबंटू 14.04 (64-बिट) में परीक्षण चलाने में विफल रहता है। मुझे आश्चर्य है क्योंकि।
लोनी बेस्ट

4

आप EJS का उपयोग एक्सप्रेस के साथ कर सकते हैं जो टेम्पलेट HTML हैं लेकिन चर का समर्थन करते हैं। यहाँ एक अच्छा ट्यूटोरियल है कि एक्सप्रेस में ईजेएस का उपयोग कैसे करें।

http://robdodson.me/blog/2012/05/31/how-to-use-ejs-in-express/


4

जेड के बजाय HTML के रेंडर इंजन को स्वीकार करने के लिए आप निम्नलिखित चरणों का पालन कर सकते हैं;

  1. अपनी निर्देशिका में समेकित और स्वाइप स्थापित करें ।

     npm install consolidate
     npm install swig
  2. अपने app.js फ़ाइल में निम्न पंक्तियाँ जोड़ें

    var cons = require('consolidate');
    
    // view engine setup
    app.engine('html', cons.swig)
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', html');
  3. "व्यू" फ़ोल्डर के अंदर। आप नोड सर्वर को पुनरारंभ करें और ब्राउज़र में ऐप शुरू करें।

यद्यपि यह html को बिना किसी समस्या के रेंडर करेगा, लेकिन मैं आपको इसे सीखकर JADE का उपयोग करने की सलाह दूंगा। जेड एक अद्भुत टेम्पलेट इंजन है और इसे सीखने से आपको बेहतर डिजाइन और मापनीयता हासिल करने में मदद मिलेगी।


1
जेड के साथ एकमात्र बड़ी समस्या इंडेंटेशन है। यदि आपको यह गलत लगता है, तो कोड संकलन नहीं करेगा। इसके अलावा, मुझे आश्चर्य है कि जेड तथ्य यह है कि केवल एक चीज के अलावा अन्य क्यों हटना कोड है ...
zapper

4

पहले नीचे लाइन का उपयोग करके टेम्पलेट इंजन के संगतता संस्करण की जांच करें

express -h

तब आपको सूची से कोई दृश्य नहीं देखना होगा। कोई दृश्य नहीं चुनें

express --no-view myapp

अब आप सार्वजनिक फ़ोल्डर में अपने सभी html, css, js और छवियों का उपयोग कर सकते हैं।


3

ठीक है, ऐसा लगता है कि आप स्थिर फ़ाइलों की सेवा करना चाहते हैं। और उस http://expressjs.com/en/starter/static-files.html के लिए एक पृष्ठ है

विचित्र कि कोई भी दस्तावेज़ से लिंक नहीं कर रहा है।


"विचित्र कि कोई भी दस्तावेज़ से लिंक नहीं कर रहा है" मैं सहमत हूँ कि यह एक्सप्रेस में एक अलग दृश्य भाषा का उपयोग करने के लिए एक तुच्छ मामला है।
पिक्सेल 67

1

आपके विचार में आपके मार्ग पहले से ही परिभाषित हैं या यह जानते हैं कि यह कैसे करना है।

app.get('*', function(req, res){
    res.sendfile('path/to/your/html/file.html');
});

नोट: इस मार्ग को अन्य सभी के बाद रखा जाना चाहिए क्योंकि * सब कुछ स्वीकार करता है।


1

चूँकि जेड एचटीएमएल को सपोर्ट करता है, अगर आप सिर्फ .html एक्स्ट करवाना चाहते हैं, तो आप ऐसा कर सकते हैं

// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

तब आप बस फ़ाइल को जेड से html तक के विचारों में बदलते हैं।


क्या आपको html मार्कअप से पहले 'डॉट' या पीरियड नहीं डालना है?
गस क्रॉफोर्ड


-10

यदि आप सादे html का उपयोग नोडजेएस में, जेड का उपयोग किए बिना करना चाहते हैं .. या जो भी:

var html = '<div>'
    + 'hello'
  + '</div>';

मैं उस के साथ ठीक कर रहा हूँ

नियंत्रण होने पर लाभ सादगी है। आप कुछ ट्रिक्स का उपयोग कर सकते हैं, जैसे '<p>' + (name || '') + '</p>', टर्नरी .. आदि

यदि आप ब्राउज़र में एक इंडेंट कोड चाहते हैं, तो आप ऐसा कर सकते हैं:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

और वसीयत में \ t या \ n का उपयोग करें। लेकिन मैं इसके बिना पसंद करता हूं, साथ ही यह तेज है।


मैं एक्सप्रेस में HTML फ़ाइलों का उपयोग करने में सक्षम होना चाहता हूं (बनाम सादे नोड.जेएस)
संचित गुप्ता

ooooohh क्षमा करें (i'm फ्रेंच: p), ताकि आप fsमॉड्यूल का उपयोग कर सकें । fs.readFile(htmlfile, 'utf8', function (err, file) {
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.