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

评论 (写第一个评论)