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

时间:2015-08-05 16:07:46

标签: html node.js express pug

这是我的路线/ 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;

这是我的index.jade:

extends layout

block content

block top-menu

这是我的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

这是我的top-menu.jade:

extends index

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

使用res.render('index');时如何显示菜单?或者我只是了解玉的遗传错误?

我正在使用此网站了解:http://www.learnjade.com/tour/template-inheritance/

1 个答案:

答案 0 :(得分:0)

实际上,您需要使用res.render('top-menu')来设置它。我建议使用include将顶级菜单添加到您的布局中。

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

注意:如果您希望将内容实际显示在内容之上,则需要将顶级菜单移到上方。

然后您不必在顶层菜单中扩展任何内容,也不必声明要覆盖的块,因为它只会包含在布局中。

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