类型的内容列表页模板覆盖-使用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_fieldget_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提供的搜索区块类型。

课程讨论

当前内容评论功能已关闭。