Question

我刚开始使用node.js + express + ejs。我找不到任何地方如何将请求的ejs文件拉入布局文件。

我完全清楚yield在这里不是正确的事。

e.g。

layout.ejs

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

index.ejs

<p>Hi</p>

Answer 1

最后找到了快速应用的一些源代码：

<%- body %>

Answer 2

我想我可以帮你解决这个问题。我会给你一些解释。

layout.ejs确实是布局你需要有一个HTML网站，由代码片段构建:)。

我的 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>

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

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

现在每个页面都实现了我的topic.ejs（如果您按照第一个源代码，您可以看到它）：“＆lt;％ - partial（'topic.ejs'）％＆gt;”。
这意味着：嘿布局！每个页面都有这部分代码实现，搞定了吗？！ -好。

但是“＆lt;％ - body％＆gt; ” - 命令呢？这很容易理解。 app.js会关心什么＆lt;％ - body％＆gt;确实会这样做。但它如何做，我将在稍后解释。
如您所知，HTML页面的第一页名为“index.html”。所以就在这里，我们也应该使用index.html并将其编译为“ index.ejs ”。使用与“topic.ejs”相同的过程。将源代码减少为html标签，如：

<!-- 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”。在浏览器的地址栏中输入。应显示您的网站。现在试试这个：

本地主机：PORT / XYZ

在之前显示的app.get-methode中，你明确说出你的app.js：在“/ xyz”-path后面有“index.ejs”文件。但这究竟意味着什么呢？这意味着您现在可以在浏览器的地址栏中输入“locallhost：PORT / xyz”，并显示您的原始index.html网站的内容，但您将看到生成的layout.ejs内容.Magic！<登记/>
背后的逻辑:(如果你再看一下layout.ejs）
使用＆lt;％ - body％＆gt;命令你加载到你的布局只是一个源代码片段。只需执行以下操作：运行站点后，右键单击它并让您显示源代码。它应该是一个通常的HTML源代码。实际上它是你的layout.ejs的源代码，它带了你代码的一些片段。

一体化：
使用＆lt;％ - body％＆gt;在layout.ejs中的命令，您可以加载一段代码。＆lt;％ - body％＆gt; =“index.ejs”，“contact.ejs”，依此类推。对于每个.ejs文件，您需要将app.js扩展为其“get”-methode（示例如下）。如果您有更多站点（当然您没有一个站点），则需要将新站点的代码片段放入.ejs文件中（例如：contact.html =＆gt; contact.ejs）。您还需要将app.js文件扩展为：

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

OR

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（ '的接触'）”

您只是链接到URL名称，而不是文件。 App.js现在将为您处理：）

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

2 个答案: