帕格 – 编译后错误的嵌套 – 包括vs扩展

编辑:根据正确的答案修改标题,以帮助谷歌search


在下面的代码中,在我的header.pug包含在404.pug页面之后,我的404.pug标签在404.pug页面中不断变成h1标签的孩子。 这是我正在使用的代码:

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 

有人可以解释吗?

  1. 为什么发生这种情况? 和,
  2. 可能会展示一种方法来将h2标签保留为h2的兄弟,而不是成为标签的子代?

现在解决这个问题的一个可能的方法是有一个嵌套的div(一个div在另一个),而不是一个单独的div,像这样:

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

但是这不舒服..

你可能想要做一个extends header.pug而不是include header.puginclude任意包含来自目标文件的所有代码,而不用担心页面上还有什么。 这不是你想要的。 一个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行将被replace为您select将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>