本文详解 Pug 中父子模板间变量传递的常见误区与正确实践，重点解决 include 语法错误、block 覆盖逻辑误用、缺失 <head> 标签及过时插值语法等问题，并提供可直接运行的结构化解决方案。
本文详解 pug 中父子模板间变量传递的常见误区与正确实践，重点解决 `include` 语法错误、`block` 覆盖逻辑误用、缺失 `
` 标签及过时插值语法等问题，并提供可直接运行的结构化解决方案。在 Pug 模板引擎中，实现页面级元信息（如 <title>、<meta description>、<link rel="canonical">）的动态注入，常需跨模板协作：父模板（如 layout.pug）定义结构，子模板（如 index.pug）提供具体值。但若未遵循 Pug 的作用域与继承规则，极易导致变量未生效、标签缺失或渲染异常——正如问题中所示：浏览器中完全看不到 <meta> 和 <title> 标签。
? 核心问题诊断
原始代码存在四个关键错误：
- ❌ include 后不可缩进嵌套内容：Pug 不允许在 include head.pug 下直接写 block title 等语句，这会引发语法错误或静默忽略；
- ❌ block 是替换而非继承：子模板中 block head 会 完全覆盖 父模板中同名 block head 的全部内容（包括 include head.pug），导致 head.pug 根本未执行；
- ❌ 缺少实际 <head> HTML 元素：仅命名 block head 并不会自动渲染 <head> 标签，必须显式写出；
- ❌ 过时的属性插值语法：(attr="#{var}") 在新版 Pug（v3+）中已被弃用，应改用 attr=variable 或 attr=variable || 'default' 形式。
✅ 正确实现方案
1. 修正 layout.pug：显式包裹 <head>，并预留可扩展的 block head
doctype html
html(lang='en')
head
block head
// 默认包含基础 meta，也可留空，由子模板决定是否 include
include head.pug
body
include navbar.pug
block content
include footer.pug✅ 关键点：head 是真实 HTML 元素；block head 是其内容占位符，支持 prepend/append/override。
2. 简化 head.pug：移除冗余 block，直接使用变量插值（注意语法）
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)✅ 注意：content=pageDescription 和 href=canonicalURL 是 Pug 推荐的属性赋值写法，无需 #{} 包裹（仅文本节点内需 #{}）。
3. 重构 index.pug：用 prepend head 注入变量，避免覆盖
extends layout.pug prepend head - const pageTitle = "My Website" - const pageDescription = "This is my official website" - const canonicalURL = "https://adityasutar.com/" append content h1 Hello
✅ prepend head 将变量声明插入到父模板 block head 的最前面（在 include head.pug 执行前），确保变量在 head.pug 渲染时已定义。append content 同理，清晰分离关注点。
? 验证与调试建议
- 检查编译输出：启用 Pug 的 compileDebug: true 选项，查看生成的 JS 函数，确认变量是否被正确定义；
- 变量作用域验证：在 head.pug 中临时添加 //- debug: #{pageTitle}（注释不输出），配合 console.log 调试；
- 路径校验：确保所有 include 和 extends 使用相对路径（如 extends ./layout.pug）且文件存在于正确目录；
- 版本兼容性：运行 pug --version，确认使用 Pug v3.x+；旧版语法（如 #{attr}）在新版本中将失效。
? 总结
Pug 的模板继承机制强调“结构优先、数据后置”。正确传递变量的关键在于：
① 明确 HTML 结构层级（如手动写出 <head>）；
② 善用 prepend/append 控制执行顺序，避免 block 替换导致逻辑丢失；
③ 严格遵循新版插值与属性赋值语法；
④ 将变量声明置于 include 之前的作用域中。
按此模式组织，即可实现灵活、可维护、零报错的多页 SEO 元信息管理。
