Wie man einen benutzerdefinierten Absatz zu Droopler am Beispiel eines Akkordeons hinzufügt

Das Modul Paragraphs ist ein sehr beliebtes Drupal-Modul zur Erstellung wiederverwendbarer Komponenten, die zum Aufbau von Seiten verwendet werden. Es bietet nicht-technischen Benutzern mehr Bearbeitungsmöglichkeiten und bietet gleichzeitig Entwicklern die Möglichkeit, die Elemente auf der Themenebene zu steuern.

Standardmäßig ist Paragraphs nicht mit der Anpassung der Inhalte in einem modalen Dialog ausgestattet. Um die Erfahrung der Content-Editoren zu verbessern, haben wir in Droopler auch das Geysir-Modul genutzt und erweitert. 

Jetzt sieht der Seitenaufbau intuitiver aus:

Beim Bereichern unserer Drupal-Dienste haben wir in Droopler versucht, alle notwendigen Komponenten mit einem breiten Spektrum an Optionen für Design, Layout und Gruppierung von Inhalten zu erstellen.

Der Endbenutzer erhält diese Absätze direkt einsatzbereit:

• Banner - Ein Banner mit Hintergrund, Symbol, Text und CTA,
• Formular - Ein Drupal-Formular, eingebettet in einen Absatz,
• Gruppe von Zählern - Gruppe von Einzelzählern,
• Galerie - Einfacher Galerie-Absatz mit Colorbox-Unterstützung und ohne Paginierung,
• Karussell - Elemente, die von der Slick-Bibliothek durchlaufen werden,
• Gruppe von Textblöcken - Gruppe von Textblöcken oder Knoten,
• Seitenleistenbild - Hintergrundbild auf einer Seite, Text auf der anderen Seite,
• Inhalt referenzieren - Eine Liste von Knoten, wie z.B. die neuesten Blog-Beiträge,
• Für Datei abonnieren - Ein Formular, das Benutzern ermöglicht, sich für eine Datei anzumelden,
• Textseite - Ein einfacher Textabsatz,
• Text mit Hintergrundbild - Ein einfacher Textabsatz mit Hintergrund,
• Seitenleisten-Einbettung - Einbettung auf einer Seite, Text auf der anderen Seite,
• Seitenfliesen - Galerie von Fliesen auf einer Seite, Text auf der anderen Seite,
• Nebeneinander - Zwei Spalten, Textblock oder Knoten in jeder,
• Fliesengalerie - Masonry-Galerie-Absatz mit Colorbox-Unterstützung.

Aber es ist immer noch möglich, unsere Bibliothek mit Ihren eigenen Komponenten zu erweitern. Hier zeigen wir, wie einfach Sie dies tun können.

Um unsere Ziele zu erreichen, werden wir benötigen:

• Die Droopler-Distribution (schauen Sie sich unsere Tutorials an, wie Sie Droopler auf Cyberfolks, Linode Server oder Platform.sh)
• Schauen Sie sich auch unser Leitfaden zur Farbschematisierung an.

Lassen Sie uns etwas Einfaches und Offensichtliches schaffen - ein Akkordeon. Es ist ein äußerst nützliches Muster zur progressiven Offenlegung - wichtige Details eines Abschnitts hervorzuheben und bei Bedarf weitere Details durch Tippen oder Klicken offen zu legen.

Das endgültige Akkordeon wird so aussehen:

Aktion

1. Zuerst erstellen wir den Akkordeon-Absatztyp, wir benötigen tatsächlich zwei Absätze: einen Hauptabsatz (als Inhaltsumhüllung) und Elemente (den eigentlichen Inhalt).

2. Der Akkordeon-Absatztyp benötigt drei Felder: Inhalt, Titel und Zusammenklappbar (als Einstellungsfeld).

Das Akkordeon-Inhaltsfeld verweist nur auf den Akkordeon-Elementabsatz. Dies bedeutet, dass nur dieser eine Absatztyp im Feld erlaubt ist.
Als Titelfeld können wir das bestehende Feld field_d_long_text wiederverwenden.

Feldeinstellungen:

Formulareinstellungen:

Anzeigeeinstellungen:

3. Der Akkordeon-Element-Absatztyp benötigt zwei Felder: Inhalt und Titel.

Das Akkordeon-Inhaltfeld kann auf jeden Absatz verweisen, stellen Sie einfach sicher, dass es so aussieht, wie Sie wollen, andernfalls müssen Sie einige Vorlagen und Stile anpassen, um sie gut anzupassen. Zu unseren Zwecken werden wir eine Referenz zu Medien, Knoten, Einzeltextblock und Textseiteabsätzen verwenden. 

Als Titelfeld können wir ebenfalls field_d_long_text wiederverwenden.

Feldeinstellungen:

Formulareinstellungen:

Anzeigeeinstellungen:

Beachten Sie, dass wir einen spezifischen Anzeigemodus für die gerenderte Entität erstellt haben - Akkordeon-Vorschau. Wie Sie vielleicht wissen, ermöglichen Ihnen die Drupal-Anzeigemodi, eine Drupal-Entität auf eine bestimmte Weise darzustellen (anzuzeigen), basierend auf einem bestimmten Kontext.

4. Dann müssen wir den neu erstellten Absatz Akkordeon als Referenz für den Inhaltstyp Inhaltsseite hinzufügen.

Um sicherzustellen, dass das Akkordeon in der Liste erscheint:

5. Nachdem wir den neuen Absatz erstellt haben, fügen wir ihm den Titel und vier zusammenklappbare Elemente hinzu.

Überprüfen Sie die endgültige Seitenansicht mit unserem hinzugefügten Akkordeon.

Der Code

Das Droopler-Theme verwendet Bootstrap-Komponenten, was bedeutet, dass wir deren Collapse-JavaScript-Plugin wiederverwenden können. 

Die einzigen wenigen Dinge, die wir tun müssen, sind:

• zwei Vorlagen erstellen,
• das HTML-Markup gemäß der Bootstrap-Dokumentation schreiben,
• einige grundlegende CSS-Bibliotheken hinzufügen, um unser globales Thema anzupassen.

Akkordeon-Vorlage:

{{ attach_library('droopler_subtheme/accordion') }}

<section class="accordion">
 <div class="accordion__container container">
   <div class="accordion__header">
     {% block title %}
       {{ content.field_d_long_text }}
     {% endblock %}
   </div>
   <div class="accordion__content" id="accordion">
     {% block content %}
       {{ content.field_accordion_item }}
     {% endblock %}
   </div>
 </div>
</section>

Akkordeon-Element-Vorlage:

{% set accordion_id = 'accord-'  ~ random('QWERTY') ~ random(9999) %}
{% set tab_id = accordion_id ~ '-tab' %}

{% set parent_entity = paragraph.getParentEntity() %}
{% set is_collapsible = parent_entity.field_accordion_collapsible ? parent_entity.get('field_accordion_collapsible').value : FALSE %}

{% set tab_attributes, toggler_attributes = create_attribute(), create_attribute() %}

{% set
 tab_attributes = tab_attributes
 .setAttribute('aria-labelledby', accordion_id)
 .setAttribute('id', tab_id) %}

{% set tab_attributes = is_collapsible ? tab_attributes.setAttribute('data-parent', "#accordion") : tab_attributes %}

{% set
 toggler_attributes = toggler_attributes
 .setAttribute('id', accordion_id)
 .setAttribute('data-toggle', 'collapse')
 .setAttribute('data-target', '#' ~ tab_id)
 .setAttribute('aria-controls', tab_id) %}

<section class="accordion__item mb-2">
 <button class="accordion__toggler p-2" {{ toggler_attributes }}>
   {% block title %}
     {{ content.field_d_long_text }}
   {% endblock %}
 </button>
 <div class="accordion__tab collapse" {{ tab_attributes }}>
   <div class="accordion__item-content p-3">
     {% block content %}
       {{ content.field_accordion_content }}
     {% endblock %}
   </div>
 </div>
</section>

Protip

Erinnern Sie sich, dass wir ein weiteres Feld zu unserem Akkordeon-Absatz hinzugefügt haben, das als Zusammenklappbar bezeichnet wird?

Wie Sie vielleicht bemerkt haben, kommen unsere vorgefertigten Absätze mit einem Einstellungs-Widget, das es uns ermöglicht, die Absatzansicht genau so anzupassen, wie wir es wollen.

Derzeit erlauben wir nicht, dieses Widget zu ändern, aber dies könnte in zukünftigen Versionen möglich sein. In der Zwischenzeit könnte der einfachste Weg sein, ein Feld hinzuzufügen, ähnlich dem, das wir zuvor für das Zusammenklappbare Feld erstellt haben.

Das einzige einfache, was dieser Checkbox macht - der Änderungseffekt wird geändert, indem der data-parent-Selektor bereitgestellt wird. Wenn der Parent bereitgestellt wird, werden alle zusammenklappbaren Elemente unter dem angegebenen Parent geschlossen, wenn dieses zusammenklappbare Element angezeigt wird.

So funktioniert es:

Die Checkbox ist aktiviert:

Und deaktiviert:

Zusammenfassung

Wie Sie oben sehen können, ist es sehr einfach, die leistungsstarke Funktionalität, die Droopler bereits für Endkunden bietet, zu erweitern. Das liegt an den richtigen Werkzeugen, die zum Aufbau von Websites verwendet werden.
Bauen Sie weiterhin Ihre eigenen hochwertigen Projekte!