6.3 用drupal_add_css加载css(上)

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

如果你想只在首页加载某个样式表,你可以在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(link is external)模块来为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 &gt; 0) { //所以当用户id大于0时,加载css
 
   drupal_add_css(path_to_theme() . '/css/authenticated-users.css', 
 
   array('group' =&gt; CSS_THEME));
 
 }
 
}

 

本书共55小节。


评论 (0)