你在这里

利用Libraries API 向 Drupal 项目中添加JS库

主标签

原文链接利用Libraries API向Drupal项目中添加JS库 英文版作者:Garrett Dawson

译者:携剑看山

作为一个前端开发者,我经常需要为了前端的一些需求向项目中加入JavaScript库。在Drupal中,有很多种方式来完成这一任务,最近我开始注意到一个模块:Libraries API,它为Drupal开发者提供了一个稳定的方法来添加各种库。

一个Library是一组代码,通常是CSS和JS,有时候也会是一组PHP,或者一些其他什么东西。一般来说,这些库并不是为Drupal设计的。

过去,我直接把JS库加入到我的主题之中,接下来使用drupal_add_js()把JS加入到页面。这意味着这个库同主题被绑定在一起。如果我想要在模块中使用这个库,我必须要知道这个主题的名字——用drupal_get_path()。这很明显是个混蛋办法,他基本上断绝了模块化和代码复用的可能性。

另一个添加JS库的方法就是使用模块进行加载。这种方法的不足在于,JS库常需要通过Drupal UI来配置,配置能力有时会影响库的能力,同步更新也不容易保证。在多数情况下,这种方式可以使用Libraries API来实现。

使用这个库是很容易的。当然,最好是阅读一下完整的文档,不过想随便试试,只要几行代码就能搞定。

快速入门

安装Libraries API

如果你在使用Drush,那么很简单了:

$ drush dl libraries

下一步,建立一个目录sites/all/libraries。如果你没有使用Drush,那么在官方网站进行下载安装即可。

向sites/all/libraries中添加库

下载一个库,然后把他添加到sites/all/libraries目录中。例如,我在使用FlexSlider,用来在我的项目中实现幻灯片效果。要添加这个库,我下载了flexslider,然后把它加入我的drupal项目的sites/all/libraries/flexslider中。

创建一个小模块,让Libraries API了解这个库

在一个自定义模块中,使用hook_libraries_info来启用这个库。一个库被注册之后,他就可以被其他模块或主题使用了。

/**
 * Implements hook_libraries_info().
 */
function MYMODULE_libraries_info() {
  $libraries = array();
  $libraries['flexslider'] = array(
    'name' => 'FlexSlider',
    'vendor url' => 'http://flexslider.woothemes.com/',
    'download url' => 'https://github.com/woothemes/FlexSlider/zipball/master',
    'version arguments' => array(
      'file' => 'jquery.flexslider-min.js',
      // jQuery FlexSlider v2.1
      'pattern' => '/jQuery FlexSlider v(\d+\.+\d+)/',
      'lines' => 2,
    ),
    'files' => array(
      'js' => array(
        'jquery.flexslider-min.js',
      ),
    ),
  );
 
  return $libraries;
}

这个过程有个心得就是,提供一个版本参数或者实现版本回调是很有必要的。hook_libraries_info()的文档中提到,这两个都是可选的项目,不过至少要提供一个,否则该库无法被载入。如果对版本的事情不太在意,可以使用一个提神方法来实现version回调:

/**
 * Implements hook_libraries_info().
 */
function MYMODULE_libraries_info() {
  $libraries = array();
  $libraries['my_library'] = array(
    // Etc etc.
    'version callback' => 'short_circuit_version',
  );
 
  return $libraries;
}
 
/**
* Short-circuit the version argument.
*/
function short_circuit_version() { 
  return TRUE;
}

在页面中调用新引入的库

在这个例子中,我想要在一个特定的View中载入FlexSlider。所以这里我们实现一个Views的Hook。注意这里如何Hook到指定的Views:

/**
 * Implements hook_preprocess_views_view().
 */
function MYTHEME_preprocess_views_view(&$vars) {
 
  // Uncomment the lines below to see variables you can use to target a view.
  // This requires http://drupal.org/project/devel to be installed.
  // dpm($vars['view']->name, 'view name');
 
  // Hook view id specific functions.
  // This is a super neato trick.
  if (isset($vars['view']->name)) {
    $function = 'preprocess_views_view__' . $vars['view']->name;
    if (function_exists($function)) {
      $function($vars);
    }
  }
}
 
/**
 * Implements preprocess_views_view__VIEW().
 */
function preprocess_views_view__YOURHOOK(&$vars) {
  $display_id = $vars['display_id'];
  $classes = &$vars['classes_array'];
  $title_classes = &$vars['title_attributes_array']['class'];
  $content_classes = &$vars['content_attributes_array']['class'];
 
  // Uncomment the lines below to see variables you can use to target a view.
  // This requires http://drupal.org/project/devel to be installed.
  // dpm($vars['view']->name, 'view name');
 
  switch ($display_id) {
 
    // Call flexslider scripts.
    case 'page':
      libraries_load('flexslider');
      break;
  }
}

使用

现在FlexSlider已经载入,就可以在这个View中使用了:

(function ($) {
  $(window).load(function() {
 
    $('.slideshow').flexslider({
      animation: "slide",
      controlNav: false,
      namespace: 'slide-',
      selector: '.slide-list > .slide-list-item'
    });
 
  }); // end window.load
})(jQuery);

你可以看到,Libraries API提供了一种便捷的方式来进行JavaScript管理。

译者按:

这种方法还是蛮不方便的,更简单的方式就是,直接手写info文件,例如我们要载入一个jsonview的库

把json view的内容解压到all/libraries/jsonview目录中。

新建文件jsonview.libraries.info

name = Json View
machine name = jsonview
description = json view plugins for jQuery
version = 1.2.0
files[js][] = jquery.jsonview.js
files[css][] = jquery.jsonview.css

利用drush libraries-list命令,查看Libraries载入结果:

名字         状态            版本       Variants  Dependencies
 jsonview   OK            1.2.0    -         -

另附tcpdf库的libraries.info内容:

name = TCPDF for PHP
machine name = tcpdf
description = tcpdf
version = 6.0.093
files[php][] = tcpdf.php

 

Drupal 版本: 

猜你喜欢