类型的内容列表页模板覆盖-使用TEEBB快速搭建您的网站
本节课我们以动态类型的内容列表页为例讲解，和内容详情页一样先查看TEEBB自带的模板文件路径，从TeebbCoreBundle/Resources/Views/front目录中把原来的list_type_content.html.twig 文件复制到templates下的front目录中。 先来查看当前页面有哪些变量：
{{ dump() }}
type: 是当前内容类型对象， paginator: 是TEEBB提供的用于内容列表分页的对象，它包含了当前页面要显示的内容对象列表。 回到模板文件：我们看到原来代码使用for循环可以遍历获取paginator中的内容，最底部是用于分页的页码器。 同样，让当前模板继承'base.html.twig' ，注释不需要的代码。
{% extends 'base.html.twig' %}
查看teebb.com动态列表页的样式，列表页的标题在list_page_title区块。 content区块左侧是内容列表，右侧边栏是搜索框和分类菜单和推荐文章。 先来修改当前页面标题，在title区块中使用当前内容类型的标签做为页面标题。输入
{{ type.label }}
覆盖list_page_title区块，从html模板中复制对应的代码到list_page_title区块，并修改列表页标题
{% block list_page_title %}
<section id="topTitle" class="bg-light">
<div class="container text-center">
<div class="row pt-4">
<div class="col-12">
<h1 class="font-weight-bold normal-title text-muted">
{{ type.label }}
</h1>
</div>
</div>
<div class="row pb-4">
<div class="col-12">
<p class="lead text-muted font-weight-normal">
“不作恶 爱成长”
</p>
</div>
</div>
</div>
</section>
{% endblock %}
定义content区块，把页面模板中对应的html代码粘贴到content区块。 刷新页面，显示正常，回到twig文件，在内容列表 单个内容项代码位置使用for循环遍历paginator。
{% for content in paginator %}
<div class="card border border-left-0 border-right-0 mb-4">
...
</div>
{% else %}
{{ 'It is empty.'|trans }}
{% endfor %}
使用{{ dump(content) }} 对当前内容数据进行查看，并对对应的html硬编码进行替换。
修改内容标题，日期，用户名， 使用macro文件提供的getAvatar()方法对用户头像代码进行替换，getAvatar方法第一个参数是当前内容作者对象，我们传入content.author, 第二个参数是头像图像的样式类。 内容的摘要部分，使用macro提供的getContentSummary()方法来获取，第一个参数传入content对象，第二个参数是内容类型的bundle别名，在TeebbCoreBundle源码Services目录下的Types目录TEEBB提供了内置的类型，内容类型的bundle是content，分类类型的bundle是taxonomy，参数这里使用'content'，第三个参数传入当前内容的类型别名，传入content.typeAlias。
刷新！现在我们需要处理封面图像和分类词汇。 我们在TeebbCoreBundle源码目录中找到Twig目录下的Extensions目录，这里提供了一些常用twig函数， 在BaseContentFieldsShowExtension类中，提供了get_content_field和get_specify_type_field两个方法用于获取内容中指定字段的数据。 如果你想在特定页面获取内容指定字段的数据可以使用get_content_field函数，因为这个函数的第三个参数需要传入字段的别名。 因为列表页可能是动态类型的内容列表，也可能是公告类型的内容列表，我们使用get_specify_type_field来获取字段的数据。 动态类型使用了图像字段，但是动态类型并不知道这个图像字段是用来作为封面图像的，我们需要特殊处理一下。 在twig模板封面图像代码位置使用set关键字和get_specify_type_field方法来获取图像字段数据。
{% set postImages = get_specify_type_field(content, 'content', content.typeAlias, 'referenceImage') %}
第一个参数是内容对象，第二个参数是内容的bundle，输入'content'，第三个参数是内容的类型别名，第四个参数是字段的类型id。 在TeebbCoreBundle源码Services目录下的Fields目录中每个字段类型都有自己的类型id,图像类型使用referenceImage。
使用dump(postImages)查看获取到的数据。 图像字段的数据以数组的形式列了出来，我们添加for循环并且进行条件判断。 我们只想取第一张封面图片，并且封面图像不为null，
{% for imageFieldData in imageFields %}
{% if loop.first %}
{% if imageFieldData[0].value %}
<a href="{{ path('teebb_content_show', {slug: content.slug}) }}">
{% set imagePath = imageFieldData[0].value.filePath %}
<img src={{ imagePath|imagine_filter('blog_poster') }} alt="{{ content.title }}">
</a>
{% endif %}
{% endif %}
{% endfor %}
imagine_filter是LiipImagineBundle提供的过滤器，可以方便的对图像进行裁剪和路径显示，你可以在这个页面查看完整的使用文档。https://symfony.com/doc/current/bundles/LiipImagineBundle/index.html list_poster是过滤器配置名称，在config/packages目录下 编辑 liip_imagine.yaml 文件，进行配置
liip_imagine:
# valid drivers options include "gd" or "gmagick" or "imagick"
driver: "gd"
filter_sets:
list_poster:
filters:
thumbnail:
size: [ 800, 450 ]
mode: outbound
allow_upscale: true
刷新，封面图像成功是显示了，并且按配置进行了裁剪。删除多余的代码，对分类字段数据也进行同样的操作。 第四个参数我们修改为分类字段的类型id,在for循环里我们进行条件判断，如果分类词汇的值不为null，显示对应的词汇标签。
{% set tagsFields = get_specify_type_field(content, 'content', content.typeAlias, 'referenceTaxonomy') %}
{% for tagsField in tagsFields %}
{% for tag in tagsField %}
{% if tag.value %}
<a href="{{ path('teebb_taxonomy_contents',{slug:tag.value.slug }) }}"
class="teebb-bg text-secondary badge bg-light small">{{ tag.value.term }}</a>
{% endif %}
{% endfor %}
{% endfor %}
刷新页面，成功显示了。 我们取消页码器注释，把代码剪切并粘贴到内容列表下方。刷新页面。并没有显示页码器，当前路由可以接收两个参数： page：当前的页码。limit：当前页面内容列表数量限制。在url中添加limit参数，刷新。页码也成功显示了。
下一节，我们将完成列表页右侧边栏的代码，你将会学到如何使用TEEBB提供的搜索区块类型。