Pug模板扩展head块后内容为何生成到body中？

核心错误 #

你在header.pug里犯了关键错误：把页面的header可视化结构（.container和<header>元素）直接写到了append head块中。而head块是嵌套在HTML的<head>标签内的，浏览器解析时会发现<head>里不允许放置这类可视化DOM元素，自动将它们移到<body>内，这就导致了布局异常。

正确实现方式 #

要达成“部分页面显示header，部分不显示”的需求，需要把header的HTML结构和head块的脚本追加拆分开，步骤如下：

1. 修改layout.pug，新增专属header块 #

在<body>内添加一个空的header块，用来承载页面的header结构：

doctype html
html
  head
    block head
      title= title      
      link(rel='stylesheet', href='/css/bootstrap/bootstrap.min.css')
      script(type='text/javascript' src='https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js')    
      script(type='text/javascript' src='/js/lodash/lodash.js')
      script(type='text/javascript' src='/js/popper/popper.min.js')      
      script(type='text/javascript' src='/js/bootstrap/bootstrap.js')

  
  - var bodyClasses = [];
  block beforeBody 

  body(class=bodyClasses)
    block header  // 新增此块，专门放置页面header结构
    block content

2. 重构header.pug，拆分内容到对应块 #

让header.pug只在head块追加脚本，同时填充新增的header块：

extends layout

// 仅在head中追加脚本，不放置可视化结构
append head 
    script(type='module' src="../javascripts/controllers/headerController.js")

// 将header的HTML结构放入专属的header块
block header
    .container
        header.d-flex.flex-wrap.align-items-center.justify-content-center.justify-content-md-between.py-3.mb-4.border-bottom 
            a.btn.btn-primary.btn-sm Hello
            .col-md-3.text-end 
                button.btn.btn-sm.btn-light#logOutBtn(type='button') Logout

3. 页面文件使用方式不变 #

需要显示header的页面扩展header.pug即可；不需要header的页面直接扩展layout.pug：

extends header

append head
    script(type='module' src="./javascripts/controllers/adminController.js")

block beforeBody 
    - bodyClasses.push('bg-dark')
    - bodyClasses.push('py-3')
    - bodyClasses.push('text-white')

block content
 //page goes here

补充提示 #

• head块仅能放置<title>、<script>、<link>这类HTML头部专属元素，不能放页面可视化DOM结构。
• 通过独立的header块，你可以灵活控制页面是否显示header：需显示则扩展header.pug，无需显示则直接扩展layout.pug。

内容的提问来源于stack exchange，提问作者Jesse Finnegan