Bố cục thừa kế trong ngọc

Question

Nếu bạn không biết jade là gì.
Tôi gặp vấn đề với các cấu trúc mẫu thừa kế tập tin system.My là như vậy

/views/ 
    |-- layout.jade 
    /products/ 
     |-- index.jade 
     |-- product.jade 
/static/ 
    /stylesheets/ 
     |-- style.css 

Những vấn đề là khi tải trang sản phẩm mà nhận được một id như param (localhost: 3000/sản phẩm /: id nếu không phải cho/id nó sẽ tải tốt), mặc dù bố trí vẫn mở rộng chính xác nó không tải stylesheet đúng (con đường bị hỏng). Tôi đang làm một nửa của nó ngay mặc dù, trong trang chỉ mục của sản phẩm stylesheet tải tốt.

Layout.jade

head 
    link(rel='stylesheet', href='stylesheets/style.css') 

Answer 1

Đó có lẽ là đường dẫn tương đối trong href của bạn. Đào bới xung quanh tài liệu rõ ràng, tôi thấy rằng cách tiếp cận phổ biến nhất là để tham khảo các kiểu từ cơ sở của các trang web như thế này (chú ý/stylesheets trước):

link(rel='stylesheet','/stylesheets/style.css') 

này có lợi ích của việc dễ dàng , và làm việc trên các tuyến đường của nhiều chiều sâu (/ về,/về/tôi, vv). Tuy nhiên, nó có âm tính không hỗ trợ chiều sâu thư mục ứng dụng. Ví dụ: nếu bạn muốn lưu trữ ứng dụng của mình tại: http://yourserver/yourapps/yourapp thì đây sẽ là một vấn đề. Tôi không biết liệu bạn có quan tâm đến điều này hay không, hầu hết các ví dụ về diễn đạt chắc chắn không :-)

Tuy nhiên, nếu bạn muốn làm điều này đúng cách, có một ví dụ về github nhanh site: blog. https://github.com/visionmedia/express/tree/master/examples/blog

Cách tiếp cận ở đây là sử dụng thành phần phần mềm trung gian để lấy url cơ sở và đưa nó vào người dân địa phương được chuyển xuống chế độ xem bố cục. Đây là những gì HTML của bạn sẽ trông như thế:

!!! 5 
html 
    head 
    title Blog 
    link(rel='stylesheet', href=base + '/style.css') 
    body 
    #container!= body 

Các bộ phận quan trọng để kiểm tra nếu bạn đòi hỏi phương pháp này là middleware/locals.js, app.js nơi các thành phần middleware là dây lên, và layout.jade nơi base href được sử dụng.

Mã hóa hạnh phúc!