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

评论 (写第一个评论)