관리 페이지에 JavaScript 파일 추가

모듈을 사용하여 모든 관리 페이지에서 JavaScript / CSS 파일을 어떻게 추가합니까?

모듈을 사용하면 두 가지 방법을 수행 할 수 있습니다.

• hook_init () 구현
• hook_form_alter () 구현

첫 번째 방법을 사용하면 관리 페이지에 추가 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"을 짧은 모듈 이름으로 바꾸십시오. "mymodule.js"및 "mymodule.css"를 JavaScript 및 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관리 / 모양에있는 설정에 따라 와 같은 일부 노드 관련 경로 가 관리 섹션에 포함될 수 있습니다.

관리 페이지에 포함될 수있는 노드 경로 목록은 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(), 그리고 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'), 기타 / collapse.js 및 기타를 / 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()사용 드루팔 드루팔 제 8 대안에서 더 이상 사용되지 않고 hook_form_alter(), hook_page_attachments()또는 hook_page_attachements_alter(). hook_page_build()그리고 hook_page_alter()더 이상 드루팔 (8)에서 사용되지
는 사용하도록 제안하더라도 내가 자바 스크립트 라이브러리를 사용에 대해 말한 것은 여전히 사실이다 #attached페이지에 라이브러리 (또는 자바 스크립트 파일 또는 CSS 파일)를 첨부 할 수 있습니다. Drupal 8에서는 더 이상 JavaScript 또는 CSS 파일 만 페이지에 첨부 할 수 없습니다. 항상 JavaScript 또는 CSS 파일로 구성된 라이브러리 인 JavaScript 및 CSS 파일 세트를 첨부해야합니다.

다음은 페이지에 JS / CSS를 추가하는 두 가지 방법입니다.

템플릿 파일은 PHP 파일이므로 JavaScript 및 CSS를 템플릿 파일 page.tpl.php에 직접 추가 할 수 있습니다 . arg ()를 사용하여 URL을 확인하고 적절하게 표시 할 수 있습니다 .

또는 테마에 독립적이므로 hook_init () 를 구현하는 모듈을 작성하고 current_path () 에 따라 drupal_add_js () 또는 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');
  }
}

여기에 설명 된 단계를 사용하여 모듈을 작성했습니다. 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));
    }
}

여기서 대답과 다른 점은 경로가 arg 를 사용하는 대신 path_is_admin 을 사용하여 사이트의 관리 부분에 있는지 확인하는 것입니다 . arg를 사용하면 css-file이 노드 편집 및 기타 페이지에로드되지 않았습니다.

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

나는 방금 프론트 엔드 개발자에게 호소 할 수있는 다른 방법을 사용했습니다. 원하는 관리자 테마를 서브 테마 한 다음 간단한 것을 추가하십시오.

scripts[] = myscripts.js

관리자 페이지에 필요한 자바 스크립트가 포함 된 theme.info 파일에 추가하십시오. 원하는 경우 즐겨 찾기 관리 테마의 리소스를 상속하므로 재정의를 더 추가 할 수 있습니다.