Question

我是TWIG的新手。但是我必须解决页面编号方面的一些麻烦我有以下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

我不完全确定您的页码编号是什么意思，但如果我必须从您的代码段中猜测您想要替换pageNum变量，如果您仔细阅读了twig文档，那么您会发现The loop variable

这是一个例子：

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

这将打印：

Person #1
Person #2

每次迭代

等等

Answer 2

UPD：5月5日添加
我已经完成了下一个解决方案的工作，这个解决方案是根据其他答案编写的：

Relative position into the parent element
{{3}}

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

我更改了TWIG模板

{% 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：4小时后添加
为了显示页面总数，我使用了下一个脚本

$( 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);
        })
    })
});

还有一点，我更改了TWIG模板

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

如何通过TWIG和CSS

2 个答案: