Drupal - 如何将简单的 jQuery 和 jQuery UI 添加到 head 标签？

【问题标题】：Drupal - How to add simple jQuery and jQuery UI to head tag?Drupal - 如何将简单的 jQuery 和 jQuery UI 添加到 head 标签？
【发布时间】：2014-01-01 05:35:17
【问题描述】：

就个人而言，我不喜欢使用 jQuery Update 模块，1. 似乎有很多不必要的开销，以及 2. 它只允许更新到 jQuery 1.8，这是旧的，个人这个模块需要自己更新如果你问我！

所以在加载任何其他 js 文件之前，我需要在 Drupal 7 中将以下 URL 添加到我的 head 标签中。

Google CDN jQuery 网址：//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Google CDN jQuery UI 网址：//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

我尝试将它放入 theme.info 文件，但它来自 CDN，所以这不起作用，因为 theme.info 中的 js 链接到主题为根的相对路径.

那么，在 Drupal 7 的正常情况下，如何将它添加到任何其他脚本之前的 head 标记中？

我已进行了推荐的编辑，但由于某种原因，该主题的 CSS 文件不再加载。我在这里使用媒体响应主题：https://drupal.org/project/media-responsive-theme

这是我的 theme.php 文件的样子：

<?php
/**
 * Implements hook_html_head_alter().
 * This will overwrite the default meta character type tag with HTML5 version.
 */
function media_responsive_theme_html_head_alter(&$head_elements) {
  $head_elements['system_meta_content_type']['#attributes'] = array(
    'charset' => 'utf-8'
  );
}

/**
 * Insert themed breadcrumb page navigation at top of the node content.
 */
function media_responsive_theme_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];
  if (!empty($breadcrumb)) {
    // Use CSS to hide titile .element-invisible.
    $output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';
    // comment below line to hide current page to breadcrumb
    $breadcrumb[] = drupal_get_title();
    $output .= '<nav class="breadcrumb">' . implode(' » ', $breadcrumb) . '</nav>';
    return $output;
  }
}

/**
 * Override or insert variables into the page template.
 */
function media_responsive_theme_preprocess_page(&$vars) {

    $html5jqueryui = array(
        '#tag' => 'script',
        '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
        ),
        '#prefix' => '',
        '#suffix' => '',
    );

    drupal_add_html_head($html5jqueryui, 'html5jqueryui');

    $html5jquery = array(
        '#tag' => 'script',
        '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
        ),
        '#prefix' => '',
        '#suffix' => '',
    );

    drupal_add_html_head($html5jquery, 'html5jquery');


  if (isset($vars['main_menu'])) {
    $vars['main_menu'] = theme('links__system_main_menu', array(
      'links' => $vars['main_menu'],
      'attributes' => array(
        'class' => array('links', 'main-menu', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Main menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      )
    ));
  }
  else {
    $vars['main_menu'] = FALSE;
  }
  if (isset($vars['secondary_menu'])) {
    $vars['secondary_menu'] = theme('links__system_secondary_menu', array(
      'links' => $vars['secondary_menu'],
      'attributes' => array(
        'class' => array('links', 'secondary-menu', 'clearfix'),
      ),
      'heading' => array(
        'text' => t('Secondary menu'),
        'level' => 'h2',
        'class' => array('element-invisible'),
      )
    ));
  }
  else {
    $vars['secondary_menu'] = FALSE;
  }
}

function media_responsive_theme_js_alter(&$js) {
    // var_dump($js);
    unset($js['misc/jquery.once.js']);
    unset($js['misc/jquery.js']);
    unset($js['misc/ui/jquery.ui.core.min.js']);
}

/**
 * Duplicate of theme_menu_local_tasks() but adds clearfix to tabs.
 */
function media_responsive_theme_menu_local_tasks(&$variables) {
  $output = '';

  if (!empty($variables['primary'])) {
    $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>';
    $variables['primary']['#prefix'] .= '<ul class="tabs primary clearfix">';
    $variables['primary']['#suffix'] = '</ul>';
    $output .= drupal_render($variables['primary']);
  }
  if (!empty($variables['secondary'])) {
    $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>';
    $variables['secondary']['#prefix'] .= '<ul class="tabs secondary clearfix">';
    $variables['secondary']['#suffix'] = '</ul>';
    $output .= drupal_render($variables['secondary']);
  }
  return $output;
}

/**
 * Override or insert variables into the node template.
 */
function media_responsive_theme_preprocess_node(&$variables) {
  $node = $variables['node'];
  if ($variables['view_mode'] == 'full' && node_is_page($variables['node'])) {
    $variables['classes_array'][] = 'node-full';
  }
}

function media_responsive_theme_page_alter($page) {
  // <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  $viewport = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
    'name' =>  'viewport',
    'content' =>  'width=device-width'
    )
  );
  drupal_add_html_head($viewport, 'viewport');
}

在页面头部的实际来源中，现在看起来像这样：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<link rel="shortcut icon" href="http://localhost:8082/sites/all/themes/media-responsive-theme/favicon.ico" type="image/vnd.microsoft.icon" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" />
<meta name="viewport" content="width=device-width" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<link rel="alternate" type="application/rss+xml" title="site RSS" href="http://localhost:8082/rss.xml" />
<title>Testing Site | Just a test site</title>
<style type="text/css" media="all">@import url("http://localhost:8082/modules/system/system.base.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.menus.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.messages.css?myw3hn");
@import url("http://localhost:8082/modules/system/system.theme.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/modules/comment/comment.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_api/date.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_popup/themes/datepicker.1.7.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/date/date_repeat_field/date_repeat_field.css?myw3hn");
@import url("http://localhost:8082/modules/field/theme/field.css?myw3hn");
@import url("http://localhost:8082/modules/node/node.css?myw3hn");
@import url("http://localhost:8082/modules/search/search.css?myw3hn");
@import url("http://localhost:8082/modules/user/user.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_example/css/views_slideshow_xtra_example.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_overlay/css/views_slideshow_xtra_overlay.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views/css/views.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/all/modules/admin_menu_dropdown/admin_menu_dropdown.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/ckeditor/ckeditor.css?myw3hn");
@import url("http://localhost:8082/profiles/acquia/modules/ctools/css/ctools.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/jquery.fancybox.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-thumbs.css?myw3hn");
@import url("http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-buttons.css?myw3hn");
@import url("http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/all/themes/media-responsive-theme/style.css?myw3hn");
@import url("http://localhost:8082/sites/all/themes/media-responsive-theme/media.css?myw3hn");</style>
<style type="text/css" media="all">@import url("http://localhost:8082/sites/default/files/fontyourface/font.css?myw3hn");</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alegreya:900&amp;subset=latin" media="all" />
<script type="text/javascript" src="http://localhost:8082/misc/drupal.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra_overlay/js/views_slideshow_xtra_overlay.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb_connect.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fb/fb_stream.js?myw3hn"></script>
<script type="text/javascript" defer="defer" src="http://localhost:8082/sites/all/modules/admin_menu_dropdown/admin_menu_dropdown.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/fancybox/fancybox.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/jquery.fancybox.pack.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/lib/jquery.mousewheel-3.0.6.pack.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-thumbs.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-media.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/fancybox/source/helpers/jquery.fancybox-buttons.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/views_slideshow_xtra/views_slideshow_xtra.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/libraries/masonry/jquery.masonry.min.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/masonry/masonry.js?myw3hn"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/modules/google_analytics/googleanalytics.js?myw3hn"></script>
<script type="text/javascript" src="//use.edgefonts.net/alegreya:n7.js"></script>
<script type="text/javascript" src="http://localhost:8082/sites/all/themes/media-responsive-theme/js/custom.js?myw3hn"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"media_responsive_theme","theme_token":"GE9M-bDBXcKzDxK1W8lZM9a-OjlA00XIZ6zA3sYZHCw","js":{"misc\/drupal.js":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_overlay\/js\/views_slideshow_xtra_overlay.js":1,"sites\/all\/modules\/fb\/fb.js":1,"sites\/all\/modules\/fb\/fb_connect.js":1,"sites\/all\/modules\/fb\/fb_stream.js":1,"sites\/all\/modules\/admin_menu_dropdown\/admin_menu_dropdown.js":1,"sites\/all\/modules\/fancybox\/fancybox.js":1,"sites\/all\/libraries\/fancybox\/source\/jquery.fancybox.pack.js":1,"sites\/all\/libraries\/fancybox\/lib\/jquery.mousewheel-3.0.6.pack.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-media.js":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-buttons.js":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra.js":1,"sites\/all\/libraries\/masonry\/jquery.masonry.min.js":1,"sites\/all\/modules\/masonry\/masonry.js":1,"sites\/all\/modules\/google_analytics\/googleanalytics.js":1,"0":1,"\/\/use.edgefonts.net\/alegreya:n7.js":1,"sites\/all\/themes\/media-responsive-theme\/js\/custom.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"sites\/all\/modules\/date\/date_api\/date.css":1,"sites\/all\/modules\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/date\/date_repeat_field\/date_repeat_field.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_example\/css\/views_slideshow_xtra_example.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra_overlay\/css\/views_slideshow_xtra_overlay.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/admin_menu_dropdown\/admin_menu_dropdown.css":1,"sites\/all\/modules\/ckeditor\/ckeditor.css":1,"profiles\/acquia\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/libraries\/fancybox\/source\/jquery.fancybox.css":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.css":1,"sites\/all\/libraries\/fancybox\/source\/helpers\/jquery.fancybox-buttons.css":1,"sites\/all\/modules\/views_slideshow_xtra\/views_slideshow_xtra.css":1,"sites\/all\/themes\/media-responsive-theme\/style.css":1,"sites\/all\/themes\/media-responsive-theme\/media.css":1,"sites\/default\/files\/fontyourface\/font.css":1,"http:\/\/fonts.googleapis.com\/css?family=Alegreya:900\u0026subset=latin":1}},"fb_connect":{"front_url":"\/","fbu":null,"uid":0},"fb_devel":{"session_id":"T4ElbmGjm-bpoAuSJrtnz6i9T7QvI7ukMr8LT2ZY49Q","session_name":"SESSbce8863eabfd478fab0d5a5077b9e512"},"admin_menu_dropdown":{"key":"`","default":0},"fancybox":{"helpers":{"thumbs":{"width":50,"height":50,"position":"bottom"},"media":[],"buttons":{"position":"top"}}},"masonry":{".view-packages.view-display-id-block .view-content":{"item_selector":".masonry-item","column_width":290,"column_width_units":"px","gutter_width":10,"resizable":true,"animated":true,"animation_duration":500,"fit_width":true,"rtl":false,"images_first":true}},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip"}});
//--><!]]>
</script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

我认为可能是 jquery 调用得太早了，或者 $js 中还有其他变量需要取消设置？

当我在 Chrome 中查看错误时填充的 JS 错误列表如下：

Uncaught ReferenceError: Drupal is not defined views_slideshow_xtra_overlay.js:6
Uncaught ReferenceError: Drupal is not defined fb.js?myw3hn:25
Uncaught ReferenceError: Drupal is not defined fb_connect.js:17
Uncaught ReferenceError: Drupal is not defined fancybox.js:7
Uncaught ReferenceError: Drupal is not defined views_slideshow_xtra.js:6
Uncaught ReferenceError: Drupal is not defined masonry.js:8
Uncaught ReferenceError: Drupal is not defined localhost/:1372
Uncaught ReferenceError: Drupal is not defined localhost/:1535
Uncaught ReferenceError: Drupal is not defined admin_menu_dropdown.js:3

基本上，“未定义 Drupal”。如何定义？

【问题讨论】：

    标签： jquery jquery-ui drupal-7


    【解决方案1】： 
    Add the following function in your theme template.php file.

function YOURTHEMENAME_preprocess_html(&$vars) {

   $html5jquery = array(
      '#tag' => 'script',
      '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
      ),
      '#prefix' => '',
      '#suffix' => '',
      );
   drupal_add_html_head($html5jquery, 'html5jquery');

   $html5jqueryui = array(
      '#tag' => 'script',
      '#attributes' => array( // Set up an array of attributes inside the tag
        'src' => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
      ),
      '#prefix' => '',
      '#suffix' => '',
      );
   drupal_add_html_head($html5jqueryui, 'html5jqueryui');



}

    【讨论】：

    • 对不起，没有错误或任何东西，但这根本不起作用。刷新了缓存，它甚至根本没有将它添加到 head 标签中。
    • 我确实把YOURTHEMENAME改成了主题文件夹的正确名称。
    • 另外，我在其中的其他函数使用$variables 而不是$vars 作为参数，但是进行此更改也无济于事，而且我注意到$vars 永远不会添加任何数组它。它不需要添加一些东西吗？所有其他函数都使用$variables 并使用数组为其添加一个键，但这个函数不这样做......不应该吗？
    • 是的，你可以使用函数 YOURTHEMENAME_js_alter(&$js) { unset($js['misc/jquery.js']); } ... 在你的 TEMPLATE.PHP 中
    • 天啊，这不起作用，因为它将标签更改为 SELF-CLOSING 和 JS Self Closing 标签会混淆浏览器解析器并且不好！添加到页面时，我需要像所有其他 JS 一样分别有一个开始和结束标记。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode