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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值