Drupal 8 - 以编程方式将机器名称添加为类答案

【问题标题】：Drupal 8 - Add machine name to block as class programmaticallyDrupal 8 - 以编程方式将机器名称添加为类
【发布时间】：2016-10-10 17:26:03
【问题描述】：

我正在寻找一种将类添加到块的方法，但不是自定义类，即来自区域名称或块机器名称的类。

例如，对于区域，这是可能的：

    {%
       set classes = [ 'region-' ~ region|clean_class]
     %}

每个 div 都将区域的名称（在 info.yml 文件中定义）作为一个类。我想对块做同样的事情。将区域名称或机器名称添加为类。我想要一个类的原因是为了 CSS。使用类而不是 ID 来定位元素是更好的做法。

有人知道如何以编程方式实现吗？

【问题讨论】：

不能用 CSS 给元素添加类，必须使用 Js document.get***.className = "MyClass";
你用的是什么框架？因为仅考虑到您标记的标签，您在谈论的内容毫无意义。另外，添加标签时请查看标签摘录，因为class 的标签明确指出class 不能用于CSS 类...
是的，对不起。我在 drupal 8 上。

标签： drupal drupal-8

【解决方案1】：

1) Drupal 8.x 上的 Twig 只理解变量和变量的基本操作。因此，为了使用自定义变量（例如块区域），您通常需要在 预处理函数 上传递变量，然后在 Twig 中使用它们。这是一个例子：

function MYTHEME_preprocess_block(&$variables, $hook) {
  $block_id = $variables['elements']['#id'];
  $block = \Drupal\block\Entity\Block::load($block_id);

  // Add region as variable
  $variables['region'] = $block->getRegion();
}

然后在 block.html.twig 文件上：

{%
  set classes = ['region-'~region|clean_class]
%}

请参阅文档：https://www.drupal.org/docs/8/theming/twig/twig-best-practices-preprocess-functions-and-templates。

2) 如果您想要自定义块模板建议（例如针对某个地区），您可以使用 hook_theme_suggestions_alter() 更改默认主题建议。

function MYTHEME_theme_suggestions_block_alter(array &$suggestions, array $variables) {
  if ($variables['elements']['#configuration']['region']) {
    $suggestions[] = 'block__' . $variables['elements']['#configuration']['region'];
  }
}

3) 请注意，默认情况下您无法使用特定于区域的Drupal block twig templates，因为此功能已在 8.x 中删除。查看相关帖子：https://www.drupal.org/node/2011434。

【讨论】：

感谢您的帮助！
我复制了您发布的内容并添加了如下类：
我复制了你发布的内容并添加了这样的类
{{ title_prefix }} {% if label %}
{{ label }}
{% endif %} {{ title_suffix }} {% block content %} {{ content }} {% endblock %}
但我得到的是打印在首页。它似乎不起作用。但是，我发现了一个完美运行的模块“块类”。但我也想按照你的方式尝试。
我还用主题名称更改了“MYTHEME”，但无济于事。
这与代码无关，你必须学习一点关于 Twig 和/或 Drupal 的知识。 “block.html.twig”文件的位置在哪里？

【解决方案2】：

最简单的方法是使用贡献的模块，例如 block_class

【讨论】：

【解决方案3】：

我也想要这个，并在寻找答案时遇到了同样问题的这个 SO 帖子和 OPs Drupal 论坛帖子。看到我认为这回答了我们的要求，我想我会将它链接到这里以供后代使用。

来自Drupal forum comments，在您的块树枝模板中使用 Jeff Burnz 的这个 sn-p：

{%
  set classes = [
    'block',
    'block-' ~ attributes.id,
    'block-' ~ plugin_id|clean_class,
    label ? 'block-label-' ~ label|clean_class,
  ]
%}
<div{{ attributes.addClass(classes) }}>

这为你提供了一些类选项，attributes.id 是我想要的，如果你只使用它输出

<div id="blockID" class="block-blockId"...

我讨厌使用 id 进行样式设置，因此我将把它添加到我从现在开始工作的所有子主题中。希望这可以帮助。

【讨论】：

{{ label }}