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

课程讨论

当前内容评论功能已关闭。