页面区块的定义-使用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后台创建公告、动态内容类型 和 页面顶部的菜单。