Einzelne Verzeichniskomponenten in Drupal core: Ein umfassender Überblick

Drupal ist für seine Robustheit und Flexibilität bekannt und entwickelt sich ständig weiter, indem es Entwicklern innovative Werkzeuge zur Verfügung stellt, um ihre Arbeitsabläufe zu optimieren. Eine der wichtigsten Neuerungen der letzten Versionen ist die Einführung von Single Directory Components (SDC) in Drupal Core. Diese Funktion verspricht, den Entwicklungsprozess zu vereinfachen, die Wiederverwendbarkeit von Komponenten zu verbessern und das Gesamterlebnis des Themas zu steigern. In diesem Artikel erfahren Sie, was SDCs sind, welche Vorteile sie bieten und wie Sie sie in Ihren Drupal-Projekten implementieren können.

Was sind Single Directory Components?

Single Directory Components in Drupal sind eine Möglichkeit, alle notwendigen Dateien für eine Komponente in einem einzigen Verzeichnis zu kapseln. Dazu gehören die Vorlagen, Stile, JS- und Konfigurationsdateien der Komponente. Indem Komponenten auf diese Weise organisiert werden, können Entwickler sie effizienter verwalten, wiederverwenden und pflegen.

Vorteile von Einzelverzeichniskomponenten

Modularität und Wiederverwendbarkeit

• SDCs fördern eine modulare Architektur, bei der Komponenten leicht in verschiedenen Teilen der Website wiederverwendet werden können, was Redundanz und Wartung reduziert.

Verbesserte Wartbarkeit

• Da sich alle komponentenbezogenen Dateien in einem Verzeichnis befinden, sind sie leichter zu finden und zu aktualisieren, was zu einer verbesserten Wartbarkeit führt.

Stromlinienförmiger Entwicklungs-Workflow

• SDCs vereinfachen den Entwicklungs-Workflow, indem sie die Streuung von Dateien über verschiedene Verzeichnisse reduzieren. Diese Organisation passt gut zu den modernen Praktiken der Frontend-Entwicklung.

Konsistenz

• Durch die Kapselung von Stilen, Skripten und Templates können Entwickler eine konsistente Implementierung von Komponenten auf der gesamten Website sicherstellen.

Implementierung von Einzelverzeichnis-Komponenten in Drupal

Jede Komponente benötigt ein einzelnes Verzeichnis für ihre Assets. Dieses Verzeichnis muss in einem components/ Unterverzeichnis des Verzeichnisses Ihres Themes oder Moduls liegen (damit Drupal es finden kann). Eine {NAME}.component.yml Datei mit Metadaten über die Komponente. Das Erstellen eines Schemas in der {NAME}.component.yml ist für Module obligatorisch, für Themes jedoch optional. Es ist jedoch sehr empfehlenswert.

Wählen Sie einen Namen für Ihre Komponente. Wir werden button für unser Beispiel verwenden. Er sollte innerhalb des Themes eindeutig sein. Komponenten werden mit Namensraum versehen, so dass mehrere verschiedene Themes eine button Komponente deklarieren können.

button.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Aufruf zur Aktion
description: Aufruf zum Handeln Schaltfläche
props:
  Typ: Objekt
  erforderlich:
    - Text
  Eigenschaften:
    text:
      Typ: String
      Titel: Text-Schaltfläche
    Modifikatoren:
      Typ: Array
      Elemente:
        Typ: String
      title: Klassennamen

Dann müssen wir die HTML-Struktur Ihrer Komponente in der Twig-Vorlagendatei definieren.

button.twig

  {{ text }}

Lassen Sie uns etwas CSS auf diese Schaltfläche anwenden, um ihr ein ansprechenderes Aussehen zu verleihen. Alles, was Sie tun müssen, ist eine CSS-Datei im Komponentenverzeichnis zu erstellen, die den Namen Ihrer Komponente enthält.

button.css

.btn {
  background-color: #007bff;
  Farbe: weiß;
  padding: 10px 20px;
  border: keine;
  border-radius: 4px;
  Cursor: Zeiger;
  &.primary {
    background-color: #0056b3;
  }
  &.secondary {
    background-color: #6c757d;
  }
}

Wir haben die folgende Dateistruktur für die neue Button-Komponente in unserem Theme:

Image

Um eine Komponente zu verwenden, müssen wir die Komponenten-ID kennen. Dies ist der Maschinenname des Moduls oder Themas, das die Komponente bereitstellt, sowie der Name der Komponente selbst, getrennt durch einen Doppelpunkt. Beispiele:

{Modul}:{Komponente} 
some_custom_module:button: wobei some_custom_module der Name des Moduls und button der Name der Komponente ist
olivero:teaser: wobei olivero der Name des Themes und teaser der Name der Komponente ist

In unserem Fall werden wir die Komponente direkt in der Twig-Vorlage verwenden und das {% include %}-Schlüsselwort verwenden. Bearbeiten Sie die Datei node.html.twig und fügen Sie einfach den folgenden Code am Ende ein:

 {% include 'theme_name:button' with { text: 'Click Me', modifiers: ['primary'] } only %}

Damit wird unsere Button-Komponente auf der Node-Seite eingebunden. Hier ist das Ergebnis.

Image

Erfahren Sie mehr über die anderen neuen Funktionen von Drupal 11 hier.

Fazit

Die Einführung von Single Directory Components in Drupal Core ist ein bedeutender Schritt zur Modernisierung des Frontend-Entwicklungsworkflows in Drupal. Durch die Konsolidierung aller komponentenbezogenen Dateien in einem einzigen Verzeichnis können Entwickler eine größere Modularität, Wartbarkeit und Konsistenz erreichen. Die Verwendung von SDCs rationalisiert nicht nur den Entwicklungsprozess, sondern passt Drupal auch an moderne Webentwicklungspraktiken an und macht es zu einem leistungsfähigeren und benutzerfreundlicheren CMS.

Während sich Drupal weiterentwickelt, werden Funktionen wie SDCs zweifellos eine entscheidende Rolle bei der Verbesserung der Entwicklererfahrung und der Gesamtqualität von Drupal-Websites spielen. Unsere Drupal-Agentur ist hier, um Ihnen dabei zu helfen, Single Directory Components zu erforschen und noch heute mit dem Aufbau modularer und wartbarer Drupal-Websites zu beginnen!