11

我正在使用带有 nodejs/express 的 EJS 模板引擎，我想知道是否可以在 index.ejs（而不是 layout.ejs）中添加另一个 css 或 js 文件

布局.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>

索引.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

我不想在每个模板中添加第二个 css 文件，而只添加 index.ejs - 有什么办法可以做到吗？

4

5 回答 5

20

在这里找到了一个解决方案：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>

如果您不向脚本数组添加任何脚本，则只会包含“jquery-1.5.1.min.js” - 如果您想将文件添加到子页面，您可以这样做：

测试.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>

就是这样。

于 2011-07-08T08:44:16.803 回答
11

由于 Express > 3 中没有 helpers 和 dynamicHelpers，我重写了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;
  }
});
于 2012-11-15T14:18:32.440 回答
9

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

问候。

于 2011-12-26T22:10:20.540 回答
3

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

我已经测试过它并且它对我有用。如果我错了，请纠正我。

谢谢，

于 2017-12-28T07:59:08.323 回答
1

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

于 2015-02-20T11:09:37.560 回答