Express & EJS - layout.ejs 未使用答案

【问题标题】：Express & EJS - layout.ejs not usedExpress & EJS - layout.ejs 未使用
【发布时间】：2013-02-08 19:43:38
【问题描述】：

我正在尝试将 EJS 作为 Express 的视图引擎。看来我的 layout.ejs 没有使用。我的“视图”文件夹中有两个视图 index.ejs 和 layout.ejs。似乎 index.js 已呈现，但 layout.ejs 未呈现。 layout.ejs 文件应该包含一个 CSS 文件，但是当页面在浏览器中呈现时，它不存在。我放置在 layout.ejs 文件中的任何测试测试文本都不会随响应一起输出。

我是否缺少额外的配置步骤？

谢谢！

我的 server.js 代码：

var express = require('express');

var app = express();
    app.set('view engine', 'ejs');
    app.use(express.static(__dirname + '/public'));
    app.get('/', function(req, res){
            res.render('index.ejs', {title: 'EJS Engine'});
    });

    app.listen(8080);

在我的 layout.ejs 中，我链接到一个位于公共文件夹中的 css 文件。

layout.ejs：

<!DOCTYPE html>
       <html>
       <head>
           <title><%= title %></title>
            <link rel="stylesheet" type="text/css" href="main.css">
       </head>
       <body>
              <%- body %>
       </body>
       </html>

index.ejs

<div id="container">
        index.html
</div>

【问题讨论】：

显式设置views目录的位置...默认为CWD/views
我不得不使用 express-partials 来获得支持。
EJS视图引擎不应该默认使用layout.ejs吗？
默认使用/views目录下的layout.ejs。否则需要使用 app.set('views', __dirname + '/'); 明确指定位置
@Nick "Currently EJS has no notion of blocks, only compile-time includes。"否则布局是 feature of Express 尽管 2.x。如果您使用的是 3.x，则从 "View system changes" -- "要使用 EJS 获取布局功能，您可以使用 express-partials 或 ejs-locals。"

标签： node.js express ejs

【解决方案1】：

app.set('view options', { layout:'layout.ejs' });

将 layout.ejs 放入您的视图文件夹。或者，您可以将 layout.ejs 放入 views/layouts 文件夹，然后使用

app.set('view options', { layout:'layouts/layout.ejs' });

【讨论】：

【解决方案2】：

这是您需要的模块： https://www.npmjs.org/package/express-ejs-layouts

执行以下操作：

npm install express-ejs-layouts // install the layout module from the command line

var express = require("express")
    ,path = require('path')
    ,fs = require('fs')
    ,expressLayouts=require("express-ejs-layouts") // add this requirement
    , app = express();

app.use(express.bodyParser());
app.use(expressLayouts); // add this use()
app.use(express.static(__dirname));

现在 ejs 引擎应该使用您的布局。

【讨论】：

这个答案对我有帮助，因为我使用 Express 4 和多个视图文件夹。

【解决方案3】：

我也有类似的问题。就我而言，我宁愿使用 Jade，但我需要为特定项目提供更多“html”样式的模板引擎。起初，我考虑使用 express-partials 或 ejs-locals（如 Jonathan Lonowski 的评论中所述），甚至通过 Jade 模板中的管道或点语法使用 html（有关该选项的更多信息，请参阅 here 和 this SO邮政）。我无法将 express-partials 和 ejs-locals 的其他依赖项引入此项目。这两个项目看起来不错，可能会满足您的需求。

如果您不想使用这些项目，可以执行以下操作：

views/layout-head.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The title</title>
</head>
<body>

views/layout-foot.ejs

</body>
</html>

views/index.ejs（或任何其他页面）

<% include layout-head %>
This is the index page - <%= title %>
<% include layout-foot %>

路由/index.js

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
}

这不是最佳解决方案，但它确实有效。我的大部分应用程序将是一个单页应用程序，并且我必须在其中工作一些其他限制，因此这可以满足我的需要。在许多情况下，这可能不是最佳解决方案 - 特别是如果您有复杂和/或不断变化的布局。

【讨论】：