渲染哈巴狗扩展/块时遇到问题？答案

【问题标题】：Having trouble rendering pug extend/block?渲染哈巴狗扩展/块时遇到问题？
【发布时间】：2019-09-07 21:26:52
【问题描述】：

块内容标题未显示在我的 html 页面上。我已经浏览了附近的一些教程和其他 stackoverflow 文章，因为我可以告诉我遵循正确的语法。我确定我错过了一些东西，但我找不到它。如果可以的话，请帮忙。

我在代码中留下了评论。我尝试更改块的位置以及代码的缩进。我还尝试按照其他文章中的建议添加附加和前置。以及将标题更改为标题以确保我没有冲突。

doctype html
html
body
    block header // have tried with append & prepend and tried it below h1 tag
        h1 Index Page
        p This is the index page

```header.pug:
extends index

block header
    label page1 
    label page2

I am not getting an errors with this code. It is not displaying any of the content from header.pug.

【问题讨论】：

标签： pug

【解决方案1】：

我认为html 和block header 下面的缩进不正确。顺便说一句，head 不见了。

index.pug

doctype html
html
  head
  body

    include header

    block content

header.pug

label page1 
label page2

内容.pug

extends index.pug
  h1 Index Page
  p This is the index page

【讨论】：

感谢您的建议，不幸的是它仍然无法正常工作。我不禁觉得我错过了像缩进这样的东西，但就是想不通。我还尝试在 chrome 和 firefox 中确定并删除 .pug ，因为它不是必需的。如果您有任何其他建议，请随时回复。
请看我的更新。我添加了一个content.pug 示例来演示何时使用include 以及何时使用extends。因此，您会看到标头仅包含在索引文件中。要包含header，请放入正确的路径，例如include ../partials/header 或只是 include ./header。
再次感谢您的回复，感谢您的帮助。我让包含工作，但仍然无法让块工作。不过我会继续加油的。你很有帮助。
@LeoKnox 您正在查看哪个页面？请注意，这种方法不会将content.pug 的内容放在“索引”页面上。它将创建一个单独的“内容”页面（可能可通过content.html 访问，但这取决于您的设置）。
@LeoKnox 你应该创建一个wrapper.pug，其中包含您的文档类型、头部等，然后是一个扩展包装器并包含您的h1 等的index.pug。

【解决方案2】：

我认为您对扩展的工作方式感到困惑。包含extends 声明的文件就是页面，它只是使用它扩展的另一个文件中的标记。

我修改了@kmgt 的答案来说明这一原则。请注意每个文件的不同名称。

wrapper.pug

doctype html
html
  head
  body

    include header

    block content

header.pug

label page1 
label page2

index.pug

extends wrapper

append content
  h1 Index Page
  p This is the index page

about.pug

extends wrapper

append content
  h1 About Page
  p This is the about page

【讨论】：