2012-04-12 3 views
12

Я пытаюсь понять, как работает Экспресс и Джейд.Ссылка на другие файлы нефрита

Прежде всего, я делаю это правильно, когда я использую layout.jade в качестве файла шаблона (заголовок, тело, нижний колонтитул) и используя разные файлы для отображения информации в теле (см. Примеры ниже)?

Код работает нормально, но я не уверен, что это правильный способ делать вещи в Express. Если я буду продолжать эту структуру, как я могу связать себя с другими файлами (например ,.About.jade) изнутри, например, index.jade, чтобы показать этот файл вместо index.jade?

Заранее благодарен!

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... 

ответ

13

Я думаю, что вы ищете являются вид визуализации маршрутов экспресс: http://expressjs.com/en/guide/using-template-engines.html

Таким образом, вы можете создать что-то вроде этого:

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

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

Чтобы связать друг с другом, как только вы имеете все необходимые маршруты настроены, вы можете просто сделать что-то вроде:

a(href='/') index 

a(href='/about') about 

Update Кроме того, вам не нужно повторять это снова в индексе.

!!! 5 
html 
    head 
    title= title 
+0

Отличный ответ, спасибо! – holyredbeard

4

Кроме того, что Wes Freeman написал, вы можете также включать другие нефритовые шаблоны в ваш нефритовый файл.

таким образом у вас может быть заголовок header.jade, footer.jade и включить их в файл about.jade. вот прилагаемая документация от нефрита: https://github.com/visionmedia/jade#a13

Таким образом, вам нужно только изменить файл header.jade, если вы добавите, например, теги сценариев или тегов стилей, которые должны быть на каждой странице.

+0

+1, также полезная информация. –

Смежные вопросы