有没有办法稍后使用带有 nodejs/express 的 EJS 添加 CSS/JS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6609238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is there a way to add CSS/JS later using EJS with nodejs/express
提问by pkyeck
i'm using the EJS template engine with nodejs/express and i'm wondering if it's possible to add another css or js file in e.g the index.ejs (not the layout.ejs)
我正在使用带有 nodejs/express 的 EJS 模板引擎，我想知道是否可以在例如 index.ejs（而不是 layout.ejs）中添加另一个 css 或 js 文件
layout.ejs
布局.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
索引.ejs
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
i don't want to add the second css file in every template but only the index.ejs - is there any way i can do that?
我不想在每个模板中添加第二个 css 文件，而只添加 index.ejs - 有什么办法可以做到吗？
回答by pkyeck
found a solution here: Node.js with Express: Importing client-side javascript using script tags in Jade views?
在这里找到了一个解决方案：Node.js with Express: Importing client-side javascript using script tags in Jade views?
it's using jade instead of EJS but works all the same. here are some code-snippets for express 2.4.0.
它使用的是玉而不是 EJS，但工作原理都是一样的。这里是 express 2.4.0 的一些代码片段。
you have to add the following "helpers" to your app.js
您必须将以下“助手”添加到您的 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'];
}
});
the layout.ejslooks sth like this:
在layout.ejs看上去某事像这样：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<%- renderScriptsTags(scripts) %>
</head>
<body>
<%- body %>
</body>
</html>
if you don't add any scripts to the scripts-array, only 'jquery-1.5.1.min.js' will be included - if you want to add files to a subpage you can do this like so:
如果您不向脚本数组添加任何脚本，则只会包含 'jquery-1.5.1.min.js' - 如果您想将文件添加到子页面，您可以这样做：
test.ejs
测试.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>
that's it.
就是这样。
回答by Henrik Peinar
As helpers and dynamicHelpers are gone in Express > 3, I rewrote pkyeckcode so it works in Express 3.
由于助手和动态助手在 Express > 3 中消失，我重写了pkyeck代码，使其在 Express 3 中工作。
So in app.js have this instead of the helpers / dynamicHelpers. Leave everything else as is.
所以在 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;
}
});
回答by alditis
In app.js add line:
在 app.js 添加一行：
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public')); // This line.
In layout.ejs:
在 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>
In index.ejs or login.ejs:
在 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 -->
In test.js:
在 test.js 中：
$(document).ready(function() {
try{
alert("Hi!!!");
}catch(e)
{
alert("Error");
}
});
Regards.
问候。
回答by Mohsin Khan
Thanks @asprotte for providing this for express 4.x. Did you tested this? Because it does not appears to be working for me. So I have made some changes to your code here are they:
感谢@asprotte 为 express 4.x 提供这个。你测试过这个吗？因为它似乎对我不起作用。因此，我对您的代码进行了一些更改，它们是：
Put this in app.js file
把它放在 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;
};
then in template file put (I am using ejs template here) :
然后在模板文件中放置（我在这里使用 ejs 模板）：
<% addScripts(['cart.js']) %>
Then in the layout file we need these to append at the bottom of the page get the scripts
然后在布局文件中，我们需要将这些附加到页面底部以获取脚本
<%- getScripts() %>
I have tested it and its working for me. Please correct me if I am wrong.
我已经测试过它并且它对我有用。如果我错了，请纠正我。
Thanks,
谢谢，
回答by asprotte
Thanks for illustrating this option pkyeck!
感谢您说明此选项 pkyeck！
In express 4.x app.locals is an object. Here's pkyeck's answer rewritten to work in express 4.x:
在 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;
};