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标签这里我们替换为原来页面的代码，最下面就是评论的列表。我们本节课先不修改使用硬编码，然后删除文章详情页原来的代码。

回到浏览器刷新，现在我们的文章就可以正常显示了，但是表单的样式还是有些问题。在下节课我们将修改表单的样式，并且对评论列表的显示进行处理。