czy jest jakiś sposób na dodanie CSS/JS później używając EJS z nodejs / express

Używam silnika szablonów EJS z nodejs / express i zastanawiam się, czy można dodać inny plik css lub js np. w indeksie.ejs (Nie układ.ejs)

Układ.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>

Indeks.ejs 

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

Nie chcę dodawać drugiego pliku css do każdego szablonu, ale tylko do indeksu.ejs - czy da się to jakoś zrobić?

Author: pkyeck, 2011-07-07
Source

5 answers

Znalazłem rozwiązanie tutaj: węzeł.js with Express: Importowanie javascript po stronie klienta za pomocą znaczników skryptów w widokach?

Używa jade zamiast EJS, ale działa tak samo. oto kilka fragmentów kodu dla express 2.4.0.

Musisz dodać następujące "pomocników" do swojej aplikacji.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'];
  }
});

Układ .ejs wygląda tak: 

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
      <link rel='stylesheet' href='/stylesheets/style.css' />
      <%- renderScriptsTags(scripts) %>
  </head>
  <body>
    <%- body %>
  </body>
</html>

Jeśli nie dodasz żadnych skryptów do tablicy scripts-array, tylko 'jquery-1.5.1./ min.js " zostaną uwzględnione - jeśli chcesz dodać pliki do podstrony możesz to zrobić tak:

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>
To wszystko.
 21
Author: pkyeck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:07:14

Jako, że helpery i dynamichelpery zniknęły w Expressie > 3, przepisałem pkyeck kod więc działa w Expressie 3.

Więc w app.js mają to zamiast helpers / dynamicHelpers. Wszystko inne zostaw tak, jak jest.

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
Author: Henrik Peinar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:59:54

W aplikacji.js Dodaj wiersz: 

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

W układzie.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>

W indeksie.ejs lub 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 -->

W teście.js: 

$(document).ready(function() {
    try{
        alert("Hi!!!");
    }catch(e)
    {
        alert("Error");
    }
});
Pozdrawiam.
 7
Author: alditis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-26 22:10:20

Dzięki za zilustrowanie tej opcji pkyeck!

W Expressie 4.x app.miejscowi to obiekt. Oto odpowiedź pkyecka przepisana do pracy w Expressie 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
Author: asprotte,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-20 11:09:37

Dzięki @ asprotte za udostępnienie tego dla express 4.testowałeś to? Bo wydaje się, że nie działa na mnie. Więc wprowadziłem kilka zmian w Twoim kodzie tutaj są one:

Umieść to w aplikacji.plik 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;
};

Następnie w pliku szablonu umieść (tutaj używam szablonu ejs): 

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

Następnie w pliku układu musimy je dołączyć na dole strony pobierz Skrypty 

<%- getScripts() %>

Przetestowałem go i działa dla mnie. Proszę popraw mnie jeśli jestem źle.

Dzięki,

 1
Author: Mohsin Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-28 09:31:42