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

评论 (写第一个评论)