内容详情页模板覆盖-使用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 回车 页面显示了公告内容的列表

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