如何通过钩子调试添加库？

Question

我试图通过钩子在主题中附加简单的css，但它不起作用？在我看来密码是正确的。它不附着。我做错什么了？

global-styling:
  version: 8.x
  header: true
  css:
    base:
      css/main.css: 

  js:
    js/main.min.js: {}
    js/scrollreveal.js: {attributes: { defer: true} }
    src/js/vendor/picturefill/picturefill.min.js: {attributes: { defer: true} }
    js/custom.js: {attributes: { defer: true, async: true} }
    js/tp.widget.bootstrap.min.js: {attributes: { defer: true} }
    js/js.cookie.min.js: {attributes: { defer: true} }
    js/api.js: {attributes: { defer: true} }

  dependencies:
    - core/drupal
    - core/jquery

content-styling:
  css:
    base:
      css/content.css: {}

carousel-styling:
  css:
    base:
      css/carousel.css: {}

只有在显示对段落的实体引用时，我才试图附加css/content.css。只有在显示某个段落类型(滑块)时，我才试图附加css/carousel.css

function porto_sub_preprocess_field(array &$variables, $hook) {

  if(  $variables['element']['#entity_type'] == 'paragraph' ) {
     \Drupal::logger('my_module')->notice('content should be');
        // tried both these on all
        $variables['element']['#attached']['library'][] = 'porto_sub/content-styling';
        $variables['#attached']['library'][] = 'porto_sub/content-styling';
  } 
}

function porto_sub_preprocess_paragraph(&$variables) {
  $paragraph = $variables['paragraph'];
  if($paragraph->getParentEntity()->bundle()=='slider') {
    \Drupal::logger('my_module')->notice('carousel should be');
    $variables['element']['#attached']['library'][] = 'porto_sub/carousel-styling';

  }
}

然后我就什么都不做了

function porto_sub_page_attachments(array &$attachments) {
      $attachments['#attached']['library'][] = 'porto_sub/content-styling';
    $attachments['#attached']['library'][] = 'porto_sub/carousel-styling';

X}

有什么方法可以调试吗？我不知道这是怎么回事。

Answer 1

要将库附加到特定的段落类型，可以使用template_preprocess_paragraph__PARAGRAPH_TYPE()，如下所示。注意它是如何被添加到$variables数组中的，而不是元素。

function MYTHEME_preprocess_paragraph__slider(&$variables) {
  $variables['#attached']['library'][] = 'MYTHEME/carousel-styling';
}

田野也是如此。只需使用template_preprocess_field__FIELD_NAME()并直接将库附加到$variables数组。

您的content-styling和carousel-styling库可能更像下面的样子。请注意，它是如何作为theme类别添加的，而不是作为基础添加的。有关SMACSS的一些信息，请参阅文件结构上的文档。

content-styling:
  css:
    theme:
      css/content.css: {}

And终于：刷新缓存，刷新缓存并再次刷新缓存！