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

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

11 голосов
/ 07 июля 2011

Я использую шаблонизатор 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 - есть ли способ сделать это?

Ответы [ 5 ]

21 голосов
/ 08 июля 2011

нашел решение здесь: Node.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'];
  }
});

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>

вот и все.

11 голосов
/ 15 ноября 2012

Поскольку помощники и dynamicHelpers исчезли в Express> 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;
  }
});
8 голосов
/ 27 декабря 2011

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

Привет.

3 голосов
/ 28 декабря 2017

Спасибо @asprotte за предоставление этого для экспресс 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() %>

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

Спасибо

1 голос
/ 20 февраля 2015

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

В экспрессе 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;
};
...