Pug父布局layout.pug扩展至子布局index.pug时遇'unexpected token:indent'错误

嘿，这个缩进错误我之前也踩过坑——Pug对缩进的要求超级严格，一点点不规范都会触发这个报错。咱们一步步来排查和解决：

常见原因及修复方案 #

1. 混合使用空格和制表符（Tab）缩进 #

这是最常见的原因！Pug要求整个项目里的缩进必须统一，要么全用空格（推荐2或4个），要么全用Tab，绝对不能混着来。

修复：检查你的layout.pug和index.pug文件，把所有缩进统一成同一种格式。大多数编辑器都有“将Tab转换为空格”的功能，可以一键修复。

2. extends语句被缩进了 #

extends必须是子文件（index.pug）的第一行，而且不能有任何缩进，必须顶格写。如果它前面有空格或Tab，Pug就会识别错误。

错误示例：

extends layout.pug  <!-- 这里有缩进，错了！ -->
block content
  h1 Hello World

正确示例：

extends layout.pug  <!-- 顶格写，正确！ -->
block content
  h1 Hello World

3. Block内容的缩进层级不对 #

子文件里填充block的内容，必须比block关键字多一级缩进。父布局里的block定义也要和上下文保持正确的缩进层级。

正确的父布局（layout.pug）示例：

doctype html
html
  head
    title 我的网站
  body
    block content  <!-- 和body下的其他元素缩进一致 -->
    footer
      p 版权所有 © 2024

正确的子布局（index.pug）示例：

extends layout.pug

block content
  h1 欢迎来到我的网站  <!-- 比block多一级缩进，正确 -->
  p 这是首页的内容

最后检查步骤 #

1. 打开两个文件，确认所有缩进格式统一
2. 确保extends是index.pug的第一行且无缩进
3. 验证所有block的内容缩进层级正确
4. 保存文件后重新编译，应该就能解决这个错误啦！

内容的提问来源于stack exchange，提问作者Sanjay kumar.k