Question

编辑：根据正确答案修改标题，以帮助进行Google搜索

在以下代码中，h2页面中的404.pug标记在h1中包含header.pug之后，404.pug标记}页面。这是我正在使用的代码：

Header.pug

doctype
html
  head
    meta(charset='utf-8')
    title Express Guestbook
    link(href="to/bootstrap.min.css", rel="stylesheet")

  body.container
    h1 Express Guestbook
      a.btn.btn-primary.pull-right(href="/new-entry") Write in Guestbook

    //- putting this div here so that whatever code 'include'-s this 
    //- header, will be a child of this div
    div

的 404.pug

include header.pug

  //- This part becomes child of <a> tag, instead of <div>
  h2 404! Page not found

include footer.pug

有人可以解释

为什么会这样？而且，
可能会显示一种方法，将h2标记保留为h1的兄弟，而不是a标记的子项？

现在解决问题的一种可能方法是将一个嵌套的div（另一个div放在另一个div中）而不是只有一个div，如下所示：

body.container
  h1 Express Guestbook
    a.btn.btn-primary.pull-right(href="/new-entry") Write in Guestbook

  //- ugly hack
  div: div

但这感觉不太好......

Answer 1

您可能想要extends header.pug代替include header.pug。 include任意包含目标文件中的所有代码，而不必担心页面上还有其他内容。这不是你想要的。 extends header.pug允许header.pug文件自行呈现，以及使用block定义的其他代码。因此，您必须将代码更改为：

<强> header.pug

doctype
html
    head
        meta(charset='utf-8')
        title Express Guestbook
        link(href="to/bootstrap.min.css", rel="stylesheet")

    body.container
        h1 Express Guestbook
            a.btn.btn-primary.pull-right(href="/new-entry") Write in Guestbook

        //- putting this div here so that whatever code 'include'-s this 
        //- header, will be a child of this div
        div
            block content

block content行将被您选择定义block content的任何内容替换为另一个Pug文件。这在下一个文件中更有意义。

<强> 404.pug

extends header.jade

//- Everything that is a child of "block content" replaces the "block content"
//- from our "header.pug" file
block content
    h2 404! Page not found

因此产生的HTML输出......

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Express Guestbook</title>
    <link href="to/bootstrap.min.css" rel="stylesheet">
  </head>
  <body class="container">
    <h1>Express Guestbook<a href="/new-entry" class="btn btn-primary pull-right">Write in Guestbook</a></h1>
    <div>
      <h2>404! Page not found</h2>
    </div>
  </body>
</html>

pug - 编译后嵌套错误 - include vs extend

1 个答案: