Include HTML blocks Using node.js

前端未结

关注

 5  621

This is what I want but probably can\'t have:

Using node.js and express and maybe ejs, I would like to, while writing a regular HTML file in my client dir, server-side-i

相关标签:

5条回答

被撕碎了的回忆

2021-02-04 09:04

Jade does allow server side includes of HTML blocks and any locals scoped variable will get passed to the included jade template. But the both files must be in jade syntax format not raw HTML if you want to do this.

Any variable you would like to pass can just be added to the locals object.

0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2021-02-04 09:11

var express = require('express');
var app = express();
var path = require('path');

app.get("/" ,(req,res) => {
     res.sendFile(path.join(__dirname+'../../templates/index.html')); 
});
app.use(express.static(path.join(__dirname+'../../templates/public')));

This way you can call HTML where ever the folder that contains HTML. if you want to include CSS and Javascript use express.static see the last line of code

0 讨论(0)

清歌不尽

2021-02-04 09:14

I would recommend nunjucks or pejs. Nunjucks is jinja-inspired, while pejs is just ejs + inheritance, block, and file support.

pejs has some issues with space chomping at the moment, but it's still pretty useful. Of the two, I prefer the separation layer that comes with nunjucks.

Jade is pretty cool and has the feature-set you're looking for, but it has a very unique syntax. References for jade: template inheritance, blocks, includes

0 讨论(0)
发布评论:

提交评论
- 加载中...

时光取名叫无心

2021-02-04 09:18

OK I got it...

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

and in /www I have the following .html files:

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>

It all comes through, even includes in includes and static content. It is all performed on html files, and in a context that feel like vanilla web authoring.

++++Oops+++++ Well I almost all of it. I forgot that I also wanted to be able to pass variables into the include from the templates. I haven't tried that yet... any ideas?

++++Update+++++

Ok I figured it out.

This discussion made it clear, i guess i just didn't know enough about how ejs worked.

I have changed index.html to begin with variable declarations:

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

and then you can call these variables from within the includes, no matter how deeply they are nested.

So for instance, index.html includes start.html which includes header.html. Within header .html I can call {{= projectName}} within the header even though it was declared inside index.html.

I have put the whole thing on github.

0 讨论(0)

既然无缘

2021-02-04 09:21
Keep it simple, use templatesjs

this can be done easily using templatesjs

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

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

});
```
you are done . templatesjs witll automatically include header.html and footer.html all you have to do is to render the page title.

a good help can be found here
- installation : $ npm install templatesjs
Hope This Helps
0 讨论(0)
发布评论:

提交评论
- 加载中...