ejs中的布局`yield`方法是什么？答案

【问题标题】：What is the layout `yield` method in ejs?ejs中的布局`yield`方法是什么？
【发布时间】：2011-04-25 23:37:47
【问题描述】：

我只是从 node.js + express + ejs 开始。我在任何地方都找不到如何将请求的 ejs 文件拉入布局文件。

我很清楚yield 在这里不合适。

例如

layout.ejs

<html>
<head><title>EJS Layout</title></head>
<body>
    <%= yield %>
</body>
</html>

index.ejs

<p>Hi</p>

【问题讨论】：

标签： node.js ejs express

【解决方案1】：

终于找到了一个快递应用的源码：

<%- body %>

【讨论】：

讨厌提出一个旧线程，但他的回答没有提供任何解释，仅此而已。这个声明属于哪里？它有什么作用？你如何在上下文中使用它？这是一个令人沮丧的不回答，我不明白它怎么会有这么多选票。
该问题假设您了解在其他模板语言（如 erb）中的含义。这就是它获得支持的原因，但无论如何，“布局”中的 yield 是您希望“模板”呈现的位置，布局可以被视为父模板。
它不在 ejs 文档中，因为它不是 ejs 功能。布局是通过 express 添加的，因此它们与每个引擎的工作方式相同。

【解决方案2】：

我想我可以在这里帮助你。我给你解释一下。

layout.ejs 确实是您需要拥有一个 HTML 站点的布局，由 sn-ps 代码构建而成:)。

我的 layout.ejs 看起来像：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title><%- title %></title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>

<body>
    <!-- total container -->
    <header>

        <%- partial('topic.ejs') %>

        <%- body %>
     </header>
</body>
</html>

我会给你一个代码的解释。 “标题”标签是我所有内容的包装器（800x600）。使用“部分”命令，您可以加载源代码的 sn-ps。在我的示例中，“topic.ejs”是我的主题设计，其中包含应保留在每个页面上的图像和颜色（您可以说它是静态的）。
topic.ejs 的源代码：（实际上只是 html-tags，以 div 开头，以 :P 结尾）

<!-- frame of topic -->
<div id="topic">
    ...
</div> <!-- end of "topic" -->

现在每个页面都实现了我的topic.ejs（如果你按照第一个源代码，你可以看到它）：
"".
这意味着：嘿布局！每个页面都实现了这部分代码，明白了吗？！ -好的。

但是“”-命令呢？这也很容易理解。 app.js 将关心究竟会做什么。但是它是怎么做的，我稍后会解释。
如您所知，HTML 页面的第一页名为“index.html”。所以在这里，我们也应该使用我们的 index.html 并将其编译为“index.ejs”。使用与“topic.ejs”相同的过程。将源代码简化为 html-tags，例如：

<!-- frame of MetaContent -->
<div id="metacontent">
    ...
</div> <!-- end of "MetaContent" -->

从这里你应该看看我的 app.js：

app.get('/xyz', function(req, res){
    res.render('index.ejs', { title: 'My Site' });
});

解释：xyz 是一个随机名称。自己选一个。这个名字现在是你的 URL。不明白吗？看下面的例子。通过执行 app.js 启动服务器后，您的服务器在一个特别的端口上运行（我猜默认为 3000）。您通常的 index.html 网址应该是“localhost:3000/index.html”。在浏览器的地址栏中键入它。应该显示您的网站。现在试试这个：

本地主机：端口/xyz

在前面显示的 app.get-methode 中，您明确地说您的 app.js：在“/xyz”路径后面有“index.ejs”文件。但这究竟意味着什么？
这意味着您现在可以在浏览器的地址栏中键入“locallhost:PORT/xyz”，您的原始 index.html 站点的内容将被显示，但您将看到的是 layout.ejs 生成的内容。魔术！
背后的逻辑：（如果您再次查看 layout.ejs）
使用命令，您只需将源代码的 sn-p 加载到布局中。只需这样做：运行您的站点后，右键单击它并让您显示源代码。它应该是一个普通的 HTML 源代码。实际上，它是您的 layout.ejs 的源代码，它占用了您的代码的一些 sn-ps。

多合一：
使用 layout.ejs 中的命令，您可以加载 sn-p 代码。 = "index.ejs"、"contact.ejs" 等等。对于每个 .ejs 文件，您需要将 app.js 扩展到其“get”方法（示例如下）。如果您有多个站点（当然您只是没有一个站点），您需要将新站点的代码的 sn-p 放入一个 .ejs 文件中（例如：contact.html => contact.ejs）。您还需要将您的 app.js 文件扩展为：

app.get('/contact', function(req, res){
        res.render('contact.ejs', { title: 'My Site' });
    });

或

app.get('/xyz/contact', function(req, res){
        res.render('contact.ejs', { title: 'My Site' });
    });

并且不要忘记更改 .ejs 文件中的链接： onclick="window.location.replace('contact.html')" 变为您在 app.get-methode 中选择的名称。例如它更改为 onclick="window.location.replace('contact')"。

onclick="window.location.replace('contact.html')" 变成 onclick="window.location.replace('contact')"

您只是链接到 URL 名称，而不是文件。 App.js 现在将为您处理这个问题:)

【讨论】：