内容详情页模板覆盖-使用TEEBB快速搭建您的网站

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

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

立即登录 注册账号

点击顶部公告的标题进入公告内容详情页。 这个页面是TeebbCoreBundle自带的模板。页面的路由名称是teebb_content_show,在命令行中输入

symfony console debug:route teebb_content_show

找到_controller键,看到当前页面是由ContentController的showAction函数来响应的。 双击shift键,勾选右上角,输入ContentController,选择Front命令空间的这个文件, 找到showAction函数,TEEBB使用TemplateRegistry的getTemplate方法来获取模板文件, 我们在行前输入

dd($this->templateRegistry->getTemplate('content_show', 'front'));

按commad键点击 dd函数,dd函数可以查看变量的数据,并且退出当前的php后续执行。 回到公告页面,刷新。 我们看到了当前页面的模板文件路径。

在Symfony中可以对Bundle中的twig模板进行覆盖。

谷歌搜索bundle override打开这个页面, https://symfony.com/doc/current/bundles/override.html#templates

文档的大概意思是说,你可以在项目的templates/bundles目录中对第三方bundle的模板文件进行覆盖。 bundle-name目录对应是Bundle中Resources目录下的views目录, 模板覆盖需要路径和文件名相同。 下一段举例如何把FosUserBundle中的用户注册页面模板进行覆盖。 现在我们也来进行一下替换,在public目录创建bundles目录、TeebbCoreBundle目录、front目录show.html.twig。 将原来的show.html.twig中的代码复制过来。

接下来所有模板的修改都在show.html.twig文件中。 先来看看TEEBB自带的内容显示Action给模板传入了什么参数。

{{dump()}}

刷新页面, subject是我们的内容对象, type_alias: 是当前内容所属于的内容类型别名, field_data: 是当前内容包含的所有字段数据,

打开teebb.com网站的公告详情页,我们看到内容详情显示在了banner区 让show.html.twig也继承base.html.twig

{% extends 'base.html.twig' %}

创建banner_content block, 把模板文件中对应的html代码粘贴过来,刷新,正常显示。 回到show.html.twig,修改内容标题使用{{subject.title}} 修改日期显示, subject还提供了boolTop属性来判断当前内容是否置顶, 取消原来代码的注释,看下之前的内容是怎么显示的。 TEEBB的macro文件提供了 showContentAllFieldsData 方法,可以按照字段顺序依次显示字段的数据。 引入macro.html.twig做为macro变量, showContentAllFieldsData 第一个参数是内容的对象, 第二个参数是内容所属于的bundle, 输入'content', 第三个参数是内容的类型别名 刷新,成功显示了,但是封面图像显示在了正文的下方,字段的标题也不需要显示。 打开TEEBB控制台,类型->管理字段->在字段设置页面取消字段标题的显示。 在字段列表页点击管理字段显示,拖拽字段前面 十字箭头 图标 调整下字段的显示顺序。 保存 刷新!这次显示的可以了。

内容详情页的下方还有更多文章区块,我们参考首页的动态列表,显示当前内容类型的其他更多文章。 打开index.html.twig 找到代码,复制粘贴,我们只想显示相同内容类型的内容, typeAlias: subject.typeAlias limit: 3, 我们还需要定义新的block模板, 在blocks目录中创建more_contents.html.twig 从VSCODE中复制对应的html代码 粘贴到模板文件中。

还记得block类型给我返回的contents参数吗? 使用for循环遍历所有内容, 把标题、日期、作者进行一下替换,内容的摘要,我们从首页最新动态区块的模板中复制: 引入 macro文件 粘贴显示摘要代码

{{ macro.getContentSummary(content, 'content', content.typeAlias) }}

tip:这里忘了修改链接地址使用

{{ path('teebb_content_show', {slug: content.slug}) }}

粘贴到对应位置就可以了。

刷新页面,显示了,但是列表中出现了我们当前页面的内容,虽然显示上没什么问题,当站点的内容比较少的时候,总会在更多文章列表显示当前内容, 就很奇怪。

block类型还有一个 exclude 参数,我们把当前内容的id添加到exclude参数里进行排除,

{{ sonata_block_render({type:'teebb.core.block.contents'}, {
    limit: 3,
    order: {createdAt: 'DESC'},
    criteria: {typeAlias: subject.typeAlias},
    exclude: {id: subject.id},
    template: 'blocks/more_content.html.twig'
}) }}

再次刷新页面,页面不显示当前的内容了,因为没有更多的公告内容,显示了一片空白,我们可以在for循环里添加else控制, 如果没有内容则显示 it is empty! 我们不想显示英文,使用trans过滤器,trans的默认翻译domain是messages,phpstorm会提示我们创建messages.zh_CN.yaml文件中创建翻译,键: it is empty 值:这里还是空空如也,请先查看其他内容。😄️ 刷新,完美! 如果想查看某个类型下的内容列表,TEEBB提供了另一个路由teebb_types_contents,我们在phpstorm控制台使用命令

symfony console debug:route teebb_types_contents

手动输入url路径查看一下,/types/{typeAlias}/contents , 把 {typeAlias} 替换为 公告内容类型的别名 announcement 回车 页面显示了公告内容的列表

下一节,我们将会使用本节课的方法,对内容列表页进行模板的覆盖。

课程讨论

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