我的 index.js 路由文件有一些问题 - 我是否正确设置了我的视图？答案

【问题标题】：Having some trouble with my index.js route file - have I set up my views correctly?我的 index.js 路由文件有一些问题 - 我是否正确设置了我的视图？
【发布时间】：2015-08-06 01:31:43
【问题描述】：

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

【问题讨论】：

标签： html node.js express pug

【解决方案1】：

您实际上必须使用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>

【讨论】：

谢谢瑞恩。这很有帮助。