Dodawanie bloków i elementów - instrukcja do szablonu „Vega Blog 2.0”

Dodawanie bloków do strony głównej odbywa się poprzez interfejs graficzny. W interfejsie użytkownika przejdź do zakładki „Strona główna” —> „Sortowanie bloków”, włącz potrzebne bloki i dostosuj ich kolejność.

Na wszystkich innych stronach można również dodawać bloki w następujący sposób:

1. Przygotowanie strony

Blok to duży, konfigurowalny fragment kodu, który zajmuje całą szerokość strony. Wewnątrz bloku mogą znajdować się elementy, ale elementy nie mogą zawierać bloków. Blok można dodać tylko do strony oczyszczonej ze stylów. W przeciwieństwie do bloków, elementy można wstawiać na standardowe strony z paskiem bocznym.

Aby dodać blok, utwórz nową stronę w backendzie Web Systems Pro i przejdź do trybu edycji HTML. Po wstawieniu kodu nie ma potrzeby powrotu do trybu edytora wizualnego - może to uszkodzić i zakłócić działanie wstawionego bloku.

Następnie, jeden raz na początku strony, musisz podłączyć plik z narzędziami:

<!-- Podłącza narzędzia -->
{include "{$wa->site->themePath(vega_blog2)}utils.html"}

Następnie dodajemy zmienną userCode o wartości true. Spowoduje to usunięcie domyślnych stylów strony. W przypadku dodawania bloków jest to obowiązkowe. Jeśli chcesz dodać element, możesz pominąć ten krok.

<!-- Usuwa standardowe style -->
{$wa->globals("userCode", true)}

Następnie można dodać bloki w dowolnej ilości lub własny kod HTML.

2. Dodawanie bloku

Dodajmy blok do strony na przykładzie bloku „Baner”. Będzie to wymagało kodu Smarty, który można uzyskać na dwa sposoby:

• Skopiuj kod z sekcji „Zestaw bloków” w dokumentacji.
• Skopiuj go wewnątrz samego szablonu z sekcji „Generator” w panelu. Otwórz ustawienia szablonu, zmodyfikuj blok zgodnie z potrzebami i zapisz. Po przeładowaniu strony znajdź blok w sekcji „Generator” lub kliknij przycisk „Pobierz kod”:

  

  
  

  Skopiuj go i wklej na wymaganej stronie. W rezultacie otrzymasz dokładną kopię bloku ze strony głównej.
  
  Każdą właściwość można zmienić ręcznie, najeżdżając na nią w panelu szablonu, aby poznać możliwe wartości.

Jak wygląda kod wynikowy? Najpierw tworzona jest tablica $props, która będzie opisywać wszystkie ustawienia i zawartość bloku. „Props” to skrót od properties, co oznacza „właściwości” lub „cechy”. Następnie wywoływany jest żądany blok, do którego przekazywana jest ta tablica.

3. Wynik końcowy

Ostatecznie wszystko razem będzie wyglądać następująco:

<!-- Linia ta łączy narzędzia -->
{include "{$wa->site->themePath(vega_blog2)}utils.html"}

<!-- Ta linia usuwa domyślne style -->
{$wa->globals("userCode", true)}

<!-- Ustawienia bloku „Baner” -->
{$props = [
    'id' => '',
    'no_margin' => '',
    'color_scheme' => 'primary',
    'image' => 'img/placeholders/1440x480.png',
    'mobile_image' => 'img/placeholders/750x900.png',
    'url' => '#',
    'sticker' => [
        'template' => 'sticker-one',
        'name' => 'Reklama',
        'text' => 'Vega Blog sp. z o.o., NIP 1234567890',
        'description' => '1a2b3c4d5e6f7g8h9'
    ]
]}

<!-- Wywołanie bloku -->
{call add_block block="banner" props=$props}

Podczas pracy z kodem ważne wiedzieć:

• Do jednej strony można dodać kilka identycznych bloków. W takim przypadku w każdym bloku należy wypełnić właściwość 'id' tak, aby była unikalna. Na przykład, w pierwszym bloku 'id' => 'banner', w drugim bloku 'id' => 'banner2' i tak dalej.
• Każda właściwość w tablicy $props powinna być oddzielona przecinkiem. Ale nie powinno być przecinka po ostatniej właściwości, spowoduje to błąd w kodzie.
• Jeśli właściwość jest oznaczona jako „opcjonalna”, można ją pominąć lub pozostawić wartość pustą.
• Wartości true i false są takie same jak '1' i '', można używać obu.

Aby pracować z blokami, przydatne może być utworzenie osobnej strony „wersja robocza”, aby dostosować ją za pomocą interfejsu graficznego szablonu. Następnie skopiować kod z tej strony i wkleić go w różnych częściach witryny. Jak to zrobić. Utwórz klon szablonu w backendzie. W aplikacji „Witryna” —> „Mapa strony www” utwórz nową regułę pod adresem /generator/*. Po prawej stronie adresu URL wybierz aplikację „Blog”. Wybierz wcześniej utworzony klon jako „Szablon graficzny”.

Niektóre bloki używają wbudowanego zestawu ikon, ich ID można znaleźć na tej stronie.

4. Własny kod HTML

Można używać własnych znaczników HTML między blokami.

{include "{$wa->site->themePath(vega_blog2)}utils.html"}
{$wa->globals("userCode", true)}

...

<h1>Hello, world!</h1>

5. Dodawanie elementów

Elementy to małe, konfigurowalne sekcje kodu, które mogą być używane w dowolnym miejscu, w tym wewnątrz bloków.

{include "{$wa->site->themePath(vega_blog2)}utils.html"}
{$wa->globals("userCode", true)}

<!-- Element „Wideo” -->
{$props = [
    'template' => 'video-one',
    'video_id' => 'HubpUg3hdgQ',
    'text' => 'Lorem ipsum dolor',
    'description' => '1:32',
    'container' => '',
    'gap' => '1',
    'attributes' => '',
    'classes' => ''
]}
{call add_element element="video/`$props.template`" props=$props}

Z elementów można złożyć swój własny blok:

{include "{$wa->site->themePath(vega_blog2)}utils.html"}
{$wa->globals("userCode", true)}

...

<!-- Umieść elementy lub kod wewnątrz zmiennej content -->
{capture assign="content"}

    <!-- Element «Badge» -->
    {$props = [
        'template' => 'badge-four',
        'type' => '',
        'size' => 'medium',
        'text' => 'Bestseller',
        'animation' => '1',
        'gap' => '1'
    ]}
    {call add_element element="badge/`$props.template`" props=$props}

    <!-- Element «Title» -->
    {$props = [
        'text' => 'Lorem ipsum dolor sit amet consectetur.',
        'size' => 'medium, H2',
        'align' => 'center',
        'animation' => '100',
        'gap' => '1'
    ]}
    {call add_element element="title" props=$props}

    <!-- Element «Text» -->
    {$props = [
        'content' => '<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Accusamus alias aliquid animi aut consequatur distinctio dolore ea eligendi est eum exercitationem.</p>',
        'size' => 'medium',
        'align' => 'center',
        'width' => '800',
        'animation' => '200',
        'gap' => '1'
    ]}
    {call add_element element="text" props=$props}

{/capture}