Question

我觉得这个问题很简单，我很惊讶我找不到答案，因为我确信之前有人问过。

我正在使用node.js和express.js，我想要做的就是编写一个包含在每个页面上的静态header.html文件。该文件将包含所有元标记和css文件等，等等。

因此，当我的服务器收到对web.com/blog/blog-post-3的请求时，它会 1.加载我的header.html文件 2.加载实际content.html文件中的内容

它与<?php include file.html ?> ....

的概念相同

提前致谢，对不起，如果有人问过这个!! XD

Answer 1

我在自己的应用程序中使用的方法是使用支持包含的视图引擎。我一直在使用Jade，现在称为Pug。

https://pugjs.org

通过这种方法，您可以连接Express应用程序，通过路线提供您的观点。基本上，这涉及设置保存视图的目录，设置视图引擎（在我的示例中为Jade）以及定义其响应呈现视图的URL路由。然后在您的视图中，您将能够定义所需的任何包含。

一些示例代码（可能不完整，但应该提供一般性的想法）：

app.js

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.get('/', function (req, res) {
  res.render('index');
});

views / index.jade - 主视图

doctype html
html
  head
    include includes/head.jade
  body
    ...

views / includes / head.jade - include

link(href='index.css', rel='stylesheet', type='text/css')
...

Answer 2

你可以这样做： -

在节点服务器上： -

var http = require('http');
var read =  require('fs').readFileSync;

http.createServer((req,res)=>{
    res.setHeader('Content-Type','text/html');
    res.end(new String(read('./headers.html')).replace('<my-content></my-content>',read('./content.html')));
}).listen(4000)

Headers.html： -

<html>
<!--custom css links here-->

<my-content></my-content>
<!-- custom scripts -->
</html>

Content.html： -

<body>Temp</body>

全局头文件Node.js＆amp; Express.js

2 个答案: