Express 中的静态文件呈现原始代码而不是呈现正确的 HTML

Question

我希望我的layout.hbs 文件中的锚链接链接到layout2.hbs。但是，它会呈现原始代码页面，而不是呈现正确的 HTML。

我的控制台消息：

GET / 304 28.673 ms - -
GET /homepage.css 304 5.198 ms - -
GET /print2.css 304 8.190 ms - -
GET /layout2.hbs 304 0.555 ms - -

包含路由的我的 index.js 文件：

var express = require('express');
var router = express.Router();
var db = require('monk')('localhost:27017/');
var userData = db.get('user-data');
var app = require('express')();

router.use(express.static('./views'));

router.get('/', function(req,res,next){
    res.render('layout');
});

router.get('/layout2', function(req,res,next){
    res.render('layout2');
});

module.exports = router;

我的 app.js 文件包含把手和express.static 代码：

var express = require('express');
var app = require('express')();
var path = require('path');
var port = require('port');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
const queryString = require('query-string');

var routes = require('./routes/index.js');
var app = express();

// view engine setup
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'index', layoutsDir: __dirname + '/views'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'views')));


app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

layout.hbs中的锚链接：

<a target="a_blank" rel="noreferrer" href="/layout2.hbs"><img class="column2 arrow" src="http://i.imgur.com/FrvlU9D.png" alt="Arrow" title="Cleric Beast"/></a>

我的文件目录：

projectFolder
      │
      |
      |   
    public------print2.css
      |         style.css     
      |           
      | 
      |   
    routes-------index.js
      |
      |
      |
    views-------layout.hbs
      |         layout2.hbs
      |         index.hbs
      |
    app.js
  package.json

我希望当layout.hbs 中的锚链接被按下时，layout2.hbs 将呈现。虽然 layout2.hbs 确实加载了 - 它提供一页代码而不是呈现正确的 HTML。

Answer 1

目前您的路由器只知道如何在客户端点击根“/”时呈现“布局”模板。 在路由器代码中添加以下行：

router.get('/layout2', function(req,res,next){
    res.render('layout2');
});

在车把模板中，链接应该引用“/layout2”

Answer 2

我使用的答案是将我的 .hbs 文件更改为 .html 文件。这为我的目的正确加载了页面。