9.3 向组件添加 Javascript/CSS/库

Drupal 7 龬龨龥龡龠龝龜龘龕龓龬龐 #attached 齼龓齻齹齸 JavaScript 齬 CSS 齧齥齡齝齙齖齔龠龝 drupal_add_jsdrupal_add_css drupal_add_library 齧Drupal 8 齂齁鼾 #attached 齧鼺鼹鼷鼶龥龡鼳鼺鼲龐 JavaScript 齌 CSS 鼰鼯鼭鼬鼨鼧龨鼥鼤鼣齸鼟龜龘龕龓齧

创建一个库

鼝鼙龐 libraries.yml 鼏齻鼳鼌龜龘鼊鼇鼺鼄鼂龐 CSS 齌 JavaScript 鼰鼯鼭鼧齧黾鼨鼏齻黻鼰黺鼧黶黴鼨龓齻龐黳黰齧

黭黪黧黤黡黝 theme_example.libraries.yml 默黔齧鼶黾鼨默黔黶龨黐黎齂鼰鼯黺鼬鼨鼧 sample-library齧黋黈黇 JavaScript 齌 CSS龨齔黆黂黁鼨麾麼鼧齧Drupal 7 龬龨黐黎麸鼰 jQuery ,jQuery.once 齌 settings 黝鼲麫龐齧Drupal 8 龨鼌麨麦鼳黾麤鼰鼯鼭黆黂龨麠鼭麞麚黋黎麖麔麑齸麎齧

黾麍鼨 CSS 默黔麉鼹鼶鼧黶龠龝麆

myElement {
  border: 3px solid purple;
  border-radius: 3px;
  padding: 1em;
  margin: 1em;
  background-color: #EEE;
}

.myElement .randomNumber {
  color: purple;
  font-weight: bold;
  font-size: 1.2em;
}

sample_library:
  css:
    # For some reason, you need to put css under 'theme'.
    theme:
      css/example.css: {}
  js:
    # For some reason, you need to put the js directly under 'js'.
    js/example.js: {}
  dependencies:
    # jQuery is not included by default, so we add it as a dependency
    - core/jquery
    # We are also going to use jQuery.once so that code doesn't trigger multiple times.
    - core/jquery.once
    # drupal and drupalSettings are not included by default either.
    - core/drupal

向组件附加库

黐黎鹢鹠鼲黺鼧龨鼷鼶麉鼹鼶龜龘龕龓黧鹝龝黺齧

$output = [
  '#markup' => '<div>hello world</div>',
  '#attached => [
    'library' => [
      'theme_example/sample_library',
    ],
  ],
];




黐黎齔麉鼹鼰鼯鼬鼨鹀鸽鸼 JavaScript 龐鸻黰齧

$output = [
  '#markup' => '<div>hello world</div>',
  '#attached => [
    // This setting will be sent to drupalSettings.sampleLibrary.mySetting.
    'drupalSettings' => [
      'sampleLibrary' => [
        'mySetting' => 'hello world',
      ],
    ],
  ],
];

更新插件 #pre_render 函数:

/**
 * Prepare the render array for the template.
 */
public static function preRenderMyElement($element) {
  // Create a link render array using our #label.
  $element['link'] = [
    '#type' => 'link',
    '#title' => $element['#label'],
    '#url' => Url::fromUri('http://www.drupal.org'),
  ];

  // Create a description render array using #description.
  $element['description'] = [
    '#markup' => $element['#description']
  ];

  $element['pre_render_addition'] = [
    '#markup' => 'Additional text.'
  ];

  // Create a variable.
  $element['#random_number'] = rand(0,100);

  // Add the library
  $element['#attached'] = [
    'library' => [
      'theme_example/sample_library',
    ],
    'drupalSettings' => [
      'sampleLibrary' => [
        'mySetting' => 'hello world',
      ],
    ],
  ];

  return $element;
}

Drupal 8 中的 JavaScript 模式

JavaScript 龐鸴鸳鸱鸰鸭 Drupal 7 鸫鸧齧黐黎鼳 jQuery 鸣鸢黈鸞鼶鼬鼨鸜黈黧龨鼳鸘龕鼣齸鼶 Drupal.behaviors 鸗齧鸓鼂龐鸒鸑黝麆鸻黰鸒鸎鼷鼶黝 drupalSettings 齧

(function ($) {
  Drupal.behaviors.themeExample = {
    attach: function (context, settings) {
      // jQuery once ensures that code does not run after an AJAX or other function that calls Drupal.attachBehaviors().
      $('body').once('themeExample').each(function () {
        // We have console.log() here to make it easy to see that this code is functioning. You should never use console.log() on production code!
        if (typeof console.log === 'function') {
          console.log('My Setting: ' + settings.sampleLibrary.mySetting);
        }
      });
      if (typeof console.log === 'function') {
        console.log('This will run every time Drupal.attachBehaviors is run.');
      }
      $('body').once('themeExampleModifyDOM').each(function () {
        // Add an element to the body.
        $('body').append('<div>Hello World</div>');
        // Tell Drupal that we modified the DOM.
        Drupal.attachBehaviors();
      });
    }
  };
})(jQuery);

测试库是否工作

鸊鸆鼟鸃鷿 /examples/theme-example/simple龨龠龝 Chrome 齬 FireFox 鷺鷶鷳鷰鷬齧鼌麔鷶鼟 JavaScript 鼧鷪鷩龐鷦鷣齧

鼏齻

黾鼨鷢鷡黶鷟鷞鼲黾麤鼏齻麆

  • theme_example.info.yml
  • theme_example.routing.yml
  • theme_example.libraries.yml
  • theme_example.module
  • cs/example.css
  • js/example.js
  • src/Element/MyElement.php
  • src/Controller/ThemeExampleController.php
  • templates/my-element.html.twig

评论 (写第一个评论)