2012-11-21 11 views
15

Sto provando a creare un semplice server con nodo, espresso ed ejs per il modello. Ho ottenuto il server per puntare alla pagina, caricarlo e sono anche in grado di generare altri bit di codice con l'istruzione include. Tuttavia per qualche motivo il foglio di stile non verrà caricato.Impossibile ottenere il foglio di stile che funzioni con ejs per node.js

app.js

var express = require('express'), 
app = express(), 
http = require('http'), 
server = http.createServer(app), 
fs = require('fs'); 

var PORT = 8080; 

app.set('view engine', 'ejs'); 

app.get('/', function(req, res){ 
res.render('board.ejs', { 
    title: "anything I want", 
    taco: "hello world", 
    something: "foo bar", 
    layout: false 
    }); 
}); 


app.listen(PORT); 
console.log("Server working"); 

Il file ejs è a Visite directory/board.ejs

<html> 
<head> 
    <title><%= title %></title> 
    <link rel='stylesheet' href='../styles/style.css' /> 
</head> 
<body > 
    <h1> <%= taco %> </h1> 
    <p> <%= something %> </p> 
</body> 
</html> 

e style.css è in una directory stili/style.css rispetto a app. js

p { 
    color:red; 
} 

ho provato ogni percorso che posso concepire per la href del collegamento compreso relativa al punto in cui il mio localho st punti relativi a app.js rispetto a board.ejs e anche solo a style.css ma nessuno sembra funzionare. Qualsiasi suggerimento è molto apprezzato.

risposta

37

dichiarare una directory statica:

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

<link rel='stylesheet' href='/style.css' /> 
+0

che non sembrano funzionare. Perché ''/ public'?' E in che modo l'impostazione dell'app.use cambierà la modalità di valutazione del foglio di stile? Ho anche provato a impostare 'href = '/ styles/style.css'' con la modifica e senza fortuna – Loourr

+0

metterlo sopra la tua linea di app.router(). – chovy

+1

Stai praticamente parlando al tuo file .ejs e dici che quando fai riferimento a un file statico, come nel tag 'link' sopra, la directory root è la cartella' public' che hai definito in app.use, piuttosto che la root directory della tua intera app. In questo caso, la "/" nella href del tag link fa riferimento alla directory 'public', non alla root della tua app. – mumush

10

in app.js:

you must first declare static directory 

app.use("/styles",express.static(__dirname + "/styles")); 

nel file di ejs:

<link rel='stylesheet' href='/styles/style.css' /> 
+0

Questa è un'ottima risposta! Se stai cercando di utilizzare come me un percorso relativo basato sul percorso del file, ad es. href = '../../styles/style.css' si avranno problemi se si hanno alcuni template (ad esempio risorse css/js che sono incluse in ogni file). In breve, quando utilizzi "/ bla/bla" (barra/bla/bla) stai lavorando con la directory delle statistiche. Buona. – Combine