26

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

我很清楚这yield不是正确的事情。

例如

布局.ejs

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

索引.ejs

<p>Hi</p>
4

2 回答 2

42

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

<%- body %>
于 2010-10-15T14:35:55.323 回答
13

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

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>

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

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

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

但是“ <%-body %> ”命令呢？这也很容易理解。app.js 将关心 <%-body %> 究竟会做什么。但是它是怎么做的，我稍后会解释。
如您所知，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）
使用 <%-body %> 命令，您只需将一段源代码加载到您的布局中。只需这样做：运行您的站点后，右键单击它并让您显示源代码。它应该是通常的 HTML 源代码。实际上，它是您的 layout.ejs 的源代码，它采用了您的一些代码片段。

合而为一：
使用 layout.ejs 中的 <%-body %> 命令，您可以加载一段代码。<%- body %> = "index.ejs"、"contact.ejs" 等等。对于每个 .ejs 文件，您需要将 app.js 扩展到其“get”方法（示例如下）。如果您有更多站点（当然您只是没有一个站点），您需要将新站点的代码片段放入 .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 现在将为您处理这个问题:)

于 2012-05-31T12:00:46.057 回答