分类词汇内容列表block类型-使用TEEBB快速搭建您的网站

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

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

立即登录

打开teebb.com视频教程页面,视频教程使用了分类词汇来进行管理。课程的名称就是一个分类词汇。

打开TEEBB控制台,创建视频教程分类类型。在分类类型中可以添加图像字段做为视频的封面, 添加长文本、已格式化带摘要字段做为视频的介绍字段。添加几个词汇,添加TEEBB视频教程做为课程大类,添加TEEBB基础教程、TEEBB高级教程做为课程小类,小类里就是课程合集了,在TEEBB基础教程里添加《快速使用TEEBB搭建您的网站》课程,url别名这里输入teebb-begin 。

你可以在课程的字段里添加数据,并且在前台页面获取字段的数据。 分类类型字段数据的获取方法和内容类型的字段获取方法一样,可以在twig模板中使用get_specify_type_fieldget_content_field方法。

下面我们来创建课程类型,并且添加一些示例课程内容。

点击 类型 -> 添加类型 -> 标签输入 视频教程 -> 别名输入: course -> 点击保存并添加字段 ->添加图像字段做为视频预加载时的封面 -> 添加文件字段可以上传文件 -> 文件字段设置后缀为mp4,ogg,其他默认。 ->添加文本字段做保存视频时长->最重要的一步,添加分类字段,这里引用视频教程分类类型,新增标签保存在视频教程分类中。

添加几篇内容,课程分类这里选择具体的课程名。

回到FrontController创建课程列表路由,edge-case:本节课只想显示《快速使用TEEBB搭建您的网站》的课程列表,这里用硬编码的方式。

复制index action函数,修改路径,路径这里使用course/{slug}, slug是Taxonomy类的属性,用于存储分类词汇的url别名,路由名称修改为course-list,action函数修改为courseListAction()。

Symfony提供了ParamConverter注解,自动调用转换器可以把路径中的请求参数转换为对象。 https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/converters.html

如果参数的占位符名称和对象的属性名一致,可以省略ParamConverter注解。 路径中的slug占位符对应Taxonomy对象的slug属性,这里省略ParamConverter注解,slug参数需要转换为Taxonomy对象,courseListAction()第一个参数输入 Taxonomy $taxonomy, 在函数体中输入 dd(taxonomy); 回到浏览器,手动输入课程列表路径 /course/teebb-begin, 刷新,看到了对应的Taxonomy对象已经成功转换了。

创建对应的页面模板,把Taxonomy对象传入模板。

同样的,让模板文件继承base.html.twig,使用模板中的course参数修改页面标题,

复制模板文件的代码覆盖banner_contentblock,标题修改为course参数的词汇。

创建content block把html模板中对应的代码复制、粘贴到content block中。刷新页面,左侧是课程的封面图像,和课程的正文描述,使用get_specify_type_field函数也可以获取分类的字段数据。


    {% set imageFields = get_specify_type_field(course, 'taxonomy', course.taxonomyType, 'referenceImage') %}
    {% for imageFieldData in imageFields %}
        {% if loop.first %}
            {% if imageFieldData[0].value %}
                {% set imagePath = imageFieldData[0].value.filePath %}
                <img src="{{ imagePath|imagine_filter('list_poster') }}" class="w-100 object-cover" alt="{{ course.term }}">
            {% else %}
                <div class="skeleton-image"></div>#}
            {% endif %}
        {% endif %}
    {% endfor %}

    {# 显示当前词汇下课程概览字段信息 #}
    {% set course_infos = get_specify_type_field(course, 'taxonomy', course.taxonomyType, 'textFormatSummary') %}
    {% for course_info in course_infos %}
        {% if loop.first %}
            {% if course_info[0].value %}
                {{ course_info[0].value|raw }}
            {% else %}
                这里空空如也,编辑稍后会添加内容。😁️
            {% endif %}
        {% endif %}
    {% endfor %}

第一个参数传入taxonomy对象,第二个参数传入分类类型所对应的bundle名称,打开TeebbCoreBundle Services目录下的Types目录,TaxonomyEntityType对应的bundle是 taxonomy, 第三个参数是taxonomy对象所属于的分类类型别名这里输入course.taxonomyType,第四个参数是字段的类型id。

同样的方法获取课程分类的正文,用于展示课程的描述信息。

右侧是课程的列表,TEEBB提供了 'teebb.core.block.contents_in_taxonomy' block类型,可以获取指定分类的所有内容列表。

>> teebb.core.block.contents_in_taxonomy
    entity_class       
    label
    get_children
    limit
    translation_domain
    order
    template
    taxonomy_slug
    bundle

这里要获取内容数据,对应的entity类是Content类,entity_class参数可以省略。
如果某个分类词汇下有子词汇,get_children设置为true可以获取当前词汇和子词汇对应的内容,设置为false则只获取当前词汇的内容。

taxonomy_slug:是要查询的分类词汇的别名 bundle参数:当前要获取的类型对应的bundle, 当前我们获取内容类型的内容数据这里bundle输入 content

自定义页面的模板,输入{{dump()}} 刷新页面,看到当前block模板中的数据,contents是查询到的内容列表。我们循环遍历contents完成列表的显示。

{% for content in contents %}
    <a href="{{ path('teebb_content_show', {slug:content.slug}) }}"
       class="py-3 list-group-item list-group-item-action">
        <div class="d-flex align-items-center justify-content-between">
            <div class="title d-flex align-items-center">
                {{ loop.index|format_number({integer_digit:2}) }}、{{ content.title }}
            </div>
            <div class="time-long">
            <span class="time-icon">
                <svg width="1.2em" height="1.2em" viewBox="0 0 16 16"
                     class="bi bi-clock-fill mr-1" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"></path>
                  </svg>
            </span>
                <span class="small-line-height">
                {% set course_time = get_content_field(content, 'content', 'video_time') %}
                    {% if course_time is empty or course_time[0].value == null %}
                        时长正在统计
                    {% else %}
                        {{ course_time[0].value }}
                    {% endif %}
            </span>
            </div>
        </div>
    </a>
{% endfor %}

视频时长这里使用了 get_content_field方法来获取数据,第一个参数是内容对象,第二个参数是内容类型的bundle名称,第三个参数是字段的别名。

刷新页面,这里提示format_number过滤器使用了twig的intl-extension扩展,使用composer来安装扩展,复制这段命令,在命令行中安装扩展。再次刷新页面,课程列表完整的显示了。

至此,TEEBB中控制台中如何添加类型、分类以及如何添加内容的功能和前台页面常用的twig函数已经讲完了。你可以举一反三,把html模板中的剩下功能进行实现。

下套课程见。

课程讨论

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