有没有办法稍后使用 EJS 和 nodejs/express 添加 CSS/JS
我正在使用带有nodejs/express的EJS模板引擎,我想知道是否可以在例如index.ejs(不是layout.ejs)
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>
中添加另一个css或js文件index.ejs
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
我不想在每个模板中添加第二个 css 文件,而只想在 index.ejs 中添加 - 有什么办法可以做到这一点吗?
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)
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>
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(5)
由于助手和动态助手在 Express > 中消失了3,我重写了 pkyeck 代码,以便它可以在 Express 3 中工作。
所以在 app.js 中用这个代替助手/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");
}
});
问候。
感谢 @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;
};
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
在这里找到了解决方案: Node .js with Express:在 Jade 视图中使用脚本标签导入客户端 javascript?
它使用 jade 而不是 EJS,但工作原理完全相同。
以下是 Express 2.4.0 的一些代码片段。
您必须将以下“帮助程序”添加到您的 app.js 中,
layout.ejs 看起来像这样:
如果您不向脚本数组添加任何脚本,则仅添加“jquery-1.5”。 1.min.js' 将被包含 - 如果您想将文件添加到子页面,您可以这样做:
test.ejs
就是这样。
found a solution here: 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.
you have to add the following "helpers" to your app.js
the layout.ejs looks sth like this:
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:
test.ejs
that's it.