Rya*_*nce 24 ejs node.js express
我刚开始使用node.js + express + ejs.我找不到任何地方如何将请求的ejs文件拉入布局文件.
我完全知道这yield不是正确的事情.
例如
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
Rya*_*nce 42
最后找到了一个快速应用程序的一些源代码:
<%- body %>
D. *_*Ace 12
我想我可以帮你解决这个问题.我会给你一些解释.
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开头,以一个结尾: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标签,如:
<!-- 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的生成内容魔术
的逻辑背后:(如果再次查看layout.ejs)
使用<% - body%>命令,只需在源代码片段中加载一段源代码即可.执行此操作:运行站点后,右键单击它让你展示源代码.它应该是一个通常的HTML源代码.实际上它是你的layout.ejs的源代码,它需要一些你的代码片段.
一体化:
使用<% - body%>命令你的layout.ejs,你可以加载一段代码.<% - body%> ="index.ejs","contact.ejs",依此类推.对于每个.ejs文件,你需要扩展应用程序. js到它的"get"-methode(示例如下).如果你有更多站点(当然你没有一个站点),你需要将新站点的代码片段放入.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现在会为你处理:)