web-dev-qa-db-fra.com

ajout d'un fichier .css à ejs

je travaille sur node.js (express) avec ejs et je ne suis pas en mesure d'inclure un fichier .css dans celui-ci.J'ai essayé la même chose séparément qu'un duo html-css et cela a bien fonctionné ... comment puis-je inclure le même dans mon fichier .ejs. Mon app.js va ainsi:

var express = require('express');
var app = express();

app.set('views', __dirname + '/views');


app.get('/', function(req, res){
  res.render('index.ejs', {
        title: 'My Site',
    nav: ['Home','About','Contact'] 
  });
});

app.get('/home', function(req, res){
  res.render('index.ejs', {
        title: 'My Site',
    nav: ['Home','About','Contact'] 
  });
});

app.get('/about', function(req, res){
  res.render('about.ejs', {
    title: 'About',
     nav: ['Home','About','Contact']
  });
});

app.get('/contact', function(req, res){
  res.render('contact.ejs', {
    title: 'Contact',
     nav: ['Home','About','Contact']
  });
});


app.listen(3000);

et le fichier index.ejs:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>
<div>
    <h1> <%= title %> </h1>
    <ul>
<% for (var i=0; i<nav.length;i++) {%>

<li><a href="/<%=nav[i]%>"> <%=nav[i]%> </a></li>
   &nbsp;  
<% } %>
   </ul>
</div>

<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate.Here Iam going to use Jade.</p>
<p class ='just'>Again Express is agnostic to what you use to generate your CSS-you can use Vanilla CSS but for this example I'm using Stylus.
</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>

fichier style.css:

<style type="text/css">
body { background-color: #D8D8D8;color: #444;}
h1 {font-weight: bold;text-align: center;}
header { padding: 50px 10px; color: #fff; font-size :15px; text-align:right;}
 p { margin-bottom :20px;  margin-left: 20px;}
 footer {text-decoration: overline; margin-top: 300px}
 div { width:100%; background:#99CC00;position:static; top:0;left:0;}
 .just
 {
    text-align: center; 

 }
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#0B614B;} /* visited link */
a:hover {color:#B4045F;}   /* mouse over link */
a:active {color:#0000FF;}

  ul { list-style-type:none; margin:0; padding:0;text-align: right; }
li { display:inline; }
</style>
cssnode.jsexpressejs
17
user-S

Votre problème n'est pas réellement spécifique aux ejs.

2 choses à noter ici

  1. style.css est un fichier css externe. Vous n'avez donc pas besoin de balises de style dans ce fichier. Il ne doit contenir que le css.

  2. Dans votre application express, vous devez mentionner le répertoire public à partir duquel vous servez les fichiers statiques. Comme css/js/image

cela peut être fait par

app.use(express.static(__dirname + '/public'));

en supposant que vous placez les fichiers css dans un dossier public à partir de la racine de votre application. maintenant vous devez vous référer aux fichiers css dans vos fichiers tamplate, comme

<link href="/css/style.css" rel="stylesheet" type="text/css">

Ici, je suppose que vous avez mis le fichier CSS dans le dossier CSS à l'intérieur de votre dossier public.

La structure des dossiers serait donc

.
./app.js
./public
    /css
        /style.css
88
mithunsatheesh

Vous pouvez utiliser ceci

     var fs = require('fs');
     var myCss = {
         style : fs.readFileSync('./style.css','utf8');
     };

     app.get('/', function(req, res){
       res.render('index.ejs', {
       title: 'My Site',
       myCss: myCss
      });
     });

mettre cela sur le modèle

   <%- myCss.style %>

il suffit de construire style.css

  <style>
    body { 
     background-color: #D8D8D8;
     color: #444;
   }
  </style>

J'essaye ceci pour certains CSS personnalisés. Ça marche pour moi

7
John Papa

Afin de servir un fichier CSS statique dans l'application express (c'est-à-dire utiliser un fichier de style css pour styliser les fichiers "modèles" ejs dans l'application express). Voici les 3 étapes simples qui doivent se produire:

  1. Placez votre fichier css appelé "styles.css" dans un dossier appelé "assets" et le dossier assets dans un dossier appelé "public". Ainsi, le chemin d'accès relatif au fichier css doit être "/public/assets/styles.css"

  2. Dans la tête de chacun de vos fichiers ejs, vous appelleriez simplement le fichier css (comme vous le faites dans un fichier html normal) avec un <link href=… /> Comme indiqué dans le code ci-dessous. Assurez-vous de copier et coller le code ci-dessous directement dans votre section de fichier ejs <head>

    <link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />

  3. Dans votre fichier server.js, vous devez utiliser le middleware app.use(). Notez qu'un middleware n'est rien d'autre qu'un terme qui fait référence aux opérations ou au code qui sont exécutés entre la demande et les opérations de réponse. En plaçant une méthode dans un middleware, cette méthode sera automatiquement appelée à chaque fois entre les méthodes de demande et de réponse. Pour servir des fichiers statiques (comme un fichier css) dans le middleware app.use(), il existe déjà une fonction/méthode fournie par express appelée express.static(). Enfin, vous devez également spécifier une route de demande à laquelle le programme répondra et servira les fichiers du dossier statique à chaque fois le middleware est appelé. Puisque vous placerez les fichiers css dans votre dossier public. Dans le fichier server.js, assurez-vous que vous disposez du code suivant:

    // using app.use to serve up static CSS files in public/assets/ folder when /public link is called in ejs files
// app.use("/route", express.static("foldername"));
app.use('/public', express.static('public'));

Après avoir suivi ces 3 étapes simples, chaque fois que vous res.render('ejsfile') dans vos méthodes app.get(), vous verrez automatiquement le style CSS appelé. Vous pouvez tester en accédant à vos itinéraires dans le navigateur.

3
Kean Amaral