Linking to other jade files

Question

I'm trying to understand how Express and Jade works.

First of all, am I doing it right when I'm using layout.jade as a template file (header, body, footer) and using different files to show information in the body (see examples below)?

The code works fine, but i'm unsure if this is the right way to do stuff in Express. If I should keep going with this structure, how can I link to other files (eg.About.jade) internally from for example index.jade, to show that file instead of index.jade?

Thanks in advance!

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

Answer 1

I think what you're looking for are view rendering routes in express: http://expressjs.com/en/guide/using-template-engines.html

So you can set up something like this:

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

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

To link from one to the other, once you have the proper routes configured, you can just do something like:

a(href='/') index

a(href='/about') about

Update Also, you don't need this repeated again in index.

!!! 5
html
  head
    title= title

Answer 2

additionally to what Wes Freeman wrote you can also include other jade templates in your jade file.

that way you could have your header.jade, footer.jade and include them in your about.jade file. here's the include documentation from jade: https://github.com/visionmedia/jade#a13

that way you only have to change the header.jade file if you add for example script or stylesheet tags that should be on every page.