Drupal - 如何将简单的 jQuery 和 jQuery UI 添加到 head 标签? [英] Drupal - How to add simple jQuery and jQuery UI to head tag?

问题描述

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

Personally, I don't like using jQuery Update module, 1. Seems like a lot of unnecessary overhead, and 2. It only allows to update up to jQuery 1.8, which is old and personally this module needs to be updated itself if you ask me!

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

So I need to add the following URLS to my head tag in Drupal 7, before any other js files get loaded.

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

Google CDN jQuery URL: //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

Google CDN jQuery UI URL: //ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

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

I've tried putting this into the theme.info file, but it is coming from a CDN, so this won't work, since the js in theme.info links to a relative path there where the theme is the root.

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

So, how do I add this into the head tag before any of the other scripts under normal conditions in Drupal 7?

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

I have made the recommended edits and for some reason the CSS file is no longer loading for that theme. I am using the media responsive theme here: https://drupal.org/project/media-responsive-theme

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

Here is what my theme.php file looks like:

<?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');
}

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

In the actual source for the head of the page, it looks like this now:

<!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:900u0026subset=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 中还有其他变量需要取消设置?

I think maybe the jquery is being called too early, or there are other variables to unset within $js?

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

The list of JS errors that populates when I view errors in Chrome is as follows:

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".如何定义?

Basically, "Drupal is not defined". How to define it?

推荐答案

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');



}

这篇关于Drupal - 如何将简单的 jQuery 和 jQuery UI 添加到 head 标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！