我的index.js路由文件遇到问题-我是否正确设置了视图？

Question

This is my routes/index.js:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index');
});

module.exports = router;

This is my index.jade:

extends layout

block content

block top-menu

This is my layout.jade:

doctype html

html
  head
    title The Outpost
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(href='stylesheets/style.css', rel='stylesheet')
    link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", rel="stylesheet")
    link(href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css', rel='stylesheet')
  body
    block content
    block top-menu

This is my top-menu.jade:

extends index

block top-menu
  <!-- menu -->

How can I have my menu show up when I use res.render('index'); ? Or am I just understanding jade inheritance wrong?

I'm using this site for understanding: http://www.learnjade.com/tour/template-inheritance/

Answer 1

You would actually have to use res.render('top-menu') for this to work as you have it set up. I would suggest using include to bring top-menu into your layout.

doctype html

html
  head
    title The Outpost
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(href='stylesheets/style.css', rel='stylesheet')
    link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", rel="stylesheet")
    link(href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css', rel='stylesheet')
  body
    block content
    include top-menu

Note: you will need to move top-menu above content if you want it to actually show up above the content.

Then you don't have to extend anything in your top-menu nor do you have to declare a block to override because it will just be included in the layout.

<!-- top-menu.jade -->
<ul>...</ul>