首页 > 解决方案 > 无法在哈巴狗中扩展布局

问题描述

在我的索引文件中,我使用以下标记扩展布局:

extends layout
html
  script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js')
  link(rel='stylesheet', href='/stylesheets/style.css')    
  link(rel='stylesheet',href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css')
  script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')
block content
  h1= title

body

  nav
    .navbar.navbar-inverse
    .container-fluid
    .navbar-header
  a
    .navbar-brand(href='#') WebSiteName
  ul.nav.navbar-nav
    li.active
      a(href='#') Home
    li
      a(href='#') Issues
    li
      a(href='#') Page 2
    li
      a(href='#') Page 3

我收到以下错误:只有命名块和 mixin 可以出现在扩展模板的顶层。

谷歌搜索并尝试了一些没有帮助的基本修复

布局.pug:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='stylesheets/style.css')
  block content  
  body
   nav
    .navbar
    .container-fluid
    .navbar-header
   a
    .navbar-brand(href='#') WebSiteName
    ul.nav.navbar-nav
      li.active
        a(href='#') Home
      li
        a(href='#') Page 1
      li
        a(href='#') Page 2
      li
        a(href='#') Page 3

标签: expresspug

解决方案


可以分享你的扩展布局代码吗?也尝试给 body 和它的子元素一个选项卡。

extends layout


block content
    h1= title

    body
        script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js')
        link(rel='stylesheet', href='/stylesheets/style.css')    
        link(rel='stylesheet',href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css')
        script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js') 
        nav
            .navbar.navbar-inverse
            .container-fluid
            .navbar-header
        a
            .navbar-brand(href='#') WebSiteName
        ul.nav.navbar-nav
            li.active
              a(href='#') Home
            li
              a(href='#') Issues
            li
              a(href='#') Page 2
            li
              a(href='#') Page 3

推荐阅读