HTML-Blöcken node.js

Dies ist, was ich will, aber wohl nicht haben können:

Verwenden node.js und express und vielleicht ejs, ich möchte beim schreiben einer regulären HTML-Datei in meinem client dir, server-side-include eine template-block von HTML. Es wäre cool, auch wenn ich könnte die übergabe von Variablen in der include-aus dem HTML-Dokument.

Sooo etwas wie:

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

Ist es anyhting Knoten in Welt, die funktioniert so? Oder jede Sache, die kommt in der Nähe und könnte vielleicht angepasst für diese Funktionalität? Ich würde es nicht benutzen, genau in der angegebenen Weise hier, aber dies ist die Funktionalität, die ich Suche.

Habe ich in jade, LENKER, ember und ejs, und ejs zu kommen scheint am nächsten. Vielleicht eines von diesen tun dies bereits, aber ich bin nur verwirrt über die Umsetzung.

Irgendwelche Vorschläge wäre toll!

InformationsquelleAutor Jeremythuff | 2013-05-04

OK ich habe es...

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);

und in /www habe ich Folgendes .html-Dateien:

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>

Es kommt alles durch, selbst umfasst in includes und statische Inhalte. Es ist alles erfolgt auf html-Dateien und in einem Kontext, fühlen Sie sich wie Vanille-web-authoring.

++++Hoppla+++++
Gut das ich fast alles. Ich vergaß, dass ich auch wollte, kann die übergabe von Variablen in der include-aus den Vorlagen. Ich habe nicht versucht, noch nicht... irgendwelche Ideen?

++++Update+++++

Ok ich habe es herausgefunden.

Diese Diskussion deutlich gemacht, dass ich einfach nicht genug darüber zu wissen, wie ejs gearbeitet.

Habe ich geändert index.html um zu beginnen mit Variablen Deklarationen:

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

und dann nennen Sie können diese Variablen innerhalb der beinhaltet, egal wie tief Sie verschachtelt sind.

So zum Beispiel, index.html enthält start.html die beinhaltet header.html. Innerhalb der header .html kann ich nennen {{= projectName}} in den header, obwohl es erklärt wurde, innerhalb index.html.

Habe ich das ganze auf github.

Sie Müssen verwenden Sie <% include header%>

InformationsquelleAutor Jeremythuff

2

Ich würde empfehlen, nunjucks oder pejs. Nunjucks ist jinja-inspiriert, während pejs ist nur ejs + erbschaft -, block-und Datei-Unterstützung.

pejs einige Probleme mit dem Raum scharrt im moment, aber es ist immer noch ziemlich nützlich. Von den beiden bevorzuge ich die Trennung Schicht, kommt mit nunjucks.

Jade ist ziemlich cool und hat die feature-set, die Sie suchen, aber es hat eine sehr einzigartige syntax. Referenzen für jade: template-Vererbung, blockiert, beinhaltet

+1 für Nunjucks. jlongster.github.io/nunjucks/templating.html - #include

InformationsquelleAutor furydevoid
2

Halten Sie es einfach, wählen templatesjs

diese kann getan werden einfach mit templatesjs

html-Datei[index.html] :
```
   <head>
    <title> <%title%> </tile>
</head>

<body>
    <%include header.html%>
    ........
    <%include footer.html%>
</body>
</html>
```
jetzt in node.js Datei:
```
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

});
```
sind Sie fertig . templatesjs witll automatisch header.html und footer.html alles, was Sie tun müssen ist, die Seite zu Rendern Titel.

eine gute Hilfe gefunden werden kann hier
- installation :
  $ npm install templatesjs
Hoffe, Das Hilft

So ist die "node.js" verlangen/readFile-Anweisung, Funktionen, gehen Sie einfach in meine server.js Datei, wo ich bin, mit meiner express-setup und-Routen?

InformationsquelleAutor Imtiaz Chowdhury
1

Gut kann ich empfehlen der einfachste Weg.

mit templatesjs werden die einfachste Möglichkeit hier, es ist ein neues Modul, das macht solche Dinge so einfach

nehmen wir an, wir wollen header.html im inneren index.html

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);
 });
```
nicht finden können, nichts einfacher als das.
installieren templatesjs

$ npm install templatesjs

InformationsquelleAutor Imtiaz Chowdhury
0

Jade erlaubt, server side includes in HTML-Blöcke und alle einheimischen scoped variable übergeben bekommen, die enthalten jade-Vorlage. Aber die müssen sich beide Dateien im jade-syntax raw-format nicht "HTML", wenn Sie dies tun wollen.

Jede variable, die Sie übergeben können einfach Hinzugefügt werden, um die einheimischen-Objekt.

InformationsquelleAutor 0xception

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.