Есть способ добавить CSS/JS позже, используя EJS с nodejs/express

Я использую механизм шаблонов EJS с nodejs/express, и мне интересно, можно ли добавить еще один файл css или js, например 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>

index.ejs

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

Я не хочу добавлять второй файл css в каждый шаблон, но только index.ejs - есть ли способ, которым я могу это сделать?

Ответы

Ответ 1

нашел решение здесь: Node.js с Express: импорт javascript на стороне клиента с использованием тегов script в представлениях Jade?

он использует нефрит вместо 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" - если вы хотите добавить файлы на подстраницу, вы можете сделать это следующим образом:

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>

что он.

Ответ 2

Поскольку помощники и dynamicHelpers исчезли в 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;
  }
});

Ответ 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");
    }
});

С уважением.

Ответ 4

Спасибо за иллюстрацию этой опции 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;
};

Ответ 5

Спасибо @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;
};

то в файле шаблона put (здесь я использую шаблон ejs):

<% addScripts(['cart.js']) %>

Затем в файле макета нам нужно, чтобы они добавили внизу страницы, чтобы получить скрипты

<%- getScripts() %>

Я тестировал его и работал на меня. Пожалуйста, поправьте меня, если я ошибаюсь.

Спасибо,