向节点/编辑和其他形式添加JS和CSS的正确方法


10

我正在制作一个包含很多JS的网站,我想知道应该将JS代码放在哪里。理想情况下,我希望每个模块都保留JS,而不是主题层。某些内容可能显示为块等。

但是我在缓存方面遇到了一些问题。在我的示例中,我需要将JS&CSS添加到节点编辑表单中。我使用过hook_block_view,但已缓存。因此,如果节点编辑表单中存在错误,则不会调用drupal_add_js和drupal_add_css函数。hook_node_prepare似乎也是如此。

您将在哪里输入JS&CSS层?并且即使在节点编辑表单中有错误,也有被调用的钩子吗?

Answers:


6

如果您希望将JS和CSS添加到特定的节点编辑页面(或通常以任何形式),最好的和正确的位置是hook_form_alter(),而您应该使用的属性是#after_build。

对DO的评论完全告诉您该怎么做-http://drupal.org/node/1253520#comment-4881588

希望这可以帮助 :-)


谢谢,正是我所需要的。现在得到了一个不错的表格,比他默认的表格好得多。对这样的网站的架构有什么看法?
詹斯

很高兴它起作用。在这种情况下,您应该将答案标记为“已接受答案”,这样该问题就不会出现在未回答的问题列表中,并且帮助您的人会得到“业力”。我看到你是新来的。我也是,但是我在其他StackOverflow服务上拥有更多活跃帐户,并且我喜欢这个地方。
Sumeet Pareek '02

而且哦..只要知道您需要表单上的JS CSS并尝试对站点的体系结构进行评论就等于犯罪:-p
Sumeet Pareek

好的,现在回答。
詹斯

1
@SumeetPareek我拒绝了您的回答(但没有冒犯),因为#attached几乎在任何情况下都建议使用。此外,drupal_add_js / CSS将在Drupal 8.弃用
AyeshK

6

您应该使用#attached属性来确保始终正确地将JS / CSS与另一个render元素一起加载。


我觉得这将受益于如何使用示例#attached,也许还有一些有关您要避免的问题的其他信息。
Michael Greisman 2015年

@MichaelGreisman我必须说,我不会立即在此处看到内联添加代码的价值。我提供的链接将更好地维护该链接,这是有关操作方法的官方文档。我的回答解释了什么做的,但形式的API文档是正确的位置如何
Letharion

3

我感到这些答案和评论非常需要示例代码,尤其是@AyeshK和@Letharion的示例代码。此评论太长,请原谅。如果对您有用,请对Sumeet或Letharion的答案进行投票。另外,以下示例显然添加了CSS,但添加JavaScript几乎相同。

使用@Sumeet的答案,但使用#attached属性而不是drupal_add_css,则如下所示:

/* Implements hook_form_FORM_ID_alter() */
function MY_MODULE_form_MY_FORM_ID_alter(&$form, &$form_state, $form_id) {
  $form['#after_build'][] = 'MY_MODULE_some_function_name_after_build';
}

function MY_MODULE_some_function_name_after_build($form, &$form_state) {
  $style_path = drupal_get_path('module','MY_MODULE') . '/css/my_css.css';
  // drupal_add_css('file', $style_path);
  $form['#attached']['css'][] = $style_path;
  return $form;
}

最后,drupal_add_css可以在这篇文章中找到弃用的内容。对于许多对drupal_add_xxx来说工作正常的人来说,这可能是个新闻,对我而言。


#after_build我所知,这是胡说八道,应将其删除。(在提供#after_build解决方案的答案上也有类似的评论)我认为这本身就解释了为什么我的简短答案很好。如果简单地看一下我提供的链接,您会找到相同的代码,但是没有不必要的地方。
Letharion 2015年

0

对于Drupal 8,我建议您阅读这篇文章

library.yml

something: 
  version: VERSION
  js: 
    js/something.js: {}
  dependencies: 
    - core/jquery

。模块

function MODULE_page_attachments(array &$page) {
  $page['#attached']['library'][] = MODULE/something;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.