WeasyPrint动态页数场景下如何设置强制分页后的页面背景为黄色

刚好我对WeasyPrint的页面样式配置比较熟悉，这个问题其实可以用**命名页面（Named Pages）**来完美解决，完全不需要依赖固定的页码！

核心思路 #

WeasyPrint支持为页面定义专属的命名样式，然后通过CSS的page属性，将特定元素关联到这个命名页面。结合你已经在用的page-break-before: always强制分页，就能让新生成的页面自动应用你想要的黄色背景，不管前置内容有多少页。

具体实现步骤 #

1. 定义命名页面样式
   在你的CSS里，先创建一个带黄色背景的命名页面：

   /* 定义黄色背景的命名页面 */
   @page yellow-page {
     background: yellow;
     /* 可按需添加其他页面样式，比如边距 */
     margin: 2cm;
   }
   
   /* 默认页面样式（可选，用于其他正常页面） */
   @page {
     margin: 2cm;
   }
   

2. 关联元素到命名页面
   在需要触发分页并应用黄色背景的位置，给对应的元素添加CSS类，同时指定page属性和分页规则：

   <!-- 前面的动态内容（页数不确定） -->
   <div class="dynamic-content">
     这里是会动态变化页数的前置内容...
   </div>
   
   <!-- 触发分页并启用黄色背景页面 -->
   <div class="yellow-page-section">
     这是黄色背景页面的内容，你也可以留空做成纯黄页
   </div>
   
   <!-- 后续内容切回默认页面样式 -->
   <div class="normal-content">
     这里的内容会使用默认页面样式
   </div>
   

   对应的CSS类配置：

   .yellow-page-section {
     /* 强制在元素前分页 */
     page-break-before: always;
     /* 指定使用我们定义的yellow-page命名页面 */
     page: yellow-page;
   }
   
   /* 让后续内容恢复使用默认页面 */
   .normal-content {
     page: auto;
   }
   

3. 如果需要空白的黄色页面
   如果你只是想要一个没有内容的纯黄色页面，可以给触发元素设置占满页面高度：

   .yellow-empty-page {
     page-break-before: always;
     page: yellow-page;
     height: 100vh;
     margin: 0;
   }
   

   对应的HTML只需要一个空元素：

   <div class="yellow-empty-page"></div>
   

原理说明 #

WeasyPrint的page属性会让元素所在的页面（以及后续连续的页面，直到被重新指定page属性）应用对应的命名页面样式。结合page-break-before: always，就能确保新生成的页面100%使用你定义的黄色背景，完全不用关心它是第几页，完美适配动态页数的场景。

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