Wie kann ich einem Drupal 8-Block ein Klassenattribut hinzufügen?
Im Drupal-Kern gibt es viele Beispiele, z. B. die Hilfemodule Dadurch werden die Attribute role für den Block festgelegt. Anschließend kann ich eine Klasse erfolgreich hinzufügen.
/** * Implements hook_preprocess_HOOK() for block templates. */ function mymodule_preprocess_block(&$variables) { if ($variables["plugin_id"] == "mymodule_my_block") { $variables["attributes"]["class"][] = "my-nice-block"; } } Ist es möglich, eine Klasse ohne den Vorverarbeitungs-Hook hinzuzufügen? Idealerweise in der Block-Plugin-Datei in src / Plugin / Block /?
Dies würde dazu beitragen, den gesamten Code für einen Block an einem Ort zu speichern.
Antwort
Haben Sie versucht, #attributes für das von unserem Block-Plugin zurückgegebene Render-Array festzulegen?
$build["#attributes"]["class"][] = "my-nice-block"; Wenn Sie sich BlockViewBuilder::preRender() ansehen, sollte dies funktionieren.
Antwort
Sie können das Modul Block Class überprüfen.
Mit Block Class können Benutzer jedem Block über die Konfigurationsoberfläche des Blocks Klassen hinzufügen. Durch Hinzufügen eines sehr kurzen PHP-Ausschnitts zu einem Thema „s
block.tpl.phpDatei können Klassen zum übergeordneten Element eines Blocks hinzugefügt werden. Hurra für ein leistungsfähigeres Block-Theming!
Antwort
Finde eine Zweigvorlage Benennen Sie einen Vorschlag für Ihren Block (unter Verwendung von Twig-Debug-Kommentaren) und überschreiben Sie ihn.
Themen / Vorlagen / Block – my-custom-block.html.twig
{% extends "block.html.twig" %} {# /** * @file * Theme override for tabs. */ #} {% block title %} {{ title_prefix }} {% if label %} <h2{{ title_attributes.addClass(title_classes, "accordion") }}{{ title_attributes.setAttribute("id", "campus") }}> {{ label }} <i class="fa fa-plus" aria-hidden="true"></i> </h2> {% endif %} {{ title_suffix }} {% endblock %} Antwort
1. Erstellen Sie die Datei hello.config
my_module_name/config/install/my_module_name.config content this code: color :"blue" color_red: "red" 2. Hängen Sie Ihre Bibliotheksdatei my_module_name.libraries.yml an
// This function below is located on my_module_name.module file function my_module_name_page_attachments(array &$page){ $page["#attached"]["library"][]= "my_module_name/library_name"; } 3. Legen Sie die Klasse in der Datei my_module_name.module fest.
Funktion my_module_name_preprocess_block (Array & $ variables) {
// Get the value of my color content in my_module_name/config/install/my_module_name.config $class = \Drupal::config("my_module_name.config")->get("color"); // ID des Blocks abrufen
$id= $variables["elements"]["#id"]; $block = Block::load($id); // Region mit dem abrufen Block
$region = $block->getRegion(); if($region == "name_of_the_block_id"){ // Set the class $variables["attributes"]["class"][] = $class ; } } 4. my_module_name.libraries.yml
hier ist my_module_name der Name meiner Bibliothek
5. Erstellen Sie Ihre CSS-Datei css / my_module_name.css
.red {Hintergrund: rot! Wichtig; }
.green {Hintergrund: grün! wichtig; }
.yellow {Hintergrund: gelb! wichtig; }