有没有办法在以后使用EJS和nodejs / express来添加CSS / JS

我使用的EJS模板引擎与nodejs /快递,我想知道是否有可能在例如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 – 有什么办法可以做到这一点?

       

网上收集的解决方案 "有没有办法在以后使用EJS和nodejs / express来添加CSS / JS"

在这里find一个解决scheme: 与Express的Node.js:在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> 

如果你不添加任何脚本到脚本数组,只有'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> 

而已。

由于助手和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.js中添加一行:

 app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.static(__dirname + '/public')); // This line. 

在layout.ejs中:

 <!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> 

在index.ejs或login.ejs中:

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

在test.js中:

 $(document).ready(function() { try{ alert("Hi!!!"); }catch(e) { alert("Error"); } }); 

问候。

感谢您说明这个选项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; };