web-dev-qa-db-fra.com

Inclure des blocs HTML à l'aide de node.js

C'est ce que je veux mais je ne peux probablement pas avoir:

En utilisant node.js et express et peut-être ejs, je voudrais, tout en écrivant un fichier HTML normal dans mon répertoire client, inclure côté serveur un bloc de modèle HTML. Ce serait bien aussi si je pouvais passer des variables dans l'inclusion à partir du document HTML.

Sooo quelque chose comme:

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

Y a-t-il quelque chose dans le monde des noeuds qui fonctionne comme ceci? Ou tout ce qui se rapproche et qui pourrait peut-être être adapté à cette fonctionnalité? Je ne voudrais pas l'utiliser exactement de la manière indiquée ici, mais c'est la fonctionnalité que je recherche.

J'ai jeté un œil sur le jade, le guidon, les braises et les braises, et ejs semble le plus proche. Peut-être l'un d'entre eux le fait-il déjà, mais je suis confus quant à la mise en œuvre.

Toute suggestion sera appréciée!

node.jsincludeexpresstemplatingejs
10
Jeremythuff

OK j'ai compris...

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

et dans/www j'ai les fichiers .html suivants:

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>

Tout cela passe, même comprend des inclus et du contenu statique. Tout cela est effectué sur des fichiers HTML, et dans un contexte qui ressemble à la création Web Vanilla.

++++ Oops +++++ Eh bien, j'ai presque tout. J'ai oublié que je voulais aussi pouvoir passer des variables dans l'inclusion à partir des modèles. Je n'ai pas encore essayé ... des idées?

++++ Mise à jour +++++

Ok je l'ai compris.

This la discussion a été claire, je suppose que je ne savais pas assez comment Ejs fonctionnait.

J'ai changé index.html pour commencer par les déclarations de variable:

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

et vous pouvez ensuite appeler ces variables depuis l’inclusion, quelle que soit la profondeur de leur imbrication.

Ainsi, par exemple, index.html inclut start.html, qui comprend header.html. Dans l'en-tête .html, je peux appeler {{= NomProjet}} dans l'en-tête même s'il a été déclaré dans index.html.

J'ai mis le tout sur github .

14
Jeremythuff

Je recommanderais nunjucks ou pejs . Nunjucks est inspiré de jinja, tandis que pejs est juste un support ejs + héritage, bloc et fichier.

pejs a quelques problèmes avec l'espace chomping pour le moment, mais c'est toujours très utile. Des deux, je préfère la couche de séparation qui vient avec les nunjucks.

Jade est assez cool et a le jeu de fonctionnalités que vous cherchez, mais il a une syntaxe très unique. Références pour jade: template heritage , blocks , includes

3
furydevoid

Restez simple, utilisez templatesjs

cela peut être fait facilement en utilisant templatesjs

fichier html [index.html] :

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

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

maintenant dans le fichier 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

});

vous avez terminé . templatesjs inclura automatiquement header.html et footer.html, il vous suffira de restituer le titre de la page.

une bonne aide peut être trouvée ici

  • installation :$ npm install templatesjs

J'espère que cela vous aidera

2
Imtiaz Chowdhury

Eh bien, je peux suggérer le moyen le plus simple.

l'utilisation de templatesjs sera l'option la plus simple ici, c'est un nouveau module qui rend ces choses si faciles

supposons que nous voulions inclure header.html dans 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);
 });

ne trouve rien de plus facile que cela. installer templatesjs

$ npm install templatesjs

1
Imtiaz Chowdhury

Jade autorise les inclusions côté serveur de blocs HTML. Toute variable étendue aux variables locales sera transmise au modèle jade inclus. Mais les deux fichiers doivent être au format syntaxe jade, pas HTML brut si vous voulez le faire.

Toute variable que vous souhaitez transmettre peut simplement être ajoutée à l’objet locals.

0
0xception