Gulp 传递子模板中的Pug变量以供父模板块使用

sqougxex 于 2023-11-15 发布在 Gulp

关注(0)|答案(1)|浏览(259)

我正在做一个使用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

型
在浏览器中未检测到Meta标记

gulp

来源：https://stackoverflow.com/questions/77335567/passing-pug-variables-from-child-template-for-use-in-parent-template-block

1条答案

按热度按时间

x6yk4ghg1#

代码中有几个错误：

include声明不能在下面缩进内容。
1.子模板中的block将 * 替换 * 父模板中同名block的内容
1.没有定义<head>元素（注意，将块命名为“head”不会自动呈现<head>元素）
(attr="#{variable}")形式的属性插值语法在Pug中不再起作用
一个更好的方法来实现你正在尝试做的事情，如下所示：

*layout.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

赞(0）回复(0）举报 2023-11-15

我来回答

Gulp 传递子模板中的Pug变量以供父模板块使用

1条答案

相关问题

热门标签

最新问答