将JavaScript文件添加到管理页面

18

如何使用模块在每个管理页面中添加JavaScript / CSS文件？

7  javascript  theming 
— 鬼田
source

Answers:

25

使用模块，可以遵循两种方法：

第一种方法将允许您将额外的JavaScript（或CSS）文件添加到任何管理页面，而第二种方法将允许您仅将这些文件添加到包含表单的页面。

function mymodule_init() {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');
    drupal_add_js($path . '/mymodule.js');
    drupal_add_css($path . '/mymodule.css');
  }
}
function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');  
    $form['#attached']['css'][] = $path . '/mymodule.css';
    $form['#attached']['js'][] = $path . '/mymodule.js';
  }
}

将“ mymodule”替换为模块的简称；用JavaScript和CSS文件的实际名称替换“ mymodule.js”和“ mymodule.css”。

system_init（）包含以下代码，用于将特定文件添加到管理页面。

  $path = drupal_get_path('module', 'system');
  // Add the CSS for this module. These aren't in system.info, because they
  // need to be in the CSS_SYSTEM group rather than the CSS_DEFAULT group.
  drupal_add_css($path . '/system.base.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

  // Add the system.admin.css file to the administrative pages.
  if (path_is_admin(current_path())) {
    drupal_add_css($path . '/system.admin.css', array('group' => CSS_SYSTEM));
  }

  drupal_add_css($path . '/system.menus.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.messages.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.theme.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

path_is_admin（）是在其文档中描述为的函数：

确定路径是否在站点的管理部分中。

请注意node/<nid>/edit，取决于admin / appearance上的设置，某些与节点相关的路径（例如）可以包含在管理部分中。

屏幕截图

管理页面中可能包含的节点路径列表是从node_admin_paths（）返回的。

  if (variable_get('node_admin_theme')) {
    $paths = array(
      'node/*/edit' => TRUE, 
      'node/*/delete' => TRUE, 
      'node/*/revisions' => TRUE, 
      'node/*/revisions/*/revert' => TRUE, 
      'node/*/revisions/*/delete' => TRUE, 
      'node/add' => TRUE, 
      'node/add/*' => TRUE,
    );
    return $paths;

如果出于某种原因需要避免使用路径类似于node / *的任何页面，那么如果使用，则需要添加特定的代码来避免这些情况path_is_admin()。考虑到任何模块都可以更改被视为管理页面一部分的页面。

在这两种情况下，如果模块使用与以下代码相似的代码实现hooks_library（），则可以选择使用库。

function mymodule_library() {
  $path = drupal_get_path('module', 'mymodule');

  $libraries['mymodule.library'] = array(
    'title' => 'MyModule Library', 
    'version' => '1.0', 
    'js' => array(
      $path . '/mymodule.js' => array(),
    ), 
    'css' => array(
      $path . '/mymodule.css' => array(
        'type' => 'file', 
        'media' => 'screen',
      ),
    ),
  );

  return $libraries;
}

在这种情况下，的先前实现hook_form_alter()将变为以下实现。

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $form['#attached']['library'][] = array('mymodule', 'mymodule.library');
  }
}

而不是调用drupal_add_js()and drupal_add_css()，代码应调用drupal_add_library('mymodule', 'mymodule.library')。

使用的优点hook_library()是：

  • 库之间的依赖关系是自动处理的。这就是system_library（）的情况，它使用以下定义定义了两个库。

      // Drupal's form library.
  $libraries['drupal.form'] = array(
    'title' => 'Drupal form library', 
    'version' => VERSION, 
    'js' => array(
      'misc/form.js' => array(
        'group' => JS_LIBRARY,
        'weight' => 1,
      ),
    ),
  );

  // Drupal's collapsible fieldset.
  $libraries['drupal.collapse'] = array(
    'title' => 'Drupal collapsible fieldset', 
    'version' => VERSION, 
    'js' => array(
      'misc/collapse.js' => array('group' => JS_DEFAULT),
    ), 
    'dependencies' => array(
      // collapse.js relies on drupalGetSummary in form.js
      array('system', 'drupal.form'),
    ),
  );

    调用drupal_add_library('system', 'drupal.collapse')，misc / collapse.js和misc / form.js都将包括在内。

  • 与库关联的CSS文件将自动与JavaScript文件一起加载。

  • 只要该库使用更多的JavaScript或CSS文件，包含该库的代码就不会更改；它仍将使用$form['#attached']['library'][] = array('mymodule', 'mymodule.library');或drupal_add_library('mymodule', 'mymodule.library')。

 

可以使用arg（）时，无需使用current_path （）。如果当前页面的路径是admin / structure / block，则

  • arg(0) 将返回 "admin"
  • arg(1) 将返回 "structure"
  • arg(2) 将返回 "block"

更新资料

hook_init()不再被从Drupal的8为Drupal 8所述的方法是使用用于hook_form_alter()，hook_page_attachments()或hook_page_attachements_alter()。hook_page_build()并且 hook_page_alter()不再在Drupal 8中
使用。即使使用建议#attached将JavaScript库（或Javascript文件或CSS文件）附加到页面上，我所说的使用JavaScript库的说法仍然正确。Drupal 8不再允许仅将JavaScript或CSS文件附加到页面。您需要始终附加一个库，该库包含一组JavaScript和CSS文件，最终仅由JavaScript或CSS文件组成。

— kiamlaluno
source
如果我想在drupal中访问“ user_access（'访问管理页面'）”，请在每个页面上添加该怎么办？
— confiq 2012年
1
替换arg(0) == 'admin'为user_access('access administration pages')。
— kiamlaluno
4
该功能是检查当前页面是否为管理页面的正确方法path_is_admin。某些管理页面的路径不是以“ admin”开头。例如，取决于配置，node/add/<content-type>页面可以是配置页面。
— Pierre Buyle 2012年
很棒的帖子，超级彻底，非常感谢您真的覆盖了这一篇文章，非常有帮助并且赞赏。
— DrCord
Pierre Buyle的评论非常非常有用！
— Moshe Shaham 2014年
3

这是将JS / CSS添加到页面的两种方法。

您可以将JavaScript和CSS直接添加到模板文件page.tpl.php中，因为模板文件是PHP文件，因此可以使用arg（）检查URL 并进行相应显示。

另外，由于它是独立于主题的，并且更好，因为它创建了一个实现hook_init（）的模块，并调用drupal_add_js（）或基于current_path（） drupal_add_css （）。

类似于以下代码的东西将起作用。 

// Runs on every page load.
function mymodule_init() {
  // Check if current path is under "admin"
  if (substr(current_path(), 0, 5) == 'admin') {
    drupal_add_css('path/to/my/css');
    drupal_add_js('path/to/my/js');
  }
}
— 杰森·史密斯
source
1

我使用此处描述的步骤创建了一个模块：http : //purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

复制该页面上描述的模块文本：

    function mymodule_preprocess_html(&$variables) {
// Add conditional stylesheets for admin pages on admin theme.
  if (arg(0)=="admin") {
    // reference your current admin theme  
    $theme_path = drupal_get_path('theme', 'commerce_kickstart_admin');
    // reference your own stylesheet    
    drupal_add_css(drupal_get_path('module', 'mymodule') . '/css/mymodule.css', array('weight' => CSS_THEME));
  }
}

但是，当我（作为其中之一）想要在所有页面以及节点编辑表单中设置提交按钮样式时，管理员检查是错误的。由于该路径转到节点/编辑而不是管理员，因此检查使我数小时无法自拔。

所以我想出了这个版本来制作我的简单模块admin_css。

admin_css.info

name = admin_css
description = Custom css alterations for editor interface
core = 7.x
version = 7.x-1.01

admin_css.module

function admin_css_preprocess_html(&$variables) {
    if (path_is_admin) {
        $theme_path = drupal_get_path('theme', 'seven');
        drupal_add_css(drupal_get_path('module', 'admin_css') . '/css/admin_css.css', array('weight' => 0));
    }
}

与此处的答案不同的是，使用path_is_admin而不是使用arg来检查路径是否在站点的管理部分中。使用arg导致我的css文件未加载到节点编辑页面和其他页面上。

— Valross.nu
source
1

从中添加JS和CSS被认为是不好的做法hook_init()。相反，您将使用hook_page_build()：

/**
 * Implements hook_page_build().
 */
function MYMODULE_page_build(&$page) {

  if (path_is_admin(current_path())) {

    drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/scripts/magic.js');
  }
}
— 莱曼克斯
source
1

我只是使用了另一种可能吸引前端开发人员的方法。子主题您首选的管理主题，然后添加一个简单的：

scripts[] = myscripts.js

到您的theme.info文件，其中包含管理页面所需的javascript。如果愿意，您可以添加更多替代，因为这将继承您喜欢的管理主题的资源。

— Screenack
source
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.