我正在使用带有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 - 有什么方法可以做到吗？
在这里找到了一个解决方案：Node.js with Express: Importing client-side javascript using script tags in Jade views?
它使用的是玉而不是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>
而已。
由于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");
}
});
问候。
感谢@asprotte为express 4.x提供此功能。你测试过了吗？因为它似乎不适合我。所以我在这里对代码做了一些更改：
把它放在app.js文件中
app.locals.scripts = [];
app.locals.addScripts=function (all) {
app.locals.scripts = [];
if (all != undefined) {
app.locals.scripts = all.map(function(script) {
console.log(script);
return "<script src='/js/" + script + "'></script>";
}).join('\n ');
}
};
app.locals.getScripts = function(req, res) {
return app.locals.scripts;
};
然后在模板文件中（我在这里使用ejs模板）：
<% addScripts(['cart.js']) %>
然后在布局文件中我们需要将这些附加到页面底部获取脚本
<%- getScripts() %>
我测试了它并且它为我工作。如果我错了，请纠正我。
谢谢，
谢谢你说明这个选项pkyeck！
在express 4.x中，app.locals是一个对象。这是pkyeck的答案改写为在express 4.x中工作：
app.locals.scripts = [];
app.locals.addScripts=function (all) {
app.locals.scripts = [];
if (all != undefined) {
return all.map(function(script) {
return "<script src='/javascripts/" + script + "'></script>";
}).join('\n ');
}
else {
return '';
}
};
app.locals.getScripts = function(req, res) {
return scripts;
};