it-swarm-ko.tech

관리 페이지에 JavaScript 파일 추가

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

17
Onita

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

첫 번째 방법을 사용하면 관리 페이지에 추가 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와 같은 일부 노드 관련 경로는 관리/모양에있는 설정에 따라 관리 섹션에 포함될 수 있습니다.

screenshot

관리 페이지에 포함될 수있는 노드 경로 목록은 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'), 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에서 사용되지 않습니다.
JavaScript 라이브러리 사용에 대해 내가 말한 것은 #attached 를 사용하여 라이브러리 (또는 Javascript 파일 또는 CSS를 첨부하는 것이 좋습니다)에도 불구하고 여전히 유효합니다 파일)을 페이지에 추가하십시오. Drupal 8 더 이상 페이지에 JavaScript 또는 CSS 파일 만 첨부 할 수 없습니다. 항상 JavaScript 또는 CSS 파일로 구성된 라이브러리를 첨부해야합니다. CSS 파일.

25
kiamlaluno

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

템플릿 파일은 PHP 파일이므로 arg () 그리고 그에 따라 제시.

또는 테마에 독립적이므로 더 나은 hook_init () 를 구현하는 모듈을 만들고 drupal_add_js () 또는 drupal_add_css () 기반으로 current_path () .

다음 코드와 같은 것이 작동합니다.

// 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');
  }
}
3
Jason Smith

hook_init()에서 JS와 CSS를 추가하는 것은 나쁜 습관으로 간주됩니다. 대신 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');
  }
}
1
leymannx

나는 방금 프런트 엔드 개발자에게 호소 할 수있는 다른 방법을 사용했습니다. Subtheme 원하는 관리자 테마를 입력 한 후 간단한 추가 :

scripts[] = myscripts.js

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

1
Screenack

여기에 설명 된 단계를 사용하여 모듈을 작성했습니다. 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이 노드 편집 및 기타 페이지에로드되지 않았습니다.

1
Valross.nu