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

Question

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

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

所以我最后一次尝试是在链接 block_header.css 文件的模块中添加一个 libraries.yml，并在渲染数组中添加了带有 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

在模块文件中重写以下函数

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

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

所以，我终于找到了问题所在。我试图实现的 HOOK 附加 *.css 文件需要在 *.module 文件中，但我没有。

所以我用这个 HOOK 创建了 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';
  }
}

在那之后我刚刚删除了我正在使用的 HOOK，所以 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 {

  /**
   * {@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 4

根据 this page at 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',
      ),
    ),
    [...]
  ),
}

Answer 5

一种方法是：

将库添加到模块中的 block_header.info.yml 文件：
```
libraries:

  - block_header/block_header
```

创建 block_header.libraries.yml 文件并添加：

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

将要附加的 css 文件放入 css/block_header.css
将 css 包含到自定义表单语句中
在模块的表单构建部分放置以下行：$form['#attached']['library'][] = 'block_header/block_header';

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

Drupal-8, Adding CSS to a custom Module

css

drupal

drupal-modules

drupal-8