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

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

.EJS по

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

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

10
ejs express node.js template-engine

5 ответов

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

он использует jade вместо EJS, но работает все равно. вот некоторые фрагменты кода для express 2.4.0.

вы должны добавить следующие "помощники" в ваше приложение.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'];
  }
});

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

21

поскольку помощники и dynamicHelpers ушли в Express > 3, я переписал pkyeck код, поэтому он работает в Express 3.

Так в приложение.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;
  }
});
10

в приложение.js добавить строку:

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public')); // This line.

в макете.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>

в индекс.ejs или логин.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 -->

в тесте.js:

$(document).ready(function() {
    try{
        alert("Hi!!!");
    }catch(e)
    {
        alert("Error");
    }
});

С уважением.

7

Спасибо за иллюстрацию этой опции pkyeck!

в express 4.X приложение.местные жители-это объект. Вот ответ 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;
};
1

спасибо @asprotte за предоставление этого для express 4.х. Вы проверили это? Потому что это, похоже, не работает на меня. Поэтому я внес некоторые изменения в ваш код вот они:

поместите это в приложение.файл 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() %>

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

спасибо,

1