如何通过TWIG和CSS在每个页面的右下方插入数字

Question

我是TWIG的新手。但我必须解决一些页码问题。
我有后续的嫩枝模板

{% extends 'agreement/report_base_template.html.twig' %} 
{% block title %}Personal card{% endblock %} 
{% block content %} 
{% for Person in AllPersons %} 
{% set pageNum = 1 %} 
<div id="content" class="page"> 
<!-- generate the frist page as a table //--> 
<div style="page-break-after:always;"></div> 
</div> 
{% set pageNum = pageNum + 1 %} 
<div id="content" class="page"> 
<!-- generate the second page as a table //--> 
<div style="page-break-after:always;"></div> 
</div> 
<!-- other pages generated the same way //--> 
{% endfor %}  
{% endblock %} 

该模板生成每个Person多页的文档。
UPD：在20分钟后添加
需要在每个页面的右下方插入数字，如下所示。

并且对于每个文档，第一页的数量必须为1

UPD：7小时
使用JavaScript，也可以之后添加。

Answer 1

UPD：新增5月5日
我已经完成了我的工作，这是从一些其他的答案编制下一解决：

1. Print page numbers
2. Relative position into the parent element

现在，我可以看到每个页面上的数字。
重要
此解决方案不显示总页数。
在本帖末尾查看如何显示页面总数。

我改变树枝模板

{% for Person in AllPersons %} 
    {% set pageNum = 1 %} 
    <div class="page"> 
     <div class="content"> 
      <!-- there is some the content of the first page //--> 
     </div> 
    <div class="break">{{pageNum}}</div> 
    </div> 
    {% set pageNum = pageNum + 1 %} 
    <div class="page"> 
     <div class="content"> 
      <!-- there is some the content of the second page //--> 
     </div> 
    <div class="break">{{pageNum}}</div> 
    </div> 
    <!-- other pages generated the same way //--> 
{% endfor %}  

和CSS

.page { 
    background: white; 
    margin: 0 auto; 
    margin-bottom: 0.5cm; 
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); 
    width: 21cm; 
    height: 29.7cm; 
    position: relative; 
} 
.content { 
    padding: 0.5cm 1cm 0.5cm 2cm; 
} 
.break{ 
    page-break-after: always; 
    position: absolute; 
    bottom: 5mm; 
    right: 5mm; 
} 
.break:before{ 
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
} 

UPD：四小时
之后添加到显示的页面的总数，我用了下一个脚本

$(document).ready(function() { 
    $(".person").each(function(){ 
     var totalNumber = $(this).children(".page").length; 
     $(this).children(".page").each(function (index){ 
      $(this).children(".break").append("page "+(index+1)+" of "+ totalNumber); 
     }) 
    }) 
}); 

一点点，我改变了嫩枝模板

{% for Person in AllPersons %} 
    {% set pageNum = 1 %} 
    <div class="person"> <!-- This tag was addaed //--> 
     <div class="page"> 

Answer 2

我不能完全肯定你是什么页码的意思，但如果我从你的代码片断猜你要替换的pageNum变量，如果你看过树枝文档仔细，你会发现The loop variable

这里有一个例子：

{% for Person in AllPersons %} 
    Person #{% loop.index %} 
{% endfor %} 

会打印：

Person #1 
Person #2 

等每个迭代