Indywidualne dostosowywanie szablonów sekcji HTML

Wymagania i cel samouczka

Musisz mieć dostęp do edytora HTML i menedżera plików w cms bluetronix oraz odpowiednie uprawnienia dewelopera do folderu szablonów. W tym samouczku nauczysz się, jak dostosować istniejące sekcje stron, tworzyć własne szablony sekcji HTML i oferować swoim redaktorom, jeśli zajdzie taka potrzeba, tylko zatwierdzone szablony.

Pracujemy z przykładowymi szablonami Klienci i Baner. Pliki standardowe pozostają niezmienione, a indywidualne zmiany są wprowadzane poprzez oznaczenie _own.

1. Znalezienie szablonów sekcji stron w edytorze

Otwórz istniejącą stronę w CMS, wybierz Edytuj i otwórz przez Wstaw → Sekcja strony wybór szablonów. Menu kontekstowe oferuje również pozycję Blok tekstowy dla mniejszych treści do wielokrotnego użytku. Ten samouczek dotyczy najpierw sekcji stron.

W oknie Sekcja strony dostępne szablony są wyświetlane z podglądem. 

Wybierz przykład kategorii Klienci. Znajdziesz tam kilka wariantów układu.

2. Gdzie są przechowywane szablony

Pliki szablonów znajdują się w folderze dewelopera /bx_Layout/. Otwórz w menedżerze plików ten folder. Znajdziesz tam między innymi pliki dla sekcji stron (Section*.txt) oraz bloków tekstowych (Tag*.txt).

Nazwa pliku określa przypisanie do wyboru szablonów. Szablon sekcji strony zawsze zaczyna się od Section; następnie pojawia się jej indywidualna nazwa. Dla własnych wariantów przed rozszerzeniem pliku dodaje się przyrostek _own.

Możesz również utworzyć całkowicie nowy szablon. W tym celu wybierasz własną nazwę po Section. Jeśli nie istnieje plik o tej samej nazwie w standardzie, nowy szablon pojawi się dodatkowo, zamiast zastępować istniejący.

3. Dlaczego nie powinieneś edytować plików standardowych bezpośrednio

Standardowe pliki dostarczane z CMS z /bx_Layout/ będą nadpisywane podczas aktualizacji systemu. Zmiany wprowadzane bezpośrednio w SectionClients.txt lub SectionBanner.txt nie są zatem trwałe. Skopiuj pożądany plik standardowy i oznacz swoją wersję przyrostkiem _own. Odpowiednie warianty _own są przeznaczone do Twoich indywidualnych, odpornych na aktualizacje dostosowań.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Jeśli obydwa pliki istnieją, CMS użyje odpowiedniego SectionClients_own.txt zamiast szablonu standardowego SectionClients.txt. Nie musisz zmieniać nazwy kategorii Klienci w edytorze.

Jeśli stworzysz z kolei własny plik pod nową nazwą, na przykład SectionMyTemplate_own.txt, standardowy szablon Klienci również pozostanie dostępny.

4. Budowa szablonu sekcji HTML: znacznik separatora

Plik sekcji może zawierać wiele wariantów układu tej samej kategorii. Aby edytor CMS rozpoznał poszczególne warianty, są one oddzielane od siebie następującym znacznikiem:

<!--__SP_SectionTemplate__-->

Znak znajduje się na początku, pomiędzy wariantami i na końcu przykładowego pliku. Zachowaj pisownię dokładnie. Brak znacznika oddzielającego powoduje, że edytor nie może niezawodnie przedstawić kilku wariantów jako oddzielnych opcji.

Standardowy szablon SectionBanner.txt ilustruje tę zasadę przy użyciu różnych układów banerów. Możesz go użyć jako podstawy do stworzenia własnej, prostszej sekcji.

<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
   <div class="container py-3">
      <div class="row align-items-center g-4">
         <div class="col-lg-8 wow fadeInLeft">
            <span class="badge text-bg-warning mb-3">&#x00AD;New&#x00AD;</span>
            <h2 class="mb-2">&#x00AD;Designed for everyday success&#x00AD;</h2>
            <p class="mb-0">&#x00AD;Explore practical solutions created to make everyday work easier, clearer and more effective.&#x00AD;</p>
         </div>
         <div class="col-lg-4 text-lg-end wow fadeInRight">
            <a href="#"><button class="btn btn-light btn-lg">&#x00AD;Learn more&#x00AD;</button></a>
         </div>
      </div>
   </div>
</Section>
<!--__SP_SectionTemplate__-->

Przykład to pełna wariant banera. Dla drugiego wariantu umieść jego kod HTML za ostatnim markerem separatora, a następnie zakończ również ten wariant tym samym markerem. Rzeczywistą sekcję możesz następnie dostosować do swoich wymagań.

Klasa sectionAll nie musi być dodawana ręcznie: edytor bluetronix dodaje ją automatycznie podczas wstawiania sekcji strony.

5. Skopiowanie szablonu klientów i zmiana nagłówka

Otwórz istniejący szablon SectionClients w menedżerze plików i zapoznaj się z jego kodem HTML. W naszym przykładzie zawiera on nagłówek, opis oraz kilka kafelków partnerów.

Skopiuj odpowiedni szablon jako SectionClients_own.txt i otwórz kopię przez Edytuj. Dodaj do nagłówka nasz testowy tekst NEW!!!!. Możesz także dowolnie zmieniać tekst, liczbę kart, symbole lub CSS.

<!-- Vorher -->
<h2>&#x00AD;Trusted by growing organizations&#x00AD;</h2>

<!-- Nachher in SectionClients_own.txt -->
<h2>&#x00AD;NEW!!!! Trusted by growing organizations&#x00AD;</h2>

Kliknij Zapisz, a następnie ponownie otwórz wybór Wstaw → Sekcja Strony → Klienci. Możesz rozpoznać swoją wersję po zmienionym nagłówku. Drugi wariant klientów można niezależnie wybrać i edytować.

6. Oferowanie własnego szablonu pod nową nazwą

Możesz stworzyć oddzielny szablon zamiast zastępczego pliku o tej samej nazwie. Skopiuj na przykład jedną z wersji klientów i zapisz ją jako SectionMyTemplate_own.txt. Część za Section to własna nazwa szablonu; definiuje ona nowy wybór w edytorze. Oryginalny szablon Clients nie zostanie zastąpiony inną nazwą.

SectionClients.txt          → Standard: Clients
SectionClients_own.txt      → eigene Version von Clients
SectionMyTemplate_own.txt   → zusätzliche eigene Vorlage MyTemplate

Możesz stworzyć stałe sekcje dla konkretnych typów stron dla klienta, nie zmieniając treści wszystkich dostarczonych szablonów.

7. Wyświetlanie wyłącznie własnych szablonów za pomocą Only_own.txt

Jeśli końcowy klient ma używać tylko twoich zatwierdzonych szablonów, utwórz w folderze /bx_Layout/ plik flagowy Only_own.txt. Zgodnie z przedstawioną konfiguracją szablonów, w ofercie będą wyświetlane tylko odpowiednie pliki własne z dopiskiem _own. Plik ten nie wymaga kodu HTML do tej funkcji.

/bx_Layout/Only_own.txt

Przykład: Jeśli w katalogu znajdują się SectionClients.txt, SectionBanner.txt i SectionMyTemplate_own.txt, wybór po aktywowaniu tego ustawienia powinien zawierać tylko odpowiedni własny szablon. Dzięki temu możesz dostarczyć klientowi precyzyjny wybór związany z projektem.

8. Własne szablony tagów do bloków tekstowych

To samo _own-pryncypium dotyczy mniejszych bloków tekstowych. Ich pliki zaczynają się od Tag. Na przykład TagTemplate.txt zamienia się w TagTemplate_own.txt. Tę wersję możesz udostępnić za pomocą wpisu Blok tekstowy w edytorze.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Duplikowanie edytowalnych kolumn z colAll

Kiedy sekcja zawiera wiele powtarzalnych kolumn, kolumna z klasą colAll może być rozpoznana jako niezależny blok. Dzięki temu w menu kontekstowym dostępna jest funkcja Kolumna art. → Duplikuj.

<div class="colAll col-md-6">
   <h2>&#x00AD;Hello world&#x00AD;</h2>
   <p>&#x00AD;Writing&#x00AD;</p>
</div>

Podczas duplikacji dany blok zostaje wstawiony jako druga kolumna. Dla powtarzalnej karty lub kolumny artykułu musisz zatem ustawić colAll w odpowiednim kontenerze. Klasa nadrzędna sectionAll jest natomiast automatycznie generowana przez edytor.

10. Znaczniki tekstowe i wielojęzyczne szablony

Dostarczone standardowe sekcje zawierają w przykładach tekstów ciąg ­, na przykład przed i po nagłówkach. Te oznaczenia tekstowe nie powinny być mylone z markerem separacji <!--__SP_SectionTemplate__-->. Podczas kopiowania istniejących szablonów powinieneś najpierw zachować takie oznaczenia CMS, jeśli zachować ma się dotychczasowe zachowanie edytora.

<h2>&#x00AD;Designed for everyday success&#x00AD;</h2>

W projektach wielojęzycznych dodatkowe oznaczenia tłumaczeniowe mogą być przydatne, aby redaktorzy mogli zarządzać treściami w potrzebnych językach. CMS bluetronix jest przystosowany do 24 języków. Dla prostego, jednoljazowego szablonu projektowego możesz pominąć niepotrzebne dodatkowe oznaczenia tłumaczeniowe; wymagane oznaczenia sekcji dla edytora muszą zostać zachowane.

11. Własne funkcje i wymagane pliki include

Jeśli rozszerzasz szablon o funkcje PHP lub wyjścia modułów, używaj unikalnych nazw dla własnych funkcji. Istniejąca funkcja nie może być zadeklarowana ponownie pod tą samą nazwą. Możesz zabezpieczyć deklarację za pomocą function_exists():

if(!function_exists("MyTestFunction")) {
   function MyTestFunction($Test) {
      return $Test;
   }
}

Wymagane includes powinny być włączone przynajmniej raz na każdą sekcję. Odpowiedni znacznik include można skopiować z edytora:

<!--bxInclude--/bx_Mod/Blog_Detail-->

Wewnętrzne pliki szablonów z rozszerzeniami .txt i .bx nie są przeznaczone do bezpośredniego pobrania przez publiczne adresy URL HTTP/HTTPS zgodnie z opisaną konfiguracją serwera CMS. Są one czytane i przetwarzane po stronie serwera.

12. Dlaczego ograniczone szablony dla zespołów redakcyjnych są sensowne

Dzięki własnym sekcjom i Only_own.txt określasz, które gotowe bloki układowe końcowy klient może wybrać. Dodatkowo w ustawieniach użytkownika możesz ograniczyć funkcje edytora, takie jak zmiana czcionki czy koloru. Redaktorzy mogą wówczas wprowadzać jedynie z góry ustalone sekcje, edytować teksty i wymieniać obrazy, nie musząc swobodnie przebudowywać ustalonego projektu strony.

Taki sposób pracy sprawdza się szczególnie w większych projektach dla klientów, portalach firmowych oraz w zespołach z wieloma redaktorami. Projekt pozostaje spójny, podczas gdy treści mogą być elastycznie zarządzane.

13. Wynik i podsumowanie

Otwórz /bx_Layout/, skopiuj istniejący plik sekcji, dodaj _own, dostosuj kod HTML i sprawdź wynik w Wstaw → Sekcja Strony. Dla nowych kategorii wyboru używaj własnej nazwy pliku, która zaczyna się od Section.

SectionClients.txt
       ↓ kopieren
SectionClients_own.txt
       ↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
       ↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients

Jeśli dodatkowo aktywujesz Only_own.txt i odpowiednio ograniczysz prawa edytora, twoi redaktorzy będą mogli pracować z dostarczonymi własnymi szablonami HTML Section.