Tworzymy cząstkę (particle) nagłówek CMS Joomla, Gantry 5
Aby utworzyć particle(cząstkę) zapoznaj sie z dokumentacją Gantry na ten temat.
Potrzebujemy dwa pliki. Plik odpowiedzialny za kofigurację na zapleczu Joomla/Gantry (plik yaml) oraz plik odpowiedzialny za wyświetlanie treści na froncie (plik twig).
Ważnym elementem formatowania kodu YAMl są wcięcia. Wykonujemy je za pomocą spacji i myślników. Za pomocą tych wcięć tworzysz strukturę dokumentu. Poziom wcięcia regulujesz za pomocą liczby spacji. Zabronione jest używanie tabulatora.
Typy pól YAML cząstek
Twig to nowoczesny silnik szablonów dla PHP
Naszą cząstkę nazwiemy "header subtitle"
utwórz w edytorze kodu plik header_subtitle.yaml
name: Header subtitle
description: Wyświetla tytuł, oraz podtytuł.
type: particle
form:
fields:
enabled:
type: input.checkbox
label: Włączony
description: Globalnie włącz cząstki.
default: true
title:
type: input.text
label: Tytuł
description: Dostosuj tekst tytułu sekcji.
subtitle:
type: input.text
label: podtytuł
description: Utwórz lub zmodyfikuj swój podtytuł.
css.class:
type: input.text
label: Class
description: Nazwa klasy CSS dla cząstki.
utwórz w edytorze kodu plik header_subtitle.html.twig
{% extends '@nucleus/partials/particle.html.twig' %}
{% block particle %}
<div class="header-subtitle {{ particle.css.class }}">
<div class="jl-text-center">
<p style="color:{{ gantry.config.get('styles.accent.color-1') }}">{{ particle.subtitle }}</p>
<h2>{{ particle.title }}</h2>
</div>
</div>
{% endblock %}
Jak możemy zauważyć po słowie "particle" dodawana jest po kropce wartość z pola "type" pliku yaml.
Zmienna "{{ gantry.config.get('styles.accent.color-1') }}" pobiera kolor zdefiniowany w pliku konfiguracyjnym jako "kolor akcentu 1 - Accent Color 1", który ustawiliśmy podczas tworzenia ustawień stylów
W celu zabezpieczenia wyświetlania pustych tagów na stronie w przypadku nieuzupełniaenia wszystkich pól cząstki na zapleczu naszej strony np. w tym przypadku braku "subtitle" należy zabezpieczyć się dodając warunek if dla wyświetlania tagu. Dodatkowo można zezwolić lub zabronić na wprowadzanie znaczników html. Mam nadzieję, że poradzisz sobie z modyfikacją cząstki we własnym zakresie. Podpowiedź w dokumentacji Gantry5 i wiele więcej pomocnych filtrów.
I to wszystko. Gotowa cząstka. Teraz wytarczy umieścic te dwa pliki w katalogu g5_helium/custom/particles
Dodaj cząstkę do sekcji "Features" ponad cząstka "Galeria" i uzupełnij zgodnie z projektem
cdn...
