2013-05-04 23 views
10

का उपयोग करते हुए यह वह जगह है जो मैं चाहता एचटीएमएल ब्लॉकों को शामिल करें, लेकिन शायद हो सकता है नहीं:Node.js

Node.js का उपयोग करना और व्यक्त करने और शायद EJS, मैं, चाहते हैं, जबकि मेरे मुवक्किल में एक नियमित HTML फ़ाइल लेखन डीआईआर, सर्वर-साइड-एचटीएमएल का टेम्पलेट ब्लॉक शामिल है। यह भी अच्छा होगा अगर मैं HTML दस्तावेज़ से शामिल चर में पास कर सकता हूं।

तरह

Sooo कुछ:

<!doctype html> 
<html> 
    <head> 
    <%include head, ({title: "Main Page"}) %> 
    </head> 
    <body> 
     <% include header, ({pageName: "Home", color: "red"}) %> 
    ... 
     <<% include footer%>> 
    </body> 
</html> 

नोड दुनिया में anyhting है कि इस तरह काम करता है वहाँ है? या कोई चीज जो करीब आती है और इसे शायद इस कार्यक्षमता के लिए अनुकूलित किया जा सकता है? मैं इसे यहां बताए गए तरीके से बिल्कुल उपयोग नहीं करता, लेकिन यह वह कार्यक्षमता है जिसे मैं ढूंढ रहा हूं।

मैंने जेड, हैंडलबार्स, एम्बर और ईजेएस में देखा है, और ईजे निकटतम आते हैं। शायद इनमें से एक यह पहले से ही करता है, लेकिन मैं सिर्फ कार्यान्वयन के बारे में उलझन में हूं।

कोई सुझाव बहुत अच्छा होगा!

उत्तर

13

ठीक मुझे मिल गया ...

server.js

var express =  require('express'); 
var server =  express(); 
var ejs = require('ejs'); 
ejs.open = '{{'; 
ejs.close = '}}'; 


var oneDay = 86400000; 
server.use(express.compress()); 

server.configure(function(){ 
    server.set("view options", {layout: false}); 
    server.engine('html', require('ejs').renderFile); 
    server.use(server.router); 
    server.set('view engine', 'html'); 
    server.set('views', __dirname + "/www"); 
}); 


server.all("*", function(req, res, next) { 
    var request = req.params[0]; 

     if((request.substr(0, 1) === "/")&&(request.substr(request.length - 4) === "html")) { 
     request = request.substr(1); 
     res.render(request); 
    } else { 
     next(); 
    } 

}); 

server.use(express.static(__dirname + '/www', { maxAge: oneDay })); 

server.listen(process.env.PORT || 8080); 

और/www में मैं निम्नलिखित .html फ़ाइलें:

index.html

 {{include head.html}} 
{{include header.html}} 

<p class="well">Hello world!</p> 

{{include footer.html}} 

head.html

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 

     {{include include.css.html}} 

     <script src="js/vendor/modernizr-2.6.2.min.js"></script> 
    </head> 
    <body>  

include_css.html

 <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
     <link rel="stylesheet" href="css/bootstrap-responsive.css"> 
     <link rel="stylesheet" href="css/main.css"> 

header.html

<div class="well"> 
     <h1>HEADER</h1> 
</div> 

footer.html

  <div class="well"> 
      <h1>FOOTER</h1> 
     </div> 


     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 
     <script src="js/plugins.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/main.js"></script> 

     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
     <script> 
      var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; 
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 
      g.src='//www.google-analytics.com/ga.js'; 
      s.parentNode.insertBefore(g,s)}(document,'script')); 
     </script> 
    </body> 
</html> 

यह सब के माध्यम से आता है, यहां तक ​​शामिल भी शामिल है और स्थिर सामग्री में। यह सब एचटीएमएल फाइलों पर किया जाता है, और एक संदर्भ में जो वेनिला वेब संलेखन की तरह महसूस करता है।

++++ ओप्स +++++ ठीक है, मैं लगभग सभी इसे। मैं भूल गया कि मैं भी टेम्पलेट्स से शामिल चर में चर को पारित करने में सक्षम होना चाहता था। मैंने अभी तक कोशिश नहीं की है ... कोई विचार?

++++ अद्यतन +++++

ठीक है, मैं यह पता लगा।

This चर्चा ने इसे स्पष्ट कर दिया, मुझे लगता है कि मुझे बस इतना पता नहीं था कि ejs कैसे काम करता है।

मैं चर घोषणाओं के साथ शुरू index.html बदल गए हैं:

{{ 
    var pageTitle = 'Project Page'; 
    var projectName = 'Project Title'; 
}} 

और उसके बाद आप इन चर के भीतर से भी शामिल है चाहे कितना गहरा वे नेस्टेड रहते हैं कॉल कर सकते हैं,।

तो उदाहरण के लिए, index.html में start.html शामिल है जिसमें header.html शामिल है। हेडर के भीतर। एचटीएमएल मैं हेडर के भीतर {{= projectName}} को कॉल कर सकता हूं भले ही इसे index.html के अंदर घोषित किया गया हो।

मैंने पूरी बात github पर रखी है।

+0

आपको <% हेडर%> –

2

मैं nunjucks या pejs की अनुशंसा करता हूं। नुनजक्स जिंजा से प्रेरित है, जबकि pejs सिर्फ ejs + विरासत, ब्लॉक, और फ़ाइल समर्थन है।

पीजेएस में इस समय अंतरिक्ष चंपिंग के साथ कुछ समस्याएं हैं, लेकिन यह अभी भी बहुत उपयोगी है। दो में से, मैं अलग-अलग परत पसंद करता हूं जो ननजक्स के साथ आता है।

Jade बहुत अच्छा है और इसमें सुविधा-सेट है जिसे आप ढूंढ रहे हैं, लेकिन इसमें एक बहुत ही अद्वितीय वाक्यविन्यास है। जेड के लिए संदर्भ: template inheritance, blocks, includes

+0

Nunjucks के लिए +1 स्थापित करें। http://jlongster.github.io/nunjucks/templating.html#include –

0

जेड की अनुमति देने के सर्वर साइड HTML ब्लॉक के भी शामिल है और किसी भी स्थानीय लोगों scoped चर शामिल जेड टेम्पलेट के लिए पारित हो जाएगा करता है। लेकिन यदि आप यह करना चाहते हैं तो दोनों फाइलें जेड सिंटैक्स प्रारूप में कच्ची HTML नहीं होनी चाहिए।

कोई भी वेरिएबल जिसे आप पास करना चाहते हैं उसे स्थानीय ऑब्जेक्ट में जोड़ा जा सकता है।

1

इसे आसान बनाएं, templatesjs

इस किया जा सकता है का उपयोग आसानी से templatesjs

html फ़ाइल का उपयोग करते हुए [index.html]:

<head> 
    <title> <%title%> </tile> 
</head> 

<body> 
    <%include header.html%> 
    ........ 
    <%include footer.html%> 
</body> 
</html> 

अब Node.js फ़ाइल में:

var tjs = require("templatesjs") 
fs.readFile("./index.html", function(err,data){ // provided the file above is ./ index.html 
    if(err) throw err; 
    tjs.set(data); // invoke it 
    tjs.render("title", "home");//render the page title 

}); 

आप कर चुके हैं। templatesjs witll स्वचालित रूप से header.html और footer.html को शामिल करता है जो आपको पृष्ठ शीर्षक प्रस्तुत करना है।

एक अच्छा मदद पाया जा सकता है here

  • स्थापना: $ npm install templatesjs

आशा है कि यह मदद करता है

+0

शामिल करना होगा, इसलिए "node.js" की आवश्यकता है/readFile कथन/फ़ंक्शन बस मेरी server.js फ़ाइल में जाएं, जहां मैं अपना एक्सप्रेस सेटअप और मार्ग संभालने जा रहा हूं? – tonejac

1

खैर मैं सबसे आसान तरीका सुझा सकते हैं।

templatesjs का उपयोग कर यहाँ सबसे आसान विकल्प हो जाएगा, यह एक नया मॉड्यूल जो इस प्रकार की चीजें इतनी आसान

मान लेते हैं हम header.html सूचकांक के अंदर शामिल करना चाहते हैं बनाता है।एचटीएमएल

एचटीएमएल

<body> 
    <%include header.html%> 
</body> 

Node.js

var temp = require('templatesjs'); 
fs.readFile("./index/html), function(err,data){ 
    if(err) throw err; 
    var output = temp.set(data); 
    res.end(output); 
}); 

कुछ भी इस की तुलना में आसान नहीं मिल रहा। templatesjs

$ npm install templatesjs