pky*_*eck 11 template-engine ejs node.js express
我正在使用带有nodejs/express的EJS模板引擎,我想知道是否可以在例如index.ejs(而不是layout.ejs)中添加另一个css或js文件
layout.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/stylesheets/smoothness/jquery-ui-1.8.14.custom.css' />
</head>
<body>
<%- body %>
</body>
</html>
index.ejs
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
我不想在每个模板中添加第二个css文件,只有index.ejs - 有什么方法可以做到吗？
pky*_*eck 21
在这里找到了一个解决方案:Node.js with Express:在Jade视图中使用脚本标签导入客户端javascript？
它使用的是玉而不是EJS,但工作方式完全相同.这里有一些快递2.4.0的代码片段.
你必须在你的app.js中添加以下"帮助者"
app.helpers({
renderScriptsTags: function (all) {
if (all != undefined) {
return all.map(function(script) {
return '<script src="/javascripts/' + script + '"></script>';
}).join('\n ');
}
else {
return '';
}
}
});
app.dynamicHelpers({
scripts: function(req, res) {
return ['jquery-1.5.1.min.js'];
}
});
在layout.ejs看上去某事像这样:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<%- renderScriptsTags(scripts) %>
</head>
<body>
<%- body %>
</body>
</html>
如果你没有向scripts-array添加任何脚本,只会包含'jquery-1.5.1.min.js' - 如果你想将文件添加到子页面,你可以这样做:
test.ejs
<% scripts.push('jquery-ui-1.8.14.custom.min.js', 'jquery.validate.min.js') %>
<h1><%= title %></h1>
<p>I'm a template with 3 js files in the header</p>
而已.
Hen*_*nar 11
由于helper和dynamicHelpers在Express> 3中消失了,我重写了pkyeck代码,因此它可以在Express 3中运行.
所以在app.js中有这个而不是helpers/dynamicHelpers.保留其他所有内容.
app.locals({
scripts: [],
renderScriptsTags: function (all) {
app.locals.scripts = [];
if (all != undefined) {
return all.map(function(script) {
return '<script src="/javascripts/' + script + '"></script>';
}).join('\n ');
}
else {
return '';
}
},
getScripts: function(req, res) {
return scripts;
}
});
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public')); // This line.
<!DOCTYPE html>
<html>
<head>
<title>Authentication Example</title>
<link rel="stylesheet" href="/stylesheets/style.css"/>
<script src="/javascripts/jquery.js"></script>
</head>
<body>
<%- body %>
</body>
</html>
<h1>Login</h1>
<form method="post" action="/login">
<p>
<label>Username:</label>
<input type="text" name="username">
</p>
<p>
<label>Password:</label>
<input type="text" name="password">
</p>
<p>
<input type="submit" value="Login">
</p>
</form>
<script src="/javascripts/test.js"></script> <!-- Second Script -->
$(document).ready(function() {
try{
alert("Hi!!!");
}catch(e)
{
alert("Error");
}
});
问候.
| 归档时间： |
|
| 查看次数： |
19579 次 |
| 最近记录： |