Drupal-8，将CSS添加到自定义模块

Question

更新的i按建议修正了preprocess_html钩子，并添加了模块结构的图片，可能有什么问题吗？？

我刚刚为drupal-8创建了一个自定义模块，该模块是一个可定制的块。非常简单，目前正在工作，但现在我想添加一些查找块的内容。

因此，我最后一次实现这一点的尝试是将一个libraries.yml添加到链接block_header.css文件的模块中，在呈现数组中，我添加了#前缀和#后缀，并添加了css标记(div =‘foo’)。

代码没有给我任何错误，但它没有应用css文件的字体大小。

你能给我指出正确的方向吗？

这是文件：

block_header.libraries.yml

block_header:
version: 1.x
css:
    theme:
        css/block_header.css: {}

BlockHeader.php

<?php

namespace Drupal\block_header\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides a 'Header' Block.
 *
 * @Block(
 *   id = "block_header",
 *   admin_label = @Translation("Block Header"),
 *   category = @Translation("Block Header"),
 * )
 */
class BlockHeader extends BlockBase implements BlockPluginInterface {

    function block_header_preprocess_html(&$variables) {
        $variables['page']['#attached']['library'][] = 'Fussion_Modules/block_header/block_header';
    }


  /**
   * {@inheritdoc}
   */
  public function build() {
    $config = $this->getConfiguration();

    if (!empty($config['block_header_title']) && ($config['block_header_text'])) {
      $title = $config['block_header_title'];
      $descp = $config['block_header_text'];
    }
    else {
      $title = $this->t('<div>Atención! Titulo no configurado!</div> </p>');
      $descp = $this->t('<div>Atención! Descripción no configurada!</div>');
    }
    $block = array
        (
            'title' => array
            (
             '#prefix' => '<div class="title"><p>',
             '#suffix' => '</p></div>',
             '#markup' => t('@title', array('@title' => $title,)),
            ),
            'description' => array
            (
             '#prefix' => '<div class="descp"><p>',
             '#suffix' => '</p></div>',
             '#markup' => t('@descp', array('@descp' => $descp,))
            ),
        );
    return $block;  

  }


/**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();

    $form['block_header_title'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Titulo del Bloque'),
      '#description' => $this->t('Titulo del Bloque'),
      '#default_value' => isset($config['block_header_title']) ? $config['block_header_title'] : '',
    );

    $form['block_header_text'] = array(
      '#type' => 'textarea',
      '#title' => $this->t('Descripción'),
      '#description' => $this->t('Descripción del bloque'),
      '#default_value' => isset($config['block_header_text']) ? $config['block_header_text'] : '',
    );

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    parent::blockSubmit($form, $form_state);
    $values = $form_state->getValues();
    $this->configuration['block_header_title'] = $values['block_header_title'];
    $this->configuration['block_header_text'] = $values['block_header_text'];
    $this->configuration['block_header_title'] = $form_state->getValue('block_header_title');
    $this->configuration['block_header_text'] = $form_state->getValue('block_header_text');
  }
}

block_header.css

.title{
    font-weight: 500;
    color:darkblue;
}

这是我的模块结构

​

知道我做错什么了吗？

Answer 1

所以我终于找到了问题所在。我试图实现的连接*.css文件的钩子--它需要放在*.module文件上，而我还没有。

所以我用这个钩子创建了block_header.module：

<?php

/**
 * Implements hook_preprocess_HOOK()
 */
function block_header_preprocess_block(&$variables) {
  if ($variables['plugin_id'] == 'block_header') {
    $variables['#attached']['library'][] = 'block_header/block_header';
  }
}

之后，我删除了我使用的钩子，所以BlockHeader.php的最后一个versión是：

<?php

namespace Drupal\block_header\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides a 'Header' Block.
 *
 * @Block(
 *   id = "block_header",
 *   admin_label = @Translation("Block Header"),
 *   category = @Translation("Block Header"),
 * )
 */

class BlockHeader extends BlockBase implements BlockPluginInterface {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $config = $this->getConfiguration();

    if (!empty($config['block_header_title']) && ($config['block_header_text'])) {
      $title = $config['block_header_title'];
      $descp = $config['block_header_text'];
    }
    else {
      $title = $this->t('<div>Atención! Titulo no configurado!</div> </p>');
      $descp = $this->t('<div>Atención! Descripción no configurada!</div>');
    }
    $block = array
        (
            'title' => array
            (
             '#prefix' => '<div class="title"><p>', /* HERE I ADD THE CSS TAGS */
             '#suffix' => '</p></div>',
             '#markup' => t('@title', array('@title' => $title,)),
            ),
            'description' => array
            (
             '#prefix' => '<div class="descp"><p>', /* HERE I ADD THE CSS TAGS */
             '#suffix' => '</p></div>',
             '#markup' => t('@descp', array('@descp' => $descp,))
            ),
        );
    return $block;  

  }


   /**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();

    $form['block_header_title'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Titulo del Bloque'),
      '#description' => $this->t('Titulo del Bloque'),
      '#default_value' => isset($config['block_header_title']) ? $config['block_header_title'] : '',
    );

    $form['block_header_text'] = array(
      '#type' => 'textarea',
      '#title' => $this->t('Descripción'),
      '#description' => $this->t('Descripción del bloque'),
      '#default_value' => isset($config['block_header_text']) ? $config['block_header_text'] : '',
    );

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    parent::blockSubmit($form, $form_state);
    $values = $form_state->getValues();
    $this->configuration['block_header_title'] = $values['block_header_title'];
    $this->configuration['block_header_text'] = $values['block_header_text'];
    $this->configuration['block_header_title'] = $form_state->getValue('block_header_title');
    $this->configuration['block_header_text'] = $form_state->getValue('block_header_text');
  }
}

就这样，现在我要将我创建的*.css文件应用到模块创建的块中。

特别感谢@No Sssweat

Answer 2

尝试更新正在返回的$block数组，并删除预处理函数：

    $block = array
(
    'title' => array
    (
     '#prefix' => '<div class="title"><p>',
     '#suffix' => '</p></div>',
     '#markup' => t('@title', array('@title' => $title,)),
    ),
    'description' => array
    (
     '#prefix' => '<div class="descp"><p>',
     '#suffix' => '</p></div>',
     '#markup' => t('@descp', array('@descp' => $descp,))
    ),
    '#attached' => array
    (
      'library' => array
      (
        'block_header/block_header'
      )
    )
);

Answer 3

遵循关于这一页在drupal.org的建议的另一种方法是将css文件附加到块的构建数组中。所以在block_header.libraries.yml中你可以写

block_header.tree:
  css:
    theme:
      css/block_header.css: {}

在BlockHeader.php中

public function build() {
  [...]
  block = array (
    '#attached' => array(
      'library' => array(
        'block_header/block_header.tree',
      ),
    ),
    [...]
  ),
}