在 pug/jade 中包含父元素

Question

在我的网站上，每个页面中的主要内容都需要是容器 div 的子项。 我试图将此 div 放在包含在每个页面上的标题中，但是当呈现时，div 会自行关闭并且没有将主要内容作为其子项。

这是我的示例页面的哈巴狗：

html
    body
        include includes/header.pug
            div(id='main-content')
                [main content goes here]

这是我的标题的哈巴狗包括：

 nav
    [navigation bar goes here]
 div(id='container')

当我呈现此页面时，代替作为容器 div 子项的主要内容，代码<div id='container'></div>出现在代码的末尾。 当我删除div(id='main-content')之前的表格时，代码<div id='container'></div>出现在主要内容之前。 我想避免在每个页面上对容器 div 进行硬编码。

Answer 1

Pug include语句不接受块或子元素。 相反，您应该使用模板继承。 这让您可以在一个地方定义许多页面共有的内容，并允许您定义页面特定内容应作为块放置的插槽。

使用您的示例内容，一种方法是设置以下文件：

_wrapper.pug:（每个页面将扩展的主模板）
 html head body include _header #main-content .container block content
_header.pug：（包含导航的部分）
 nav#navigation .container ul li a(href='#') home li a(href='#') contact
homepage.pug：（扩展包装模板的主页）
 extends _wrapper append content h1 This is your homepage p Lorem ipsum
contact.pug：（扩展包装模板的联系页面）
 extends _wrapper append content h1 This is your contact page p Lorem ipsum

编译后，这将呈现两个 HTML 文件，其中重用公共内容：

主页.html

 <html> <head></head> <body> <nav id="navigation"> <div class="container"> <ul> <li><a href="#">home</a></li> <li><a href="#">contact</a></li> </ul> </div> </nav> <div id="main-content"> <div class="container"> <h1>This is your homepage</h1> <p>Lorem ipsum</p> </div> </div> </body> </html>

联系方式.html

 <html> <head></head> <body> <nav id="navigation"> <div class="container"> <ul> <li><a href="#">home</a></li> <li><a href="#">contact</a></li> </ul> </div> </nav> <div id="main-content"> <div class="container"> <h1>This is your contact page</h1> <p>Lorem ipsum</p> </div> </div> </body> </html>

希望这是有帮助的。

在 pug/jade 中包含父元素

问题描述

1 个解决方案

解决方案1
0 2020-01-03 21:50:29

在 pug/jade 中包含父元素

问题描述

1 个解决方案

解决方案1 0 2020-01-03 21:50:29

解决方案1
0 2020-01-03 21:50:29