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

Question

已更新 我按照建议修复了 preprocess_html Hook ，并添加了模块结构的图片，也许那里有问题？？

我刚刚为 drupal-8 创建了一个自定义模块，它提供了一个可自定义的 block 。非常简单，目前正在运行，但现在我想为 block 的内容添加一些外观。

所以我最后一次尝试实现这一目标是将 libraries.yml 添加到链接 block_header.css 文件的模块，并在渲染数组中添加带有 css 标签的#prefix 和#suffix (div class='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

尝试更新正在返回的 $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'
      )
    )
);