2012-11-21 39 views
15

Tôi đang cố tạo một máy chủ đơn giản với nút, biểu thức và ej cho mẫu. Tôi đã nhận được máy chủ để trỏ đến trang, tải nó, và thậm chí có thể tạo ra các bit khác của mã với tuyên bố bao gồm. Tuy nhiên vì lý do nào đó, bảng định kiểu sẽ không tải.Không thể lấy biểu định kiểu để làm việc với các ej cho 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"); 

File EJS là trong một lần xem thư mục/board.ejs

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

và style.css là trong một thư mục phong cách/style.css liên quan đến ứng dụng. js

p { 
    color:red; 
} 

Tôi đã thử mọi đường dẫn mà tôi có thể quan tâm đến cho href của liên kết bao gồm liên quan đến địa phương của tôi st điểm liên quan đến app.js liên quan đến board.ejs và thậm chí chỉ style.css nhưng không ai có vẻ làm việc. Bất kỳ đề xuất được đánh giá rất nhiều.

Trả lời

37

Khai báo một thư mục tĩnh:

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

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

rằng dường như không làm việc. Tại sao ''/ public'?' Và cách thiết lập app.use thay đổi cách biểu định kiểu được đánh giá như thế nào? Tôi cũng đã cố gắng đặt thành 'href = '/ styles/style.css'' với thay đổi và không có bất kỳ may mắn nào – Loourr

+0

đặt nó lên trên dòng app.router() của bạn. – chovy

+1

Về cơ bản bạn đang nói chuyện với tệp .ejs của mình và nói rằng khi bạn tham chiếu một tệp tĩnh, như trong thẻ 'link' ở trên, thư mục gốc là thư mục' public' mà bạn đã định nghĩa trong app.use, chứ không phải gốc thư mục của toàn bộ ứng dụng của bạn. Trong trường hợp này, "/" trong href của thẻ liên kết tham chiếu đến thư mục 'public', không phải thư mục gốc của ứng dụng của bạn. – mumush

10

trong app.js:

you must first declare static directory 

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

trong tập tin EJS:

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

Đó là câu trả lời rất hay! Nếu bạn đang cố gắng sử dụng như tôi một số đường dẫn tương đối dựa trên vị trí tệp, ví dụ: href = '../../styles/style.css' bạn sẽ gặp sự cố nếu bạn có một số mẫu (ví dụ: tài nguyên css/js được bao gồm trong mọi tệp). Tóm lại - khi bạn sử dụng "/ bla/bla" (dấu gạch chéo/bla/bla), bạn đang làm việc với thư mục thống kê. Tốt. – Combine