跳转到主要内容
qingkong 提交于 24 November 2014

6.3  用drupal_add_css加载css(上) Load CSS with Drupal_add_css (I)

虽然在本章第一节中我们不提倡使用谷歌cdn,但是这并不影响我们学习使用drupal_add_css,因为它非常强大,而且还能帮我们实现有条件的加载样式表的需求。所以,让我们接着上一节继续学习。具体请查看官网文档,以下只举几个例子:

如果你想只在首页加载某个样式表,你可以在template.php文件中写以下代码:

function mytheme_preprocess_html(&$variables) {

  // Add a stylesheet that prints only on the homepage.

  if ($variables['is_front']) {

    drupal_add_css(path_to_theme() . '/css/homepage.css', array('weight' => CSS_THEME));

  }

}

在Seven主题中,通过下面的代码针对IE添加带有条件判断的样式表:

function seven_preprocess_html(&$variables) {

  // Add conditional CSS for IE8 and below.

  drupal_add_css(path_to_theme() . '/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));

  // Add conditional CSS for IE6.

  drupal_add_css(path_to_theme() . '/ie6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));

}

最终生成的代码如下:

<!--[if lte IE 8]>

<link type="text/css" rel="stylesheet" href="http://drupal-7/themes/seven/ie.css?l40z2j" media="all" />

<![endif]-->

<!--[if lt IE 7]>

<link type="text/css" rel="stylesheet" href="http://drupal-7/themes/seven/ie6.css?l40z2j" media="all" />

<![endif]—>

当然,你还可以使用 conditional_styles模块来为IE添加基于浏览器版本的样式表。

在bartik主题中,使用drupal_add_css为某特定内容类型添加特定样式表:

function bartik_preprocess_node(&$variables) {

if(!empty($variables['node'])) {

    if($variables['node']->type == 'my_custom_content_type')

    {

      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   

    }

  }

  // Some other code here

}

 

以下代码判断用户是否登陆,如果是登陆的注册用户则加载注册用户对应的样式表authenticated-users.css:

<?php 

function YOURTHEME_preprocess_html(&$variables) {

  // An anonymous user has a user id of zero.   匿名用户的id为0.  

  if ($user->uid > 0) { //所以当用户id大于0时,加载css

   drupal_add_css(path_to_theme() . '/css/authenticated-users.css', 

   array('group' => CSS_THEME));

 }

}

 

标签
Drupal 版本