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

评论 (写第一个评论)