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.

 

Layout Builder Introduce

 

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:

 

Layout Builder Tab

 

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

 

Layout Builder Tabs

 

Dostosowanie struktury układu

Zmiana kolejności bloków:

 

Layout Builder Order Blocks

 

Zmiana kolejności głównych kolumn:

 

Layout Builder Order Columns

 

Wybór liczby modułów w flexiblock:

 

Layout Builder Modules in Flexiblock

 

Przypisanie pozycji modułów:

 

Layout Builder Assign Positions

 

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

 

Layout Builder Responsive Layout

 

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

 

Layout Builder Hide Block or Position

 

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

 

Layout Builder Resize Module

 

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:

 

Layout Builder New Layout

 

Krok 2:

 

Layout Builder New Layout

 

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.

 

Layout Builder New Layout

 

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.

 

Layout Builder Add Block

 

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:

 

Layout Builder New Position

 

Edycja układu responsywnego:

 

Layout Builder New Position

 

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 $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>

Przykład:

<head>
    <?php $this->renderBlock('head'); ?>
    <?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'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";