Webpack+Pug(Prismic CMS)下meta/link标签错位与div重复渲染问题

问题1：Head区域的link/meta标签被错误渲染到Body中 #

• 检查Pug模板结构语法：
  • 确认基础模板的head和body区块划分清晰，继承模板的extends、block语句无嵌套错误，避免在head的block里编写属于body的内容，同时确保标签缩进层级正确（Pug依赖缩进识别DOM结构）。
  • 排查是否存在标签语法错误，比如meta/link标签后意外添加多余文本或未闭合的代码块，导致Pug解析时误判DOM层级。
• 核对Webpack相关配置：
  • 查看html-webpack-plugin搭配pug-loader的配置，若开启inject选项，检查其值是否设置错误（比如设为body会自动把资源注入body，和手动编写的link/meta冲突），可尝试将inject设为false，手动控制资源引入位置。
  • 暂时禁用非必要的Webpack插件（如资源注入类插件），确认是否是插件干扰导致DOM结构错乱。
• 验证Prismic传入变量：
  • 检查从Prismic获取的meta/link相关字段，是否包含未转义的HTML代码（比如<body>、</head>等），这类代码会破坏Pug生成的DOM结构，需对富文本字段做转义处理（使用|或=的正确写法）。

问题2：.detail类div被渲染两次 #

• 排查Pug模板继承逻辑：
  • 确认基础模板是否已定义.detail元素，若详情模板在对应block中重复添加该元素，或使用block append而非block导致内容叠加，会出现重复渲染。
  • 简化模板测试：去掉继承逻辑，直接编写包含.detail的独立Pug模板，验证问题是否源于模板继承。
• 检查Webpack页面生成配置：
  • 确认html-webpack-plugin仅创建了一次对应页面实例，避免重复生成页面导致DOM重复。
  • 查看项目entry配置，是否有多个入口文件都引用了该详情模板，造成模板被多次编译插入。
• 验证数据渲染逻辑：
  • 检查Prismic返回的数据，是否存在重复条目，或遍历数据时循环条件错误（比如重复遍历同一数据），导致.detail被多次渲染。
  • 查看页面前端脚本，确认是否有JavaScript代码在页面加载后动态插入了.detail元素，比如AJAX请求后重复添加DOM节点。

内容的提问来源于stack exchange，提问作者Ritik Jangir