跳转到主要内容
东方龙马 提交于 27 September 2014

在Drupal页面中添加自定义的JS和CSS是很简单的,但是在选择一个适合的方法的时候会有些凌乱。

通过本篇文章,让我们来一起总结一下在你的主题/模块中引入或者管理CSS/JS的7种方法。

1. drupal_add_css(),drupal_add_js()

这是大多数开发者最常用的方法。

优点

  • 易用,可以用在任何你想放的地方;
  • 可以插入行内CSS、JS;
  • 易于查文档;
  • 添加的文件可以缓存;
  • 支持一些条件(比如browser,media等)。

缺点

  • 能够在代码中看到,有时候并不期望如此;
  • 引入多个文件比较麻烦;
  • 如果CSS/JS名字改了就要将代码中所有地方出现的名字全部替换。

2. 在 .info 文件里引入

优点

  • 能够快速知道哪些文件被模块/主题使用到;
  • 支持更好的聚合代码;
  • 在所有的页面中使用而不需要插入到preprocess(等其他)函数里;
  • 对于主题来说这是一个标准的做法。

缺点

  • 有些地方不需要用到的CSS/JS会被一起引入;
  • 几乎不能控制何时要引入这些文件;
  • 在.info文件里不能移除或者设置weight。

3. [‘#attached’]

优点

  • 确保你的文件一直会被引入的最好方法;
  • 与CSS,JS和libraries完美运行;
  • 可以使用各种附带数据;
  • 引入多个文件很方便;
  • 对于表单是最佳选择。

缺点

  • 引入多个CSS/JS的时候需要多次追加;
  • 对文件的路径和名字有依赖。

4. drupal_add_library()

优点

  • 当你需要在不同的页面上重复使用一些样式/脚本的时候非常有用;
  • 路径和文件名字存储在一个函数里;
  • 你可以把库(libraries)放在其他项目里;
  • 引入多个文件很方便;
  • 库可以使用别的库。

缺点

  • 稍微多写点代码;
  • 会引入库的所有文件。

5. hook_css_alter(&$css), hook_js_alter(&$js)

优点

  • 允许调整元素的weight(排序);
  • 你可以删除那些在聚合前不需要的文件;
  • 易于替换文件路径(比如:通过CDN来引入jQuery);
  • 可重新配置聚合。

缺点

  • 可以在此添加文件,但不是一个好的方式;
  • 很容易乱用这里的文件。

6. drupal_add_html_head()

优点

  • 允许以不同方式引入脚本/样式;
  • 可以用在JS模板引擎。

缺点

  • 不能被聚合;
  • 比较难理解代码将被引入何处;
  • 不好的做法(Bad practice)。

7. 以html形式引入到 .tpl.php 文件或者输出

提醒:不要这么做!

希望这些方法能对你有所帮助。根据你遇到的情况来使用它们。

我们比较喜欢用drupal_add_library和['#attached']。对于表单使用附加(attached)的方式非常棒 - 我们在表单开头使用附加文件,而且这种方式易于理解而不需要滚动来查找所有代码。

如果您想了解更多信息,请发表评论,我将分享一些很酷的链接,介绍一些资源让你了解如何自定义的JS和CSS添加到Drupal的页面里。

 

本文由东方龙马翻译自:7 ways to add custom JS and CSS to a page in Drupal,转载请注明出处

 

Drupal 版本