我试用了EJS作为Express的视图引擎。似乎我的layout.ejs没有被使用。我在'views'文件夹中有两个视图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>
答案 0 :(得分: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引擎应该使用你的布局。
答案 1 :(得分:1)
我有类似的问题。在我的情况下,我宁愿使用Jade,但我需要为特定项目提供更“html”样式的模板引擎。起初我考虑了express-partials或ejs-locals(在Jonathan Lonowski的评论中提到)或甚至通过jade模板中的管道或点语法使用html(有关该选项的更多信息,请参阅here和{{ 3}} 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' });
}
这不是最佳解决方案,但可行。我的大多数应用程序都是单页应用程序,我还有一些其他限制,我必须在其中工作,这样才能满足我的需求。在许多情况下,这可能不是最佳解决方案 - 特别是如果您有复杂和/或不断变化的布局。
答案 2 :(得分:0)
app.set('view options', { layout:'layout.ejs' });
将layout.ejs放入您的views文件夹中。 或者,您可以将layout.ejs放入views / layouts文件夹中,然后使用
app.set('view options', { layout:'layouts/layout.ejs' });