2012-11-21 24 views
15

Próbuję utworzyć prosty serwer z węzłem, Express i ejs dla szablonu. Dostałem serwer, aby wskazać stronę, załadować ją, a nawet wygenerować inne fragmenty kodu za pomocą instrukcji include. Jednak z jakiegoś powodu arkusz stylów nie zostanie załadowany.Nie można pobrać arkusza stylów do pracy z programem ejs dla 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"); 

Plik EJS jest w ciągu poglądów katalogu/board.ejs

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

i style.css znajduje się w style/style.css katalogu względem aplikacji. js

p { 
    color:red; 
} 

próbowałem każdą ścieżkę, że mogę pojąć za href linku w tym w stosunku do miejsca, gdzie moim localho st punktów w stosunku do app.js w stosunku do board.ejs, a nawet po prostu style.css, ale żaden nie działa. Wszelkie sugestie są bardzo mile widziane.

Odpowiedz

37

stwierdzenie statyczny katalog:

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

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

, które nie wydają się działać. Dlaczego "/ public"? "I jak ustawienie app.use zmieniło sposób oceny arkusza stylów? Próbowałem również ustawić 'href = '/ styles/style.css'' ze zmianą i bez powodzenia – Loourr

+0

ustaw to powyżej twojej linii app.router(). – chovy

+1

W zasadzie rozmawiasz z plikiem .ejs i mówisz, że kiedy odwołujesz się do pliku statycznego, jak w powyższym znaczniku 'link', katalogiem głównym jest folder' public' zdefiniowany w app.use, a nie katalog główny katalog całej aplikacji. W tym przypadku "/" w href tagu linku odwołuje się do katalogu 'public', a nie do katalogu głównego twojej aplikacji. – mumush

10

w app.js:

you must first declare static directory 

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

w pliku Ejs:

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

To jest bardzo dobra odpowiedź! Jeśli próbujesz użyć podobnej do mnie ścieżki względnej na podstawie lokalizacji pliku, np. href = "../../styles/style.css" będziesz miał problemy, jeśli masz jakieś szablony (np. zasoby css/js, które są zawarte w każdym pliku). W skrócie - kiedy użytkownik "/ bla/bla" (slash/bla/bla) pracuje z katalogiem statystyk. Dobry. – Combine

Powiązane problemy