express js - 带有布局模板的 ejs答案

【问题标题】：express js - ejs with layout templateexpress js - 带有布局模板的 ejs
【发布时间】：2012-06-12 04:01:33
【问题描述】：

在我的快递应用中，我已将视图引擎更改为 ejs。

有谁知道是否仍然可以利用视图模板？

【问题讨论】：

您可以使用此模式进行布局github.com/dheeraj-br/ejs_layout_implementation

标签： express ejs

【解决方案1】：

其实Express 3.X之后是不支持layout.ejs的，如果要使用layout，需要自己做以下步骤：

在package.json文件中添加依赖“express-partials”：“*”

“依赖”：{ “快递”：“3.1.0”， “ejs”：“*”， “表达部分”：“*” }

执行npm install安装最新版express-partials
在您的app.js 中需要express-partials
var partials = require('express-partials');
在app.js文件的app.set('view engine', 'ejs');下添加代码app.use(partials());

之后，您可以设计您的layout.ejs 并在您的layout.ejs 文件中添加<%- body%> 块，这样就足够了，并且运行良好。

【讨论】：

【解决方案2】：

你可以用这个模块做到这一点......

https://github.com/aseemk/express-blocks

layout.ejs

<html>
    <body>
        <% include nav %>
        <h1><%= title %></h1>
        <%- body %>
    </body>
</html>

<% layout('layout') -%>
<form>...</form>

nav.ejs

<nav>
  <% if ( session.logged_in ) { %>
    <a href="/account">account</a>
    <a href="/logout">logout</a>
  <% } else { %>
    <a href="/signup">signup</a>
    <a href="/login">login</a>
  <% } %>
  <a href="/">home</a>
</nav>

我使用的是 express-partials，但我发现 express-blocks 更适合 ejs 和 express 3.x。每次都必须传递数据时，使用 partials 很痛苦。使用<% include whatever %>，数据已经可以访问了。

在你的路由文件中，你可以这样渲染：

exports.login.get = function(req, res){
  res.locals.session = req.session;
  res.render('login', { title: 'Login to your account' });
};

【讨论】：

【解决方案3】：

如果我没记错的话，Express.js 把它留给了模板引擎。因此，如果 ejs 不支持布局，那么您就不走运了。

【讨论】：

根据 express 的文档，它应该支持布局，但我还没有让它正常工作。
3.x 删除了布局。网站上的指南是 2.x。
您可以使用 ejs-locals 来定义布局。
@Pickels 这仍然是真的吗？网站上的指南总体上非常糟糕。
@onmouse 据我所知，它仍然是正确的。如果你需要一个不支持布局的引擎，我可以推荐 swig。它是一个非常可靠的模板引擎，具有jade 的所有功能，但没有haml 语法。

【解决方案4】：

安装ejs-blocks包npm install ejs-blocks

在您的 app.js 文件中导入包 const engine = require('ejs-blocks'); 并配置视图引擎

//settings
app.set('views', path.join(__dirname, 'views'));
app.engine('ejs', engine);
app.set('view engine', 'ejs');

在 express 中默认文件名是layout.ejs 所以在你的views文件夹中创建一个名为layout.ejs的文件，内容如下：

views/layout.ejs

<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <%- body %>
</body>
<%- blocks.js %>
</html>

<%= title %>从路由调用文件时获取的值

router.get("/", (req, res) => {
    res.render("index", { title: "Hello world!" });
});

你的每个视图都必须在第一行导入layout.ejs文件，例如

views/index.ejs

<% layout('layout') -%>
<h1>Article title</h1>
<p>Content</p>
  ...
<% block('js', `<script>
    ...
</script>`) -%>

您可以使用block 将代码从视图插入到主布局。

【讨论】：