包含HTML块使用node.js [英] Include HTML blocks Using node.js
问题描述
这是我想要的，但可能无法使用：
使用node.js和express和ejs，我想在编写一个常规的HTML文件在我的客户端目录中，服务器端 - 包含HTML的模板块。如果我可以将变量传递给HTML文档中的include，那么这也很酷。
Sooo像：
<！doctype html>
< html>
< head>
<％include head，（{title：Main Page}）％>
< / head>
< body>
<％include header，（{pageName：Home，color：red}）％>
...
<％％footer％>>
< / body>
< / html>
节点世界中有没有这样的工作？或任何接近的东西，可能适应这个功能？我不会按照这里所示的方式使用它，但这是我正在寻找的功能。
我已经看过玉，手把，ember和ejs，而ej似乎是最接近的。也许其中一个已经这样做了，但我只是对实现感到困惑。
任何建议都会很棒！
确定我得到了...
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'）。
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] - GT！;
<！ - [if IE 7]> < html class =no-js lt-ie9 lt-ie8>百分比抑制率ENDIF] - GT！;
<！ - [if IE 8]> < html class =no-js lt-ie9>百分比抑制率ENDIF] - GT！;
<！ - [if gt IE 8]><！ - > < html class =no-js> <！ - <！[ENDIF] - GT;
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA兼容content =IE = edge，chrome = 1>
< title>< / title>
< meta name =descriptioncontent =>
< meta name =viewportcontent =width = device-width>
{{include include.css.html}}
< script src =js / vendor / modernizr-2.6.2.min.js>< /脚本>
< / head>
< body>
include_css.html
< link rel =stylesheethref =css / normalize.css>
< link rel =stylesheethref =css / bootstrap.css>
< link rel =stylesheethref =css / bootstrap-responsive.css>
< link rel =stylesheethref =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（分析）：将UA-XXXXX-X更改为您的网站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>
这一切都通过，甚至包括在包含和静态内容。它都是在html文件上执行的，并且在一个感觉像香草网络创作的上下文中。
++++哎呀+++++
我几乎都是这样。我忘了我也想能够将变量传递给模板的包含。我还没有尝试过...任何想法？
++++更新+++++
计算出来。
这个的讨论清楚了我想我只是不了解ejs的工作原理。
我已经将index.html改为开始变量声明：
{{
var pageTitle ='Project Page';
var projectName ='项目标题';
}}
然后您可以从包含内部调用这些变量，无论如何深深地他们是嵌套的。
所以例如，index.html包括start.html，其中包括header.html。在标题.html中，我可以在标题中调用{{= projectName}}，即使它在index.html中被声明。
我将整个事情放在 github 上。 p>
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-include a template block of HTML. It would be cool also if I could pass variables into the include from the HTML document.
Sooo something like:
<!doctype html>
<html>
<head>
<%include head, ({title: "Main Page"}) %>
</head>
<body>
<% include header, ({pageName: "Home", color: "red"}) %>
...
<<% include footer%>>
</body>
</html>
Is there anyhting in node world that works like this? Or any thing that comes close and that could be maybe adapted for this functionality? I would not use it exactly in the way indicated here, but this is the functionality that I am looking for.
I have looked into jade, handlebars, ember and ejs, and ejs seems to come the closest. Maybe one of these does this already, but I am just confused about the implementation.
Any suggestions would be great!
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.
这篇关于包含HTML块使用node.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
