I seem to be overlooking a small detail. Currently, I am experimenting with jade templates in express and trying to utilize blocks and extensions. However, my block does not seem to be functioning correctly. Below are the jade templates I am working with:
layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
script(src='/javascripts/bootstrap.min.js')
body
block content
index.jade
extends layout
block content
header
section
h1 Hello
p.
This is my first jade template
How incredibly exciting!
main
div(class="row")
div(class="col-md-6")
block colOne
div(class="col-md-6")
block colTwo
colOne.jade
extends index
block colOne
section
p.
this will be col one
colTwo.jade
extends index
block colTwo
section
p.
this will be the second col.
While index.jade successfully extends layout.jade, colOne and colTwo are not getting rendered.
I have attempted setting my view options to {layout: false}, but it hasn't made any difference.
The router simply directs to the index.jade file:
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express Mon'});
});
I read that I should render the lowest in the chain, which is why I render index and not layout. Does this mean I need to res.render('colOne')? I tried that, and while I got my index and layout pages, colOne still didn't show up. How would this work for colTwo?
**Lastly, my bootstrap columns don't appear to be functioning... well, at least until I realized that my Chrome inspector was opened too wide. Front end dev struggles...
Where am I going wrong?