帕格 – 编译后错误的嵌套 – 包括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
有人可以解释吗?
- 为什么发生这种情况? 和,
- 可能会展示一种方法来将
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.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
行将被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>