Jak dodać niestandardowy paragraf do Drooplera na przykładzie Accordion
Moduł Paragraphs jest bardzo popularnym drupalowym modułem do tworzenia komponentów wielokrotnego użytku, używanych do budowania witryn internetowych. Daje więcej możliwości edycji użytkownikom nietechnicznym, a jednocześnie oferuje programistom możliwość kontrolowania elementów na poziomie motywu.
Paragraphs domyślnie nie jest dostarczany wraz z dostosowywaniem treści w modalnym oknie dialogowym. W celu usprawnienia i ulepszenia pracy edytora treści, w Drooplerze wykorzystaliśmy również i rozszerzyliśmy moduł Geysir.
Więc teraz tworzenie stron wygląda bardziej intuicyjnie:
Rozwijając drupalowe usługi, w Droopler staraliśmy się tworzyć wszystkie niezbędne komponenty, zachowując szeroką gamę opcji projektowania, układu i grupowania treści.
Użytkownik końcowy otrzyma następujące paragrafy już na samym początku:
- Banner – baner z tłem, ikoną, tekstem i wezwaniem do działania (CTA),
- Form – formularz drupalowy osadzony w paragrafie,
- Group of counters – grupa pojedynczych liczników,
- Gallery – prosty paragraf galerii z obsługą Colorboxa i pozbawiony opcji numerowania stron,
- Carousel – elementy przewijane przez bibliotekę Slick,
- Group of text blocks – grupa bloków lub węzłów tekstu,
- Sidebar image – obraz tła po jednej stronie, tekst po drugiej stronie,
- Reference content – lista węzłów, na przykład najnowsze posty na blogu,
- Subscribe for file – formularz umożliwiający użytkownikom zapisanie się do pliku,
- Text page – prosty paragraf tekstowy,
- Text with image background – prosty paragraf tekstowy z tłem,
- Sidebar embed – osadzenie po jednej stronie, tekst po drugiej stronie,
- Sidebar tiles – galeria płytek z jednej strony, tekst z drugiej strony,
- Side by side – dwie kolumny, blok tekstowy lub węzeł w każdej z nich,
- Tiles gallery – paragraf galerii typu masonry z obsługą Colorboxa.
Jednak nadal istnieje możliwość rozszerzenia swojej biblioteki o własne komponenty. Pokażemy w tym tekście, jak łatwo możesz to zrobić.
Aby osiągnąć nasze cele, będziemy potrzebowali:
- zainstalowanej dystrybucji Droopler (sprawdź nasze samouczki dotyczące sposobu instalacji Drooplera na Cyberfolks, serwerze Linode lub Platform.sh)
- zapoznania się również z naszym przewodnikiem dotyczącym dostosowywania schematów kolorów
Utwórzmy coś prostego i oczywistego – accordion. To niezwykle przydatny wzorzec dla stopniowego przekazywania informacji – podkreślający ważne szczegóły sekcji i ujawniający dalsze szczegóły po dotknięciu lub kliknięciu, jeśli to konieczne.
Gotowy Accordion będzie wyglądał tak:
Działanie
1. Najpierw utwórz Accordion Paragraph Type - właściwie będziemy potrzebowali dwóch paragrafów: głównego (jako opakowanie dla treści) oraz dla elementów (sama treść).
2. Accordion Paragraph Type będzie wymagał trzech pól: Content, Title i Collapsible (jako pole ustawień).
Pole Accordion Content odnosi się tylko do paragrafu Accordion Item. Oznacza to, że tylko ten jeden typ paragrafu będzie dopuszczalny w polu.
Jako pola Tytułu możemy ponownie wykorzystać już istniejące – field_d_long_text.
Ustawienia pól:
Ustawienia formularza:
Ustawienia wyświetlania:
3. Accordion Paragraph Type Item będzie wymagał dwóch pól: Content i Title.
Pole Accordion Content może odnosić się do dowolnego paragrafu – musisz jedynie upewnić się, że wygląda tak, jak chcesz. W przeciwnym razie należy dostosować niektóre szablony i style, aby dobrze do niego pasowały. Dla naszych celów użyjemy odniesienia do paragrafów Media, Node, Single block text i Text page.
Jako pola Tytułu możemy również ponownie wykorzystać field_d_long_text.
Ustawienia pól:
Ustawienia formularza:
Ustawienia wyświetlania:
Zauważ, że stworzyliśmy specjalny tryb widoku dla renderowanej encji – Accordion preview. Jak zapewne wiesz, tryby widoku w Drupalu umożliwiają renderowanie (wyświetlanie) encji drupalowej w określony sposób – w oparciu o ustalony kontekst.
4. Następnie musimy dodać nowo utworzony paragraf Accordion jako odniesienie dla typu zawartości w Content Page
Aby upewnić się, że Accordion znajduje się na liście:
5. Po utworzeniu nowego paragrafu, dodajmy go do strony, dołączając tytuł i cztery zwijane elementy.
Sprawdź ostateczny widok strony zawierający Accordion, który właśnie dodaliśmy.
Kod
Motyw Droopler wykorzystuje komponenty bootstrap, co oznacza, że możemy ponownie wykorzystać jego wtyczkę collapse JavaScript.
Jedyne co musimy zrobić to:
- utworzyć dwa szablony,
- utworzyć znaczniki html zgodnie z dokumentacją bootstrap,
- dodać jakąś podstawową bibliotekę css, pasującą do ogólnego motywu.
Szablon Accordion:
{{ 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>
Szablon Accordion Item:
{% 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
Pamiętasz, że dodaliśmy jeszcze jedno pole do naszego paragrafu Accordion o nazwie Collapsible?
Jak możesz zauważyć, nasze gotowe paragrafy są wyposażone w widżet ustawień, który pozwala nam dostosować widok akapitu tak, jak chcemy.
Obecnie nie pozwalamy na modyfikowanie tego widżetu, ale może to ulec zmianie w przyszłych wersjach. Tymczasem, najłatwiejszym sposobem może być dodanie pola, podobnie jak w przypadku pola Collapsible, które utworzyliśmy wcześniej.
Pole wyboru robi jedną prostą rzecz – zmienia efekt zwijania poprzez podanie selektora danych nadrzędnych. Jeśli podano element nadrzędny, wszystkie zwijane elementy w ramach określonego elementu nadrzędnego zostaną zamknięte, gdy ten element zwijany zostanie wyświetlony.
Oto, w jaki sposób to działa:
Pole wyboru jest zaznaczone:
I niezaznaczone:
Podsumowanie
Jak wynika z powyższego tekstu, bardzo łatwo jest rozszerzyć już i tak potężną funkcjonalność, którą Droopler oferuje klientom końcowym. Dzieje się tak dzięki odpowiednim narzędziom do tworzenia witryn internetowych. Kontynuuj tworzenie własnych wysokiej jakości projektów!
