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

Question

更新 我按照建议修复了preprocess_html钩子，并添加了一个模块结构的图片，也许有什么地方出了问题？

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

因此，我最后尝试实现这个目标的方法是将libraries.yml添加到模块中，链接block_header.css文件，并在渲染数组中添加#prefix和#suffix与css标签（div class='foo'）。

代码没有给我任何错误，但它没有应用css文件的font-weight。

你能指导我正确的方向吗？

这些是文件：

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;
}

这是我的模块结构

有什么想法我做错了什么吗？

- PhönixGeist

---

你把 block_header.css 添加到了 css 文件夹里吗？ - Chandraveer

当然可以！CSS文件夹在模块文件夹内（Module/css/css_file）。 - PhönixGeist

然后您需要附加库$build['#attached']['library'][] = 'block_header/block_header';。 - Chandraveer

在BlockHeader.php文件的build()函数中添加什么内容呢？public function build() { $config = $this->getConfiguration(); $build['#attached']['library'][] = 'block_header/block_header'; - PhönixGeist

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'
      )
    )
);

- sleukeleire

Answer 2

按照此页面上的建议，另一种方法是在块的构建数组中附加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',
      ),
    ),
    [...]
  ),
}

- upunkt

Answer 3

一种方法是这样做：

1. Add libraries to block_header.info.yml file in your module:

   libraries:
   
     - block_header/block_header
   

2. Create block_header.libraries.yml file and add:

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

3. Place css file you want to attach to css/block_header.css

4. Include css to custom form statement

5. Place the following line in form building part of the module:$form['#attached']['library'][] = 'block_header/block_header';

- boroboris

Answer 4

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

因此，我创建了block_header.module文件，并使用了这个HOOK：

<?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

- PhönixGeist

Answer 5

将以下函数重写到模块文件中

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

- Chandraveer

---

无法工作...它没有应用CSS格式...我做错了什么...X| - PhönixGeist