文心博客

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