基于Drupal的前端学习小结

Sep 30, 2017 / Shidong Zhu

基于drupal框架做前端开发有一段时间了,和大多数人一样是一个从认识drupal到学习并熟悉drupal的一个过程。现在想来基于这个框架做网站开发是一件很方便和快速的方式,接下来就是我这段时间做前端开发的总结,也是对drupal从相识到相知的过程:

刚开始接触drupal的同学也许第一反应是:神马情况,网站被这东西搞得更复杂了,连个html标签都要仔细找好长时间。是的,在你还没接触drupal的情况下单纯前端的视角这种感觉是正常的。

首先是drupal的几个主要概念:区块,区域,视图,模块,节点,分类,内容类型等需要先去了解。这些概念组成的体系所带来的高效和快捷是drupal吸引这么多开发者的主要原因。我们主要还是从前端的视角来看drupal给我们带来哪些便捷和惊喜的地方。

html部分

首先针对一个基于drupal搭建的一个网站比如dminorstudio(公司网站),打开chrome浏览器的控制台,会看到头信息和里面的内容,当然里面会大量的引入的类js和css的文件,那么这些文件实在哪里被引入的呢?

drupal front end code 1.pngdrupal front end code 2.png

首先在搭建网站前期会有准备工作,这个时候我们需要有有自己的主题文件,主题文件里面需要一个.info的文件,主要包括网站的基本信息、版本、以及基主题的引用、网站的区域定义、以及加载的js以及css文件。

drupal front end code 3.png

然后基于html.tp.php模板加载到网页,实现整个网站的外部样式和库的调用。接下来的html的部分内容是基于page.tpl.php模板生成的,这里的外层框架

等都是我们在模板里面定义,至于每层标签里面填充什么内容,就需要先了解下区域和区块的概念,区域是容纳区块的容器。在页面渲染出来后就会出现刚开始我们很疑惑的地方为什么会有那么多一层层的嵌套,这里就是区块以及各种views填充区域后,整合出的层级关系,你会发现,其实在这些层级关系的嵌套下,我们前端样式和js动态效果的实现才更条理化和系统化,更方便的去管理代码。

css部分

css部分只要我们根据之前了解到的html结构层级关系,运用css选择器会让你有耳目一新的感觉,当然这里也有很多要注意的地方。比如样式初始化:

drupal front end code 4.png

样式表分段加载以及在drupal的框架下的整体和区块概念等等。面向越来越多的响应式要求,drupal也有基于bootstrap的前端框架的引用,可以作为网站的基主题加载进来,针对bootstrap的规则对html标签做调整,就会得到主流的前端样式,当然,让网站完美适配到这个框架下也是我们的任务,相比对整站做响应式开发要轻松太多。另一方面针对网站的兼容性问题,除了我们的样式表做到针对处理外,bootstrap也是做足了功夫,只需做些微调加上其自带的各种各样的动态效果插件也是能满足我们的很多需求。

js部分

关于网站的动态效果,其实drupal让我们很省心,一些很普遍的横幅的切换效果,懒加载效果,菜单动态效果等等都有相关的模块可以利用,稍作配置配合着我们对页面的调整,就会呈现出很多我们想要的效果。但针对自主性很高的动态效果,还是要配合着模块以及插件的使用,让自己的代码做到两者润滑的效果。掌握jquery的使用是必不可少的,在实现前端动态效果的同时,衔接好后端的工作也是前端应该做的,json数据的处理,ajax的使用,存储功能也都需要去了解。

掌握这些技术上的学习是一方面,同时保持好良好的沟通交流能力以及开发流程中和设计、后端的衔接也是前端工作的一部分,这也是开发项目效率和质量的保证。所以,前端学习任重而道远,后面要走的路还很多,一起共勉。

关于作者

Dan Hu

Shidong Zhu

Subscribe to Our Newsletter

We will deliver China-related web design, web development, and digital marketing information or tips every month.

Stephen Tseng
Jun 20, 2020 / Stephen Tseng

Nilfisk力奇清洁——线上数字营销案例分享

B2B企业线上数字营销主要的目的在于如何抓住、保持及留下流量,然后进一步转化他们为我们的潜在/最终客户。

继续阅读 →

Dan Hu
Oct 25, 2019 / Dan Hu

为“爪领”设计公益海报

和小毅的第一次会面并没有太多激动人心的内容,因为在此之前我们就已经有过一次愉快的项目合作了,——那是为他和他的合作伙伴Audery共同经营的宠物领养平台“爪领”设计一套宣传海报。

继续阅读 →

Eva Zhao
Sep 26, 2019 / Eva Zhao

《长安十二时辰》的盛唐绝美配色!

最近火热的完结国产剧,非《长安十二时辰》莫属!该电视剧有小说改编,从布景到色调,观众都能将大唐时代长安的热闹繁华尽收眼底。恢弘壮丽的建筑,精致华美的服饰,连妆容都是唐朝典型的白面红靥、黛眉花钿。还有那油画般的美术场景设定,让人目不暇接、沉迷不已,完全是一次色彩的胜利。

继续阅读 →