在 pug/jade 中包含父元素答案

【问题标题】：Include parent element in pug / jade在 pug/jade 中包含父元素
【发布时间】：2020-01-04 05:50:29
【问题描述】：

在我的网站上，每个页面的主要内容都需要是容器 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 进行硬编码。

【问题讨论】：

标签： html pug

【解决方案1】：

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

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

_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 文件，并重复使用公共内容：

homepage.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>

contact.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>

希望这有帮助。

【讨论】：