Question

我正在使用带有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 - 我有什么方法可以做到这一点吗？

Answer 1

在此处找到了解决方案：Node.js with Express: Importing client-side javascript using script tags in Jade views?

它使用的是玉而不是EJS，但工作方式完全相同。以下是Express 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' - 如果要将文件添加到子页面，可以这样做：< / p>

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

就是这样。

Answer 2

随着帮助者和dynamicHelpers在Express＆gt;中消失了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;
  }
});

Answer 3

在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");
    }
});

问候。

Answer 4

感谢@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() %>

我测试了它并且它为我工作。如果我错了，请纠正我。

谢谢，

Answer 5

感谢您说明此选项pkyeck！

在express 4.x中，app.locals是一个对象。这里的pkyeck的答案改写为在快递4.x中工作：

＆＃13;

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

＆＃13;

有没有办法稍后使用带有nodejs / express的EJS添加CSS / JS

5 个答案:

在app.js中添加行：

在layout.ejs中：

在index.ejs或login.ejs中：

在test.js中：