基础篇25. 复习、总结、继续前进

在之前的课程中,我们学习了如何搭建和配置开发环境,了解了drupal主题的文件构成,如何用info文件定义一个主题,如何创建区域,如何创建库,学习了什么是模板文件,怎样利用twig debug功能查看模板建议,如何覆写模板文件,如何创建自定义区块并放置在区域中。有了以上这些知识,你对整个drupal的主题层就有了一个大致的了解了,接下来你要做的就是继续为你的知识框架添加细节。

这里,再次提醒,如果你购买了付费内容的权限,一定不要只看视频而忽略了文档,因为文档中会讲述更多的细节,这些细节是至关重要的,而且在今后都会非常有用。配合文档一起学习,效果才会最好。

接下来,我们会用几节课的内容继续对现有网站进行操作,我们一边巩固前面学过的东西,一边继续学习新的内容,并且把网站调整到一个新的状态,为下一阶段的学习做好准备。过程应该是很轻松的,你准备好了么?

和上一节中的footer一样,我们应该把首页的全屏大图放到区块里,这样便于管理其中的内容。毕竟每天看着同一条鸡汤的话,也是会腻的。那么我们应该怎么做?建议你先把视频暂停,自己先尝试一下。

OK,欢迎回来。首先,不要忘记,我们在info文件中定义的3个区域,header、content和footer。其次,区块是放在区域中的。因此,我们应该首先考虑的是,如果hero被做成了一个自定义区块,我们应该把它放在哪个区域中?

我们先在首页模板文件中找到hero所对应的代码,即88-94行,我们可以看到,这几行代码位于content区域的外面。

因此,footer显然不行,因为footer位于页面底部。header和content区域也不行,至少如果不调整模板的话,是不行的。至于原因,你这么聪明,想一下就知道啦!

目前,最简单的方式是在info文件中重新定义一个新的区域。谁也没有规定info文件中只能定义3个区域,对吧?进入info文件,添加一个新的区域,hero

hero: Hero

然后重建缓存。

刷新区块布局页面,你可以看到我们新建的区域。

用上一节中同样的方法自定义一个区块,并把首页模板文件中对应的代码黏贴到区块中,不要忘记此处的文本格式应该是full html并且应该黏贴到源代码中。

然后在区块布局中把这个区块放置到hero区域中,并且为区块的显示条件设置为仅在首页显示。

保存之后,再次回到首页模板文件中,将对应的代码删除,并按照我们之前已经学会的方式,输出hero区域:

{{ page.hero }}

再次重建缓存。

回到网站首页,刷新之后,你会看到当鼠标滑过hero区域的时候,右上角会出现快速编辑和区块配置的按钮,这说明,我们的区块创建成功了。

我们可以用快速编辑的方式来修改区块中的文字。

本书共83小节:

评论 (3)

  • 29
    • 2017-10-02

    请问晴空, 这里需要像footer一样 新建一个hero.html.twig 文件? 然后在里面{{ page.hero}} ,当然按照你的方法已经可以打印出来并可以编辑了

  • 上一节中,我们专门创建的一个footer.html.twig模板是为了方便管理,也是为了介绍include模板的方法。这个footer在每个页面上都是一样的,所以在不同模板上都include同一个footer模板会更加容易维护。而本节中的hero,一般是首页才有的“英雄区”,这是外国人的叫法,中国人普遍叫做首页幻灯片、首页大图区。这个区块只在首页才有,所以,只要把它写在page--front.html.twig首页模板中即可。单独写也可以,但是没有必要。

    感谢你的留言,国庆快乐。

  • 29

    嗯,好的。

    国庆快乐~