html模板转换为twig模板-Symfony5全面开发
再次使用浏览器打开首页模板,我们可以根据页面的显示来提前的为Twig模板定义一些区块。首先我们可以定义一个顶部区块,用来显示站点的logo和菜单。然后再定义一个内容区块,可以用来显示文章列表或文章的详情。再定一个边栏区块,边栏区块放置文章的分类或者一些其他的小组件。然后可以定义一个底部区块,底部区块用来放置版权信息。
回到项目,我们修改base.html.twig
文件,在base.html.twig
文件中,我们可以预先定一些区块,然后在子模板中对父模板区块进行覆盖,我们打开模板目录的index.html文件全选代码复制,然后粘贴到base.html.twig
文件中。
我们一边修改一边删除代码,首先是元标签数据,这里我们不需要修改,下面是页面的标题,标题我们可以定一个区块。我们复制上面的区块代码直接粘贴。
再往下是样式文件,样式文件我们可以定义一个区块。然后使用encore提供的方法来进行渲染,复制原来代码,删除粘贴。
在body标签中,首先是顶部导航,我们可以定一个顶部导航区块,使用endblock
来结束区块儿。再往下是页面的内容,页面的内容分为左右两列,它们分别使用了bootstrap的样式类。我们可以删除左右两列的所有代码,然后在div标签中,我们定义一个区块content
,content
区块我们留空。然后在各个页面的子模板中进行区块的覆盖。
同样的我们删除边栏的代码,再定义一个边栏区块,再往下是底部footer
区块,这里我们也直接定一个footer
区块。结束区块。
在body标签紧挨着上方是JS代码区块,JS代码区块我们复制之前的代码,我们直接复制原来的代码(这里复制错了,后边会改),替换粘贴,最后我们删除base.html.twig
文件,原来的代码,我们打开文章列表模板index.html.twig
文件,index.html.twig
文件继承于base.html.twig
模板,我们已经删除了base.html.twig
模板中的body区块,我们使用content
区块来显示文章列表。
打开模板的index.html代码,我们把我们把文章列表这一部分代码粘贴到content区块中。复制,粘贴,进行一下修改,h1标签这里我们输入Teebblog List
。删除small标签,然后是文章的列表。文章列表我们使用for
循环来显示,这里只保留一个文章就可以了
在文章块标签上方添加for
循环,然后文章块后面使用else
,最后使用endfor
来结束循环。我们对文章的硬编码进行一下替换,这里是文章的封面图像,我们从原来代码进行复制,alt我们输入post.title
。删除img标签,然后是文章块的标题,使用双括号post.title
来显示。
然后是文章的摘要,整行删除,使用post.summary
,阅读更多这个链接这里我们替换一下地址,这里我们使用文章详情页的链接,Symfony提供了path()
方法来为路由生成链接,这里输入post_show
。它需要传递一个参数,参数的话使用大括号,参数名称id1,id1的值为post.id。 然后是文章的发布日期和作者。
发布日期复制原来的代码,作者这里暂时使用硬编码,然后我们删除原来的代码,在else
关键字块里,我们添加一个h1标签,暂时没有找到文章,我们查看一下博客系统的首页。打开浏览器,输入127.0.0.1:8000
端口,刷新。
这里提示stylesheets
已经被定义了,代码出错了。我们打开base.html.twig
文件,这里写错了,区块名是javascripts
,方法名script_tags
,回到浏览器刷新,现在的代码就显示了。
但是代码的样式显示的有些问题,回到项目,打开assets目录下的app.scss文件,我们需要在app.scss文件中引入bootstrap的样式,通过使用@import
输入~bookstrap,来引入bootstrap的样式,回到浏览器刷新,现在页面的样式就显示的正常了。
我们还需要显示边栏,并且文章列表还显示不全了,我们需要修改一下样式,在app.scss文件中,我们需要添加一些样式,我们需要让body标签距离顶部有一段距离,在body标签中添加padding-top:56px
。然后删除背景颜色。
#assets/styles/app.scss
@import "~bootstrap";
body {
background-color: lightgray;
padding-top: 56px;
//background-color: lightgray;
}
回到浏览器刷新,现在显示的就可以了,我们还需要添加边栏,边栏是所有页面都需要用到的,边栏我们就添加在base.html.twig文件中,我们复制模板文件index.html的边栏代码。粘贴到边栏区块中,回到浏览器刷新。现在页面显示的就比较正常了。
我们点击read more按钮查看一下文章,我们还需要修改文章的模板,打开show.html.twig
文件,同样的我们修改body区块名称为content
。我们打开模板文件detail.html,我们复制文章详情页左侧的代码,粘贴到content
区块中。
暂时保留原来的代码,进行一些硬编码的替换,文章的标题,这里我们使用双括号post.title
替换,作者这里我们暂时使用硬编码,文章的发布日期我们复制原来的代码,然后是封面图像,我们复制一下原来的代码,为代码添加样式类和alt属性,alt属性的值就是文章的标题。
删除原来的img标签,文章的正文这里,我们替换为原来的代码,使用post.body
。评论表单这里我们进行一下代码的替换,在form标签这里我们替换为原来页面的代码,最下面就是评论的列表。我们本节课先不修改使用硬编码,然后删除文章详情页原来的代码。
回到浏览器刷新,现在我们的文章就可以正常显示了,但是表单的样式还是有些问题。在下节课我们将修改表单的样式,并且对评论列表的显示进行处理。