2012-04-12 30 views
12

Tôi đang cố gắng hiểu Express và Jade hoạt động như thế nào.Liên kết với các tệp ngọc bích khác

Trước hết, tôi có làm đúng khi tôi đang sử dụng layout.jade dưới dạng tệp mẫu (đầu trang, nội dung, chân trang) và sử dụng các tệp khác nhau để hiển thị thông tin trong cơ thể không (xem ví dụ bên dưới)?

Mã hoạt động tốt, nhưng tôi không chắc liệu đây có phải là cách phù hợp để thực hiện nội dung trong Express hay không. Nếu tôi nên tiếp tục với cấu trúc này, làm cách nào tôi có thể liên kết đến các tệp khác (ví dụ: a.Bout.jade) nội bộ từ ví dụ index.jade, để hiển thị tệp đó thay vì index.jade?

Cảm ơn trước!

layout.jade:

!!! 5 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js') 
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js') 
    script(type='text/javascript', src='/javascripts/external.js') 

    // Header 
    header#header 

    // Navigation 
    nav#nav 
    // Navigation code (ul, li etc)... 

    // Sidebar 
    aside#sidebar 
    // Sidebar code... 

    // Body 
    body!= body 

index.jade:

!!! 5 
html 
    head 
    title= title 

    section#wrapper 
     img.imageStyle(src = '/images/test1.png') 
     // And so on... 

About.jade:

// You get it... 

Trả lời

13

Tôi nghĩ rằng những gì bạn đang tìm kiếm được xem render tuyến đường trong express: http://expressjs.com/en/guide/using-template-engines.html

Vì vậy, bạn có thể thiết lập một cái gì đó như thế này:

app.get('/', function(req, res){ 
    res.render('index.jade', { title: 'index' }); 
}); 

app.get('/about', function(req, res){ 
    res.render('about.jade', { title: 'about' }); 
}); 

Để liên kết từ một đến khác, một khi bạn có các tuyến đường hợp lý cấu hình, bạn chỉ có thể làm điều gì đó như:

a(href='/') index 

a(href='/about') about 

Cập nhật Ngoài ra, bạn không cần lặp lại điều này trong chỉ mục.

!!! 5 
html 
    head 
    title= title 
+0

Câu trả lời hay, cảm ơn! – holyredbeard

4

Ngoài những gì Wes Freeman đã viết bạn cũng có thể bao gồm các mẫu ngọc bích khác trong tệp ngọc bích của bạn.

theo cách đó bạn có thể có header.jade, footer.jade và đưa chúng vào tệp about.jade của bạn. dưới đây là tài liệu bao gồm từ ngọc bích: https://github.com/visionmedia/jade#a13

theo cách đó bạn chỉ phải thay đổi tệp header.jade nếu bạn thêm thẻ mẫu hoặc thẻ kiểu mẫu trên mỗi trang.

+0

+1, cũng là thông tin hữu ích. –

Các vấn đề liên quan