基于drupal的前端学习小结

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

刚开始接触drupal的同学也许第一反应是:神马情况,网站被这东西搞得更复杂了,连个html标签都要仔细找好长时间。是的,在你还没接触drupal的情况下单纯前端的视角这种感觉是正常的。
首先是drupal的几个主要概念:区块,区域,视图,模块,节点,分类,内容类型等需要先去了解。这些概念组成的体系所带来的高效和快捷是drupal吸引这么多开发者的主要原因。我们主要还是从前端的视角来看drupal给我们带来哪些便捷和惊喜的地方。

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

2016-09-30_201108.png

2016-09-30_201218.png

 

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

2016-09-30_202149.png

然后基于html.tp.php模板加载到网页,实现整个网站的外部样式和库的调用。接下来的html的<body>部分内容是基于page.tpl.php模板生成的,这里的外层框架<header><featured><footer>等都是我们在模板里面定义,至于每层标签里面填充什么内容,就需要先了解下区域和区块的概念,区域是容纳区块的容器。在页面渲染出来后就会出现刚开始我们很疑惑的地方为什么会有那么多一层层的嵌套,这里就是区块以及各种views填充区域后,整合出的层级关系,你会发现,其实在这些层级关系的嵌套下,我们前端样式和js动态效果的实现才更条理化和系统化,更方便的去管理代码。
css部分
css部分只要我们根据之前了解到的html结构层级关系,运用css选择器会让你有耳目一新的感觉,当然这里也有很多要注意的地方。比如样式初始化:

2016-09-30_211042.png

样式表分段加载以及在drupal的框架下的整体和区块概念等等。面向越来越多的响应式要求,drupal也有基于bootstrap的前端框架的引用,可以作为网站的基主题加载进来,针对bootstrap的规则对html标签做调整,就会得到主流的前端样式,当然,让网站完美适配到这个框架下也是我们的任务,相比对整站做响应式开发要轻松太多。另一方面针对网站的兼容性问题,除了我们的样式表做到针对处理外,bootstrap也是做足了功夫,只需做些微调加上其自带的各种各样的动态效果插件也是能满足我们的很多需求。
js部分
关于网站的动态效果,其实drupal让我们很省心,一些很普遍的横幅的切换效果,懒加载效果,菜单动态效果等等都有相关的模块可以利用,稍作配置配合着我们对页面的调整,就会呈现出很多我们想要的效果。但针对自主性很高的动态效果,还是要配合着模块以及插件的使用,让自己的代码做到两者润滑的效果。掌握jquery的使用是必不可少的,在实现前端动态效果的同时,衔接好后端的工作也是前端应该做的,json数据的处理,ajax的使用,存储功能也都需要去了解。

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