c’è un modo per aggiungere CSS/JS in seguito utilizzando EJS con nodejs/express

sto usando il EJS modello di motore con nodejs/express e mi chiedevo se è possibile aggiungere un css o js file e.g indice.ejs (non il 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>

indice.ejs

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

non voglio aggiungere il secondo file css in ogni modello, ma solo l’indice.ejs – c’è un modo posso farlo?

InformationsquelleAutor pkyeck | 2011-07-07

 

5 Replies
  1. 21

    trovato una soluzione qui: Node.js con Express: l’Importazione di javascript lato client utilizzando i tag script nella Giada vista?

    usando giada invece di EJS, ma funziona lo stesso.
    qui sono un po ‘ di codice snippet per esprimere 2.4.0.

    si devono aggiungere le seguenti “aiutanti” per il 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'];
      }
    });

    il layout.ejs sembra qualcosa di simile a questo:

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

    se non si aggiunge nessuno script script-array, solo ‘jquery-1.5.1.min.js’ sarà inserito – se si desidera aggiungere file a una sottopagina puoi farlo in questo modo:

    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>

    che è.

    • Se vi capita di avere expressjs > 3.x.x leggere la mia risposta qui sotto per codice di lavoro. Il merito va a pkyeck ! 🙂
    • grazie per l’aggiornamento!
  2. 11

    Come aiutanti e dynamicHelpers sono andato in Express > 3, ho riscritto pkyeck codice in modo che funziona in Express 3.

    Così in app.js sono invece degli aiutanti /dynamicHelpers. Lasciare tutto come è.

    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. 8

    In app.js aggiungere la riga:

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

    Nel 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>

    In indice.ejs o effettuare il 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 -->

    In test.js:

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

    Saluti.

  4. 3

    Grazie @asprotte per la fornitura di questo per esprimere il 4.x. Hai provato questo?
    Perché non sembra funzionare per me. Così ho fatto alcune modifiche al codice qui sono:

    Mettere questo in app.js file

    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;
    };

    quindi nel file di modello messo (sto usando ejs modello qui) :

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

    Quindi nel file di layout, abbiamo bisogno di questi per aggiungere in fondo alla pagina di ottenere lo script

    <%- getScripts() %>

    Ho testato e funziona per me. Per favore mi corregga se ho sbagliato.

    Grazie,

  5. 1

    Grazie per illustrare questa opzione pkyeck!

    In express 4.x app.gente del posto è un oggetto. Ecco pkyeck la risposta di riscrivere in express 4.x:

    JS:

    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;
    };

Lascia un commento