页面区块的定义-使用TEEBB快速搭建您的网站

在正式开发前使用git init命令，将我们的项目初始化为git仓库。

我会对每一节课程的代码打上tag，你可以在github或者视频教程页面下载对应的代码。

另一个好处就是可以方便的在phpstorm中观察修改了哪些文件，新增了哪些文件。

使用VScode打开下载好的html模板，将index.html中的代码全选粘贴到phpstorm的index.html.twig文件中

刷新项目首页，页面显示了但是错位了，因为我们并没有把页面的资源文件添加到TEEBB中，

在Public目录新建teebb-com目录，将模板目录中的assets 和 vendor目录拷贝进去。

修改index.html.twig中的 资源文件路径

刷新页面

哇哦！现在貌似显示的正常了。

回到页面代码，我们对资源路径使用了硬编码，这可以使用，

但是在Symfony中我们使用twig函数asset()，对资源文件的路径进行包裹。

如果你想把资源文件发布到CDN上，仅需修改一行配置，asset()可以自动在资源路径前面添加CDN主机路径，非常的方便。

我们再次进行修改，给所有资源添加asset()函数。

刷新页面，依然正常。

我们将页面进行区块的定义，全选复制index.html.twig中的所有代码，复制到base.html.twig。

在base.html.twig中定义区块,

title这里需要定义，每个页面都有自己的标题。

css文件也需要定义，个别页面可能需要增加样式文件。

顶部导航区是共用的，我们抽取成header.html.twig文件，整段代码剪贴，粘贴。

对应的我们使用 include 关键字 将header文件引入进来。

banner区块有很多页面也用到了，我们先定义common_banner区块，将banner包裹起来，

如果有页面不需要banner区块，可以留空覆盖common_banner区块，

再将banner的包裹section和背景图片留下，在section中定义banner_content区块，

这样banner可以显示不同的内容。

还记得吗？在banner上方还有个区块用来显示列表页的标题或者面包屑导航。

为了方便理解，我们定义两个区块，一个叫breadcrumb 一个叫list_page_title。

banner下方是内容区域，我们定义content区块。

浮动的联系我们窗口也是共用的，抽取成float_contact.html.twig，剪切代码，粘贴，

#twig
{% include 'float_contact.html.twig' %}

底部的footer都是共用的，抽取成footer.html.twig，剪切代码，粘贴

#twig
{% include 'footer.html.twig' %}

最底部的js文件也需要定义区块并将共用的js文件包裹起来。

最后一行teebb.js是我们的自定义js文件，你可能在teebb.js之前引入其他js，

在这行前面添加extra_javascripts区块，如果需要添加其他js文件，覆盖extra_javascripts区块就好了。

现在我们修改index.html.twig文件，在第一行输入代码

{% extends base.html.twig %}

让首页继承base.html.twig

我们覆盖title区块，把首页的标题剪切 粘贴到title区块。

把banner section中的内容剪切 粘贴到banner_content区块。

把content区块的内容， 剪切 粘贴到content区块。

刷新页面。哇哦，报错了。

因为子模板继承了父模板，那么子模板只能在区块中进行修改，区块外的代码需要全部删除。

我们删除区块外的代码，刷新页面，显示成功了！

下一节，我们将在TEEBB后台创建公告、动态内容类型 和 页面顶部的菜单。