ejs中的布局`yield`方法是啥？

Posted 2023-03-07

技术标签:

【中文标题】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>

【问题讨论】：

【参考方案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 现在将为您处理这个问题:)

【讨论】：

以上是关于ejs中的布局`yield`方法是啥？的主要内容，如果未能解决你的问题，请参考以下文章

Ruby on Rails 如何使用 yield 进行布局？

自动布局动态大小 uitableview 单元格的最佳方法是啥

AngularJS 中的自适应布局（移动/桌面） - 首选方式是啥（内部示例）

Express Js EJS 布局错误：未指定默认引擎且未提供扩展名

如何将我的布局路径正确定位到使用 HTML、EJS 和 Markdown 构建的 11ty (Eleventy) 博客目录？

设计表单布局的最佳方法是啥[关闭]