Single Directory-onderdelen in Drupal core: Een uitgebreid overzicht

Gekend om zijn robuustheid en flexibiliteit, blijft Drupal evolueren en biedt het ontwikkelaars innovatieve tools om hun workflow te stroomlijnen. Een van de belangrijkste toevoegingen in recente releases is de introductie van Single Directory Components (SDC) in Drupal Core. Deze functie belooft het ontwikkelproces te vereenvoudigen, de herbruikbaarheid van componenten te verbeteren en de algehele thema-ervaring te verbeteren. In dit artikel wordt bekeken wat SDC's zijn, wat de voordelen ervan zijn en hoe je ze kunt implementeren in je Drupal-projecten.

Wat zijn Single Directory Components?

Single Directory Components in Drupal zijn een manier om alle benodigde bestanden voor een component in één enkele map onder te brengen. Dit omvat de sjablonen, stijlen, JS en configuratiebestanden van het component. Door componenten op deze manier te organiseren, kunnen ontwikkelaars ze efficiënter beheren, hergebruiken en onderhouden.

Voordelen van individuele directory-componenten

Modulariteit en herbruikbaarheid

• SDC's bevorderen een modulaire architectuur waarbij componenten eenvoudig kunnen worden hergebruikt in verschillende delen van de site, waardoor redundantie en onderhoud worden verminderd.

Betere onderhoudbaarheid

• Als alle componentgerelateerde bestanden in één map staan, zijn ze eenvoudiger te vinden en bij te werken, wat resulteert in een betere onderhoudbaarheid.

Stroomlijnde ontwikkelworkflow

• SDC's vereenvoudigen de ontwikkelworkflow doordat bestanden minder verspreid over verschillende mappen staan.

Consistentie

• Door stijlen, scripts en sjablonen samen in te kapselen, kunnen ontwikkelaars zorgen voor een consistente implementatie van componenten op de hele site.

Implementatie van Single Directory Components in Drupal

Elk component heeft één map nodig voor de assets. Deze map moet bestaan in een components/ submap van de map van uw thema of module (zodat Drupal deze kan vinden). Een {NAME}.component.yml bestand met metadata over het component. Het maken van een schema in je {NAME}.component.yml is verplicht voor modules, maar optioneel voor themes.

Kies een naam voor je component. In ons voorbeeld gebruiken we button. De naam moet uniek zijn binnen het thema. Componenten zijn naamspecifiek, dus verschillende thema's kunnen een knop component declareren.

button.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
naam: Oproep tot actie
beschrijving: Knop oproepen tot actie
rekwisieten:
  type: object
  verplicht:
    - tekst
  eigenschappen:
    text:
      type: string
      titel: Tekst knop
    modifiers:
      type: array
      items:
        type: string
      titel: Class names

Daarna moeten we de HTML-structuur van uw component definiëren in het Twig-sjabloonbestand.

button.twig

  {{ tekst }}

Laten we wat CSS toepassen op deze knop om hem een aantrekkelijker uiterlijk te geven. Het enige wat je hoeft te doen, is een CSS-bestand maken in de componentmap met de naam van je component.

button.css

.btn {
  achtergrondkleur: #007bff;
  kleur: wit;
  opvulling: 10px 20px;
  rand: geen;
  omtreklijn: 4px;
  cursor: aanwijzer;
  &.primary {
    achtergrondkleur: #0056b3;
  }
  &.secondary {
    achtergrondkleur: #6c757d;
  }
}

We hebben de volgende bestandsstructuur voor de nieuwe knop component in ons thema:

Image

Om een component te kunnen gebruiken, moeten we de component-ID weten. Dit is de machinenaam van de module of het thema dat het component levert, plus de naam van het component zelf, gescheiden door een dubbele punt. Voorbeelden:

{module}:{component} 
some_custom_module:button: waarbij some_custom_module de modulenaam is en button de componentnaam
olivero:teaser: waarbij olivero de themanaam is en teaser de componentnaam

In ons geval gebruiken we de component rechtstreeks in het Twig-sjabloon en gebruiken we het sleutelwoord {% include %}. Bewerk het bestand node.html.twig en voeg onderaan eenvoudig de volgende code toe:

 {% include 'theme_name:button' with {tekst: 'Klik op mij', modifiers: ['primary'] } only %}

Hiermee wordt onze knopcomponent opgenomen op de nodepagina. Hier is het resultaat.

Image

Lees meer over de andere nieuwe functies van Drupal 11 hier.

Conclusie

De introductie van Single Directory Components in Drupal Core betekent een belangrijke stap in de modernisering van de front-end ontwikkelworkflow in Drupal. Door alle componentgerelateerde bestanden in een enkele map te consolideren, kunnen ontwikkelaars meer modulariteit, onderhoudbaarheid en consistentie bereiken. Het gebruik van SDC's stroomlijnt niet alleen het ontwikkelproces, maar brengt Drupal ook op één lijn met moderne webontwikkelpraktijken, waardoor het een krachtiger en gebruiksvriendelijker CMS wordt.

Als Drupal zich blijft ontwikkelen, zullen functies als SDC's ongetwijfeld een cruciale rol spelen bij het verbeteren van de ervaring van ontwikkelaars en de algehele kwaliteit van Drupal-websites. Ons Drupal-bureau is er om u te helpen de Single Directory Components te ontdekken en vandaag nog te beginnen met het bouwen van meer modulaire en onderhoudbare Drupal-sites!