如何使用node.js呈现多个html页面？
要做到这一点：
<html> <!-- head --> <head> <title>SpaceGame2</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> <link rel="stylesheet" href="css/spaceGame.css"> <!-- <link rel="stylesheet" href="css/normalize.css"> --> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet"> </head> <body> <p class="testing"></p> html page <!-- Footer --> <script src="https://unpkg.com/vue"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </body> </html> 通过将其分为三个单独的文件head.html，footer.html和main.html。 main.html将有所不同，但其他两个将是相同的。
码：
var express = require('express'); var partial = require('express-partial'); var app = express(); app.listen(3000, function() { console.log('Listening on port 3000'); }); var path = require("path"); app.use(express.static(path.resolve('./'))); app.use(express.static(path.resolve('./Static'))) app.use(express.static(path.resolve('./Views'))) var partial = require('express-partial'); var url = require('url'); app.get('/*', function(req, res) { var path = require("path"); var pathname = url.parse(req.url).pathname; var originPoint = GetOriginPoint(pathname); if (pathname == "" || pathname == "/") { pathname = "/OverView"; } // res.renderPartials({ // Head: { data: path.resolve('./Views/Layout/head') }, // Main: { data: path.resolve('./Views' + originPoint + pathname + '.html') }, // Head: { data: path.resolve('./Views/Layout/footer') }, // }); res.sendFile(path.resolve('./Views' + originPoint + pathname + '.html')); });
试图导入HTML标记中的文件，尝试使用renderpartials，它不工作，唯一的方法，我知道我可以做到这一点是通过加载主页面，并有一个自定义脚本，从服务器获取两个HTML页面，但这是不desiedred，我假设有这样的事情：
app.get('/', function(req, res) { var content = []; content.push("head.html") content.push("main.html") content.push("footer.html") res.sendFile(content); });
使用EJS模板语言 w / Express，您将能够达到任何标记您的HTML的目标。 只需通过npm安装（例如： npm link ejs在您的项目位置）。
然后将快速引擎设置为ejs`app.set（'view engine'，'ejs'）;
完成之后，只需调用一个render方法即可
app.get('/', (req, res) => { // render `index.ejs` with some data res.render('index', { variable: 'value' }) });
经过一番思考之后，我决定用express-handlerb去解决这个问题：
var hbs = require('express-handlebars'); app.engine('hbs', hbs({ extname: 'hbs', defaultLayout: 'layout', layoutsDir: orgininPath.resolve('./Views/Layout/') })); app.set('view engine', 'hbs');
hbs文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> <link rel="stylesheet" type="text/css" href="/Static/css/spaceGame.css"> <!-- <link rel="stylesheet" href="css/normalize.css"> --> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet"> <title>{{title}}</title> </head> <body> {{{body}}} <!-- Footer --> <script src="https://unpkg.com/vue"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/Static/script/someTest.js"></script> </body> </html>