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

这是我的模块结构

任何想法我做错了什么？

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 ：

WARNING [Thread-11] org.apache.catalina.loader.WebappClassLoaderBase.clearReferencesThreads The web application [hai] 
appears to have started a thread named [Timer-0] but has failed to stop it. 
 This is very likely to create a memory leak. Stack trace of thread:
 java.lang.Object.wait(Native Method)
 java.lang.Object.wait(Unknown Source)
 java.util.TimerThread.mainLoop(Unknown Source)
 java.util.TimerThread.run(Unknown Source)

之后我刚刚删除了我正在使用的HOOK，所以 BlockHeader.php 的最后一个版本是：

<?php

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

就是这样，现在我将我创建的* .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添加到自定义模块

5 个答案: