十一月 7

【Drupal】为 theme_box 添加个性 class 以方便定制 CSS 样式外观

在 Drupal 中有很多预定义的 theme 函数(在 theme.inc 中)而多数主题函数在渲染时并没有过多的考虑前端的 CSS 样式定义及呈现问题,其中 theme_box 就是其中之一,在 Drupal 中默认的“评论表单”及“搜索结果”就使用 theme(‘box’) 函数渲染,但如果想区分对待,分别定义不同的 CSS 样式会发现相当困难,这里提供一个简单的覆写主题函数的方法来为 theme_box 添加额外的 class 以方便前端附加个性的 CSS 样式。

做 Drupal 开发最基本的原则就是避免修改核心代码,所以我在主题模板的 template.php 文件添加如下代码:

1
2
3
4
5
6
7
function anyLiv_box( $title, $content, $region = 'main' ){
	$output  = '<div class="box box-'.substr(md5($title),-4).'">';
	$output .= '<h2 class="head">'. $title .'</h2>';
	$output .= '<div class="body">'. $content .'</div>';
	$output .= '</div>';
	return $output;
}

其中的 anyLiv 换成你的主题名称。这里除给整个 box 外面添加一个 div 以外还额外添加了 class 其中 box 可用来定义 box 的整体外观,而后面根据 $title md5 之后生成的四个字符用来定义个别 box 的外观,因为通常 box 的 title 能决定这个 box 的功能。

做完上述工作查看代码会发现评论表单即“发表新评论”已经包含了 box box-812b 两个 class 而使用 theme_box 渲染的“搜索结果”已经包含了 box box-1f1b 两个 class 这样就可以很方便的分别使用 CSS 为“发表新评论”和“搜索结果”定制外观了。

缺点:虽然没有涉及修改核心代码,并且暂时解决了问题,但这种方法并非推荐的做法,毕竟 MD5 运算需要消耗服务器资源,当然使用其他运算都是可以的如 CRC32 等等,只要输出的结果符合 class 的命名规则即可。

拓展:其实这种方法还可以用在 theme_links 函数上为每一个链接定义单独的 class 这样可以方便为每个链接定义不同的 CSS 背景图标等等。

分享到:

本文网址:http://anyLiv.com/blog/1148 转载需注明出处!
This site is licensed under a Creative Commons BY-NC-SA 3.0 License.
本站使用 创作共用版权协议 转载本站内容也必须遵循"署名-非商业性使用-相同方式共享"的共同创作协议。

发表评论:

NOTICE: You should type some Chinese Word in your comment to pass the spam-check, thanks !

小提示:请务必填写正确的邮箱地址(推荐 QQ 邮箱)以便能及时收到我的回复,另未包含中文的评论将被过滤!


谷歌广告 gAdSense


Themed by anyLiv. Copyright © 2010. Some right reserved.