你在这里

drupal主题

听晴空讲Drupal主题——第六章 主题中的CSS(15)

drupal的前端表现为什么这么差(3) 关键人物介绍

John Albin Wilkins

这位可爱风趣的台湾女婿,zen主题的作者,在近两年的Drupal聚会演讲中,都喜欢用这么一句话开头: “Are you new to front-end web development? "  Here’s a secret:  no one else really knows  what they’re doing either.”——一句话胜过千言万语吧?呵呵。

我第一次听他这么说的时候并没有意识到其中的原因,后来在洛杉矶的Drupalcon上,在他演讲的时候,向大家道歉,说Drupal7的主题层的CSS,是他的责任。那次会议他有两个演讲,所以现在我也不记得他具体是在那一个中提到的,想要考证的话,自己去听吧。

听晴空讲Drupal主题——第六章 主题中的CSS(14)

drupal的前端表现为什么这么差(2) Drupal主题系统的“变革”

Drupal7和它之前的版本,页面上每渲染出一个元素,都会被一层层的div包裹着,并且每一层div都有一长串的class/id选择器。然而,Drupal7在主题层上依然比前面的版本要强大、灵活。比如:

听晴空讲Drupal主题——第六章 主题中的CSS(13)

drupal的前端表现为什么这么差(1) 前端工作流程的变革

本节前言

我已经开始写第七章了,但是其实第六章并没有完,前面十多节的内容都是在为后面做铺垫,只是每次临到准备下笔的时候,又退缩了,因为我要写的东西和中国drupal圈子的现状差距比较大,从前面章节的阅读数量来看,也证明了这一点。

听晴空讲Drupal主题——第七章 主题中的JS(3)

7.2.4 drupal_add_library

另外,你还可以使用drupal_add_library添加js库。格式如下:

drupal_add_library($module, $library);

这里,库指的是一个js+css的集合,库中还可以包含其它依赖的库。例如,Drupal7中所包含jQuery UI,就是一个库,并且,这个库存在于核心的 system模块中,如果你想引入整个jQuery UI,你可以这样:

<?php

drupal_add_library('system', ‘ui');

听晴空讲Drupal主题——第七章 主题中的JS(2)

7.2 在主题中引入JS

7.2.1 使用.info文件添加js

在dp中引入js最简单的方法是在.info文件中进行声明。这里就不重复叙述了,但是你应该记住两点:第一,用这个方法添加的js会出现在网站的所有页面上,因此,要考虑性能问题。第二,用这个方法添加的js是主题层的js,当drupal页面加载的时候,drupal会首先加载库js(core/library)和模块js,然后才加载主题js。

或者,你也可以用JS Injector 模块来执行这个动作,官网地址:https://www.drupal.org/project/js_injector。

7.2.2 从template.php中加载js

听晴空讲Drupal主题——第七章 主题中的JS(1)

7.1 主题中的JS

和上一章类似,本章我们会讲一些Drupal主题中和JS有关的知识点,但是并不讲JS本身。如果你对JS还不很了解,建议你花时间去学习一下,因为JS真的非常有用。

在你往主题中写入JS语句之前,你应该了解以下事实:

1.  Drupal程序自带jQuery和jQuery UI

2.  在页面上写任意一句JS语句,Drupal就会自动为你载入jQuery(及另一个自带的js文件:drupal.js)

听晴空讲Drupal主题——第六章 主题中的CSS(12)

6.12 在主题中应用smacss(3)——Apply SMACSS in Drupal theme(3)

之前我们讨论了如何控制区块中的选择器,现在让我们来学习如何用类似的技巧控制字段的选择器。

我们知道,字段是Drupal7建设网站的基石。字段包含着内容,内容为王!在我们学习控制字段的选择器之前,我们应该先搞清楚drupal是如何把字段渲染出来的。关于这个知识点,请看第二章第三节

听晴空讲Drupal主题——第二章 Drupal主题相关的重要概念(3)

 2.3 Drupal主题相关的重要概念(3)Basic concept of Drupal Theme (III)

2.3.6

这一节,我们以字段为例,再更进一步的讲述覆写的概念,覆写字段的方法不止一种,但是我将重点讲述普遍推荐的方式——使用theme_field()函数。

听晴空讲Drupal主题——第六章 主题中的CSS(11)

6.11 在主题中应用smacss(2)——Apply SMACSS in Drupal theme(2)

3 高级办法——template.php

你可以在block模块中找到block.tpl.php文件,这是Drupal区块的默认模版文件:

听晴空讲Drupal主题——第六章 主题中的CSS(10)

6.10 在主题中应用smacss(1)——Apply SMACSS in Drupal theme(1)

ok,前几节我都在介绍css构架方式,核心是smacss。smacss并不是什么css技术,它无法帮你写出一个下拉菜单或者首页幻灯片,它是一套关于如何编写css的指导原则,让你的css结构更合理,更具有可读性和重用性。之所以说它是指导原则,是因为它并不是你必须完全遵守的规定,每个人、每个团队、每个项目都可以根据它发展出适合自己的具体实践方式。

页面

订阅 RSS - drupal主题