Narzędzie Layout Builder

Wprowadzenie

Layout Builder to narzędzie będące częścią EF4 Framework które umożliwia dostosowanie układu szablonu przy pomocy łatwego w obsłudze interfejsu.

Układ szablonu składa się z wielu bloków. Każdy blok może zawierać jedną lub więcej pozycji modułów. Layout Builder pozwala na:

• zmianę kolejności bloków
• zmianę kolejności kolumn głównych
• wybranie liczby modułów w flexiblock
• przypisanie pozycje modułów
• ukrycie bloku lub pojedyńczego modułu w zależności od wielkości ekranu
• zmianą szerokości modułów w flexiblock w zależności od wielkości ekranu
• zapisanie ustawień i przypisanie ich do wybranych pozycji menu

Konfiguracja

Layout Builder znajduje się w zapleczu szablonu:

Extensions -> Template Manager -> [template_name]

Kliknij w zakładkę Layout Builder:

Możliwa jest edycja dwóch elementów: struktury układu oraz układu responsywnego.

Dostosowanie struktury układu

Zmiana kolejności bloków:

Zmiana kolejności głównych kolumn:

Wybór liczby modułów w flexiblock:

Przypisanie pozycji modułów:

Dostosowanie układu responsywnego

Na górze możesz wybrać układ który chcesz edytować.

Dostępne układy:

• Duży ekran - 1200px i powyżej, zwykle komputery
• Normalny ekran - 980px-1199px, zwykle tablety trzymane poziomo i komputery
• Średni ekran - 768px-979px, zwykle tablety
• Mały ekran - 481px-767px, zwykle tablety trzymane pionowo i smartphony trzymane poziomo
• Bardzo mały ekran - 480x i poniżej, smartphony

Ukrycie bloku lub pojedynczego modułu w zależności od rozmiaru obrazu:

Zmiana szerokości modułu w flexiblock zależnie do rozmiaru ekranu:

Dodanie nowego układu

Możesz utworzyć tyle układów ile potrzebujesz. Ta funkcja może być przydatna, jeśli chcesz przypisać różne style układu do wybranych stron w Twojej witrynie.

Masz dwa sposoby na dodanie nowego układu: skopiuj układ w Layout Builder lub dodaj plik.

Kopiowanie układu w Layout Builder

Przejdź do zakładki Layout Builder w parametrach szablonu. Kliknij "Copy layout" i wykonaj wyświetlane instrukcje:

Krok 1:

Krok 2:

Nowy układ będzie dostępny na liście oraz pojawi się jako plik w katalogu:

/templates/[template_name]/tpl/

Ręczne dodanie pliku

Przejdź do następującego katalogu na swoim serwerze:

/templates/[template_name]/tpl/

Skopiuj plik default.php i zapisz jako kolejny plik w tym samym katalogu.

Struktura bloków

Każdy układ zawiera bloki i moduły. Korzystając z narzędzia Layout Builder, możesz zmienić kolejność bloków, przypisać pozycje modułów i wiele więcej. Jednakże, jeśli chcesz dodać nowy blok lub edytować strukturę bloku, to musisz edytować plik układu.

Po utworzeniu nowego plik układu, możesz go edytować.

Bloki definiuje następujący kod:

// define default blocks and their default order (can be changed in layout builder)
$blocks = $this->getBlocks('top-bar,topmenu,system-message,header,top1,top2,main,bottom1,bottom2,footer-mod,footer');

Jeśli chcesz dodać nowy blok do układu, można to zrobić w następujący sposób:

$blocks = $this->getBlocks('top-bar,topmenu,system-message,header,top1,top2,main,bottom1,bottom2,footer-mod,footer,block-name'); //block-name added

Nazwa bloku stosowana w powyższym kodzie powinna być taka sama jak nazwa pliku bloku.
Więcej informacji na temat tworzenia nowego bloku dowiesz się w następnym rozdziale.

Dodanie nowego bloku

Jeżeli już dodałeś nowy blok do układu, musisz stworzyć plik bloku.
Wszystkie bloki są zlokalizowane w poniższym folderze:

/templates/[template_name]/tpl/blocks/

Nazwa bloku i pliku muszą być takie same.

Dodanie nowej pozycji modułu

Pozycję modułu można umieścić w bloku na dwa sposoby: jako pojedyńczy moduł lub flexiblock.

Pojedyńczy moduł

Kod wstawiający pozycję pojedyńczego modułu wygląda następująco:

<jdoc:include type="modules" name="<?php echo $this->getPosition('position_name') ?>" style="jmmodule" />

Przykład:

<?php if($this->checkModules('header')) : ?>

<section id="jm-header" class="<?php echo $this->getClass('block#header') ?>">

    <div class="container-fluid">

        <jdoc:include type="modules" name="<?php echo $this->getPosition('header') ?>" style="jmmodule" />

    </div>

</section>

<?php endif; ?>

Flexiblock

Używając flexiblock możesz wyświetlić do 6 modułów w rzędzie. Flexiblock ma dodatkowe ustawienia w Layout Builder:

Edytycja struktury układu:

Edycja układu responsywnego:

Kod wstawiający flexiblock wygląda następująco:

<?php echo $this->renderFlexiblock('position_name','jmmodule'); ?>

Przykład:

<?php if($this->countFlexiblock('top1')) : ?>

<section id="jm-top1" class="<?php echo $this->getClass('block#top1') ?>">

    <div class="container-fluid">

        <?php echo $this->renderFlexiblock('top1','jmmodule'); ?>

    </div>

</section>

<?php endif; ?>

Zdefiniowanie pozycji modułu

Po stworzeniu pozycji modułu, należy zdefiniować ją w poniższym pliku:

/templates/[template_name]/templateDetails.xml

Można to wykonać w następujący sposób:

<positions>

        <position>top-bar1</position>

        <position>top-bar2</position>

        <position>top-menu-nav</position>

        <position>header</position>

        <position>position_name</position> <!-- your new module position -->

</positions>

Wgranie arkusza stylów

Dla każdego układu można załadować konkretny arkusz stylów. Ta funkcja może być przydatna, gdy masz kilka różnych stylów dla układu i nie chcesz, aby były stosowane we wszystkich układach.
Może to mieć pozytywny wpływ na szybkość ładowania strony

Krok 1: Utwórz plik LESS

Po pierwsze, trzeba utworzyć plik LESS. Plik powinien znajdować się w katalogu:

/templates/[template_name]/less/

Krok 2: Wgraj utworzony plik

Następnie wyedytuj plik znajdujący się w katalogu:

/templates/[template_name]/tpl

W sekcji <head> dodaj poniższy kod:

<?php if (defined('JMF_TPL_URL') && defined('JMF_TH_TEMPLATE')) {    
  $this->addCompiledStyleSheet(JPath::clean(JMF_TPL_URL.'less/new-layout.less'), true, JMF_TH_TEMPLATE); 
} ?>

Przykład:

<head>

  <?php $this->renderBlock('head'); ?>

    <?php if (defined('JMF_TPL_URL') && defined('JMF_TH_TEMPLATE')) {  
  
      $this->addCompiledStyleSheet(JPath::clean(JMF_TPL_URL.'less/new-layout.less'), true, JMF_TH_TEMPLATE); 
    } ?>
</head>

Krok 3: Dodaj style

Teraz możesz dodać LESS lub style CSS do utworzonego pliku.
Jeżeli chcesz wykorzystać zmienne LESS lub funkcje mixins pamiętaj o ich zaimportowaniu:

/* ====================

   VARIABLES import

   ==================== */

   

@import "template_variables.less";

@import "bootstrap_variables.less";

  

/* ====================

   MIXINS import

   ==================== */

  

@import "override/ltr/mixins.less";

@import "../../../plugins/system/jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins

@import "template_mixins.less";