Node.js, pug templates

Question

Very very new to using the above and so far so good. I'm just doing a simple test site to get my head around things.

Got a single template and two pages (index & about). What I cannot figure out and I've read various website on the matter, is how I can have different content for the two pages using the single template. I've probably not got something right or doing things completely wrong, so if anyone can point me in the right direction or provide good working examples. it would help me no end.

The Template

doctype html
html(lang="en")
head
    title= metaTitle
    meta(charset='utf-8')
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Open+Sans')
    link(rel='stylesheet', href='_templates/bootstrap336/css/bootstrap.css')
    link(rel='stylesheet', href='_templates/css/generic.css')

body
    .container
        header
            #header
                h1 Node.js

        nav.navbar.navbar-default
            include shared/nav.pug

        section

            h3 #{pageHeading}

            <!-- Want my content here -->

            p 
                img(src='/_templates/images/reg_icon.png')

        footer
            .row
                .col-xs-12.col-sm-6
                    Copyright &copy; 2016
                .col-xs-12.col-sm-6.text-right
                    Privacy

    script(src='_includes/jquery/jquery-2.2.3.min.js')
    script(src='_includes/jquery/jquery-ui-1114/jquery-ui.js')
    script(src='_templates/bootstrap336/js/bootstrap.min.js')

Basic webserver

//Basic webserver
var express = require('express'),
app = express();

require('./routes')(app);

module.exports=app;

//config
app.set('view engine','pug');
app.set('views',__dirname + '/public/_templates');

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

//Starts and listens
var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("Listening on " + port+" | In folder " + __dirname + '\\public');
})

My routes.js file

module.exports = function(app){

var coretitle="Node.js :: Test";

app.get('/', function (req, res) {
    res.render('index', {
        metaTitle   :   coretitle,
        pageHeading :   'First attempt'
    });
});

app.get('/about', function (req, res) {
    res.render('index', {
        metaTitle   :   coretitle,
        pageHeading :   'All About This'
    });
});

}

Answer 1

It's really simple, you just need to use the extends syntax in your files. I will write an small example :).

layout.pug

//Here you define your basic html template, and would be as follow

doctype html  
html
  head
    title Pug Example
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.min.css")
    link(rel="stylesheet" href="/css/payment.css")
    script(src="/components/jquery/dist/jquery.min.js")
    script(src="/components/bootstrap/dist/js/bootstrap.min.js")  

  body
    div.container
     block content

Notice, in this file I've just included the basic HTML5 skeleton of your page. Then in your about and index page you can proceed as follow.

index.pug

extends layout
block content
  .row
    .col-md-8
      p Some info right here :D

NOTE: The extends will look in your directory for layout.pug, in my case the templates are in the same level,aka the same directory, but if you have the following folder structure like:

/public/views/
-layout.pug
/main/
-index.pug
-about.pug

Then you must scale one directory up like extends ../layout . Hope this help someone starting in this template world. Cheers ;)