4

我尝试将 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 文件。

布局.ejs：

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

索引.ejs

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

3 回答 3

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 引擎应该使用您的布局。

于 2014-03-02T23:38:59.323 回答
2 
app.set('view options', { layout:'layout.ejs' });

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

app.set('view options', { layout:'layouts/layout.ejs' });
于 2014-03-09T03:42:00.503 回答
1

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

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

视图/布局-head.ejs

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

视图/布局-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' });
}

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

于 2013-10-12T19:25:02.663 回答