解决项目结构中的 Pug 模板集成问题

Question

我正在开发一个使用 Pug 模板引擎的项目。我的所有 Pug 文件（layout.pug、head.pug、index.pug 等）都存储在名为 pug 的文件夹中。在我的layout.pug 文件中，我已经建立了HTML 文档的基本结构。我的目标是包含 head.pug 文件来动态设置页面标题和规范 URL。

但是，我遇到了一个问题，即在渲染过程中未检测或应用 head.pug 文件。我仔细检查了文件位置、语法和缩进，但问题仍然存在。

我可以采取哪些故障排除步骤来解决此问题？

这是代码：

1）头.哈巴狗

meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
block title
 title #{pageTitle}
block description
 meta(name="description" content="#{pageDescription}")
block canonical
 link(rel="canonical" href="#{canonicalURL}")enter code here

2）布局.pug

doctype HTML
html(lang="en")
 block head
  include head.pug
 body
   include navbar.pug
   block content
   include footer.pug

3）index.pug

extends layout

block head
    include head.pug
        block title
            - var pageTitle = "My Website"
        block description
            - var description = "This is my official website"
        block canonical
            - var canonicalURL = "https://adityasutar.com/"

block content
    h1 Hello

浏览器中未检测到元标记

Answer 1

代码有一些问题：

```
include
```
声明下面不能缩进内容。
block
```
将
```
替换父模板中同名的block
```
的内容
```

<head>

 元素（请注意，将块命名为“head”不会自动渲染

<head>

 元素）

(attr="#{variable}")

形式的属性插值语法在 Pug 中不再起作用

实现您想要做的事情的更好方法如下：

布局.pug doctype html html(lang='en') head block head include head.pug body include navbar.pug block content include footer.pug
head.pug：注意更新后的属性插值语法。 meta(charset='UTF-8') meta(name='viewport', content='width=device-width, initial-scale=1.0') title #{pageTitle} meta(name='description', content= pageDescription) link(rel='canonical', href= canonicalURL)
index.pug：注意这里使用的是prepend
而不是
block
。这将将此块的内容放在父模板中相应块内的任何内容之前，而不是替换它。也不需要为每个变量使用单独的块。
extends layout.pug prepend head - const pageTitle = "My Website" - const description = "This is my official website" - const canonicalURL = "https://example.com/" append content h1 Hello

解决项目结构中的 Pug 模板集成问题

问题描述投票：0回答：1

1个回答

最新问题

解决项目结构中的 Pug 模板集成问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1