Hoe kan ik een class attribuut toevoegen aan een Drupal 8 blok?
Er zijn veel voorbeelden in Drupal core zoals de help modules die de rol attributen voor het blok instelt. Zodoende kan ik met succes een klasse toevoegen.
/** * 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"; } }
Is het mogelijk om een klasse toe te voegen zonder de preprocess-hook? Idealiter binnen het block plugin-bestand in src / Plugin / Block /?
Dit zou helpen om alle code gerelateerd aan een blok op één locatie te houden.
Antwoord
Heb je geprobeerd om #attributes in te stellen op de render-array die door onze block plug-in wordt geretourneerd?
$build["#attributes"]["class"][] = "my-nice-block";
Kijkend naar BlockViewBuilder::preRender()
, zou dat moeten werken.
Antwoord
U kunt de module Block Class controleren.
Met Block Class kunnen gebruikers klassen aan elk blok toevoegen via de configuratie-interface van het blok. Door een zeer kort PHP-fragment toe te voegen aan een thema “s
block.tpl.php
bestand kunnen klassen worden toegevoegd aan het bovenliggende element van een blok. Hoera voor krachtigere blokthemas!
Antwoord
zoek een takjesjabloon naam suggestie voor je blok (met behulp van twig debug commentaren) en overschrijf het
themes / templates / 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 %}
Antwoord
1. Maak een hello.config-bestand
my_module_name/config/install/my_module_name.config content this code: color :"blue" color_red: "red"
2. Voeg uw bibliotheekbestand my_module_name.libraries.yml
// 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. Stel de klasse in in my_module_name.module file
function my_module_name_preprocess_block (array & $ variabelen) {
// 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");
// Verkrijg de ID van het blok
$id= $variables["elements"]["#id"]; $block = Block::load($id);
// Verkrijg de regio met de block
$region = $block->getRegion(); if($region == "name_of_the_block_id"){ // Set the class $variables["attributes"]["class"][] = $class ; } }
4. mijn_module_naam.libraries.yml
hier is mijn_module_naam de naam van mijn bibliotheek
5. Maak je css-bestand css / my_module_name.css
.red {background: red! Important; }
.groen {achtergrond: groen! belangrijk; }
.yellow {achtergrond: geel! belangrijk; }