drupal add css,7种在 Drupal 中添加自定义 JS 和 CSS 的方法

在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的页面里。