完成边栏所有功能-使用TEEBB快速搭建您的网站

您需要登录后才可观看此视频

为了更好的为您提供服务,请您登录后再查看本课程。

立即登录

边栏搜索框下方是动态分类类型的词汇列表,在TEEBB控制台中,我们已经创建了动态分类类型,把动态分类类型的词汇在这里遍历显示出来就可以了。

在TEEBB中所有可以使用字段的类型EntityType都可以使用teebb.core.block.contentsblock类型获取对应的Entity对象。 打开TeebbCoreBundle Services目录下的Types目录,分类类型对应的Entity类是Taxonomy::class,Doctrine使用Taxonomy类存储分类词汇数据。

在side.html.twig文件分类词汇代码位置使用sonata_block_render渲染分类词汇列表, entity_class输入Taxonomy全类名,全类名的\要使用双\\来进行转义, 这里只想显示动态分类类词的词汇,打开Taxonomy类,Taxonomy使用taxonomyType属性存储分类类型的别名,查询条件这里输入{taxonomyType: 'news_tags'},news_tags是动态分类类型的机读别名。 这里我们同样需要自定义block模板,输入template参数,并且对应创建模板文件。 teebb.core.block.contents同样给模板文件传入了contents参数,这里contents是Taxonomy类对象的列表。使用{{dump(contents)}}进行查看。对contents参数循环遍历,复制模板文件代码进行替换。

{% for taxonomy in contents %}
    <a href="{{ path('teebb_taxonomy_contents',{slug:taxonomy.slug }) }}"
        class="list-group-item list-group-item-action py-3 h4 mb-0 {% if app.request.get('_route') == 'teebb_taxonomy_contents' and
            app.request.get('slug') == taxonomy.slug %}active {% endif %}">
        {{ taxonomy.term }}
    </a>
{% endfor %}

a标签链接到teebb_taxonomy_contents路由,teebb_taxonomy_contents路由是TEEBB自带的用于显示某个分类词汇下所有内容的列表页路由,app是Symfony提供的Twig 全局变量,使用app.request对象可以获取当前页面请求数据,我们判断当前页面的路由和参数来判断当前是否需要添加active样式类。

回到动态列表页面,刷新,分类词汇已经显示了。词汇列表下方是精选内容列表,这里我们只想获取置顶的内容,同样使用teebb.core.block.contentsblock类型,entity_class使用Content类可以省略,过滤条件这里使用Content类的boolTop属性为true作为查询条件。同样需要自定义模板传入template参数,创建模板文件:

{% for content in contents %}
    <div class="bg-light p-3 mb-3">
        <div class="row row-0">
            <div class="col-4">
                {% set imageFields = get_specify_type_field(content,'content', content.typeAlias, 'referenceImage') %}
                {% 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 %}
                                ![{{ content.title }}]({{ imagePath|imagine_filter()
                            </a>
                        {% else %}
                            <div class="ratio ratio-16x9">
                                <div class="skeleton-image"></div>
                            </div>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
            <div class="col-8">
                <div class="card-body">
                    <a href="{{ path('teebb_content_show',{slug:content.slug}) }}" class="text-dark">
                        <h4>{{ content.title }}</h4>
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

使用get_specify_type_field获取封面图像的第一张作为封面,第一个参数传入content对象,第二个参数传入Content类的bundle名称,第三个参数是content的类型别名,第四个传入字段的类型id,如果没有封面图像使用一张原型图片进行占位。

在TEEBB控制台上修改一篇内容勾选内容置顶,回到动态列表页面刷新。边栏显示正常了。在左侧内容列表中,分类词汇的链接页面显示当前分类词汇下的所有内容,这个页面也需要修改。 和动态列表页面的显示相同,你可以参考动态列表页面,复制TeebbCoreBundle中对应的模板进行模板覆盖并在对应代码位置引入content_list.html.twigside.html.twig模板文件。

在下一节,我们分析下teebb.com网站的课程列表功能,我们将学会使用另一个block类型来获取某分类词汇下的所有内容。

课程讨论

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