11

nodejs/express で EJS テンプレート エンジンを使用していますが、別の css または js ファイルを index.ejs (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

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

すべてのテンプレートに 2 番目の css ファイルを追加するのではなく、index.ejs だけを追加したいのですが、それを行う方法はありますか?

4

5 に答える 5

20

ここで解決策を見つけました: Node.js with Express: Importing client-side javascript using script tags in Jade views?

EJS の代わりに jade を使用していますが、すべて同じように機能します。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」のみが含まれます。サブページにファイルを追加する場合は、次のように実行できます。

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>

それでおしまい。

于 2011-07-08T08:44:16.803 に答える
11

Express > 3 ではヘルパーと dynamicHelpers がなくなったので、Express 3 で動作するようにpkyeckコードを書き直しました。

したがって、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;
  }
});
于 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

Express 4.x にこれを提供してくれた @asprotte に感謝します。これをテストしましたか？それは私のために働いているように見えないからです。だから私はあなたのコードにいくつかの変更を加えました：

これを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 に答える