跳转到主要内容

6.2 用.info文件载入css

在第四章中我们已经提到,你可以在.info文件中声明网站需要加载的样式表,这里我们来做一个更详细的介绍。

  stylesheets[all][] = css/custom.css

stylesheets后面的第一对方括号中的参数可以是:all、screen、print、projection、和媒体尺寸,第二对方括号总是留空,且不能省略。等号右边为样式表的相对路径,并且官方推荐所有的样式表都只有一级路径,如css/a.css, css/b.css, css/c.css,相反的,css/xx/a.css会导致某些模版出问题。

关于第一个参数的使用方法举例如下:

; 添加一个通用的样式表
 
stylesheets[all][] = theStyle.css
 
; 添加一个适用于屏幕和投影仪的样式表
 
stylesheets[screen, projection][] = theScreenProjectionStyle.css
 
; 添加一个适用于打印机的样式表
 
stylesheets[print][] = thePrintStyle.css
 
; 添加一个针对屏幕尺寸的样式表
 
stylesheets[screen and (max-width: 600px)][] = theStyle600.css

大部分的时候,当我们制作响应式主题的时候,都是在样式表中直接写入Media querie来控制断点,而在drupal中,你也可以用上面例子中的第四种方式。需要注意的是,两种方式你只能二选一,不要同时在样式表和.info文件中写入media querie条件,这样做会导致不可预料的问题。

在上面的例子中,当屏幕有效宽度大于600像素时,Drupal会禁用样式表theStyle600.css。当你在性能面板中开启CSS和JS聚合功能后,这个样式表会被从主样式表中分离开来,独自加载,或者和与它同条件的其它样式表一起生成另一个聚合样式表。从前一节所讲述的性能建议的角度来看,这样做会增加http请求数量。

我们在上一节中已经提到,在.info文件中引用样式表的方法有一定的局限性,会把样式表加载到所有的页面。其实这样做,还有另一个局限,就是你必须指定相对路径,无法指定一个绝对路径,这样你就无法引用外站的样式表,比如你如果要引用谷歌或者360CDN提供的样式表,就不能在.info文件中声明,对此,drupal7给出了一个方法,你可以在template.php中写一个预处理函数来进行加载:

function mytheme_preprocess_html(&$variables) {
 
        drupal_add_css('http://fonts.googleapis.com/css?family=News +Cycle', array('type' => 'external'));
 
      }