Tworzenie własnych szablonów stron

Jak stworzyć szablon strony internetowej? Pamiętaj, by nie edytować, ani dodawać, plików do motywu głównego. Wszelkie zmiany w motywie głównym zostaną nadpisane i utracone w momencie aktualizacji motywu. Nowy szablon strony oraz wszelkie modyfikacje należy tworzyć w motywie potomnym astratic-child.

1. Tworzenie szablonu strony

Motyw korzysta z nowoczesnego silnika szablonów blade. W katalogu motywu potomnego znajduje się plik z przykładowym szablonem (neura-child/resources/views)- page-template-example.blade.php, który można wykorzystać do tworzenia własnych szablonów.

Należy pamiętać o zmianie nazwy pliku oraz nazwy szablonu wewnątrz niego.
Istotne jest również odpowiednie rozszerzenie pliku szablonu .blade.php

2. Silnik szablonów blade

PHP zupełnie dobrze nadaje się do tworzenia szablonów, ma jednak pewne ograniczenia. Instrukcje typu <?php echo $variable; ?> w co drugiej linijce kodu HTML nie wyglądają zbyt czytelnie.

Silnik szablonów Blade wspomaga pracę z szablonami między innymi poprzez dodanie eleganckiego sposobu na wyświetlanie zmiennych, ułatwienie dziedziczenia layoutów i proste dyrektywy dla instrukcji ifforforeach itp.

Pliki Blade używają rozszerzenia .blade.php i znajdują się w katalogu resources/views.

Laravel krok po kroku – część 3 – Blade
laravelpolska.com

3. Aktywacja szablonu w motywie

Dodając specjalny komentarz na początku kodu szablonu, szablon będzie dostępny do wyboru na liście pod wskazaną nazwą.

{{--
  Template Name: Example Template
--}}

4. Szablony wpisów i archiwów

W przypadku tworzenia szablonów dla danego typu wpisu, archiwum, proces jest taki sam jak tworzenia pliku szablonu strony. Motyw respektuje hierarchię szablonów wordpress, dlatego aby przypisać szablon do pojedynczego wpisu o type „recipe„, plik szablonu należy nazwać single-recipe.blade.php, a archiwum wpisów archive-recipe.blade.php, itd.

5. Nie chcę korzystać z silnika szablonów blade

W pliku szablonu można używać kodu php bez konieczności stosowania elementów silnika blade. Taki kod wystarczy zawrzeć w dyrektywie @php.

Dla poprawnego działania szablonu, należy pamiętać o zachowaniu odpowiedniej struktury pliku – kod wewnątrz pętli while można dowolnie edytować. Należy jednak pamiętać o pozostawieniu w pliku szablonu linii z dyrektywami @extends oraz @section i samej @while, które są wymagane.

Kod szablonu korzystający z blade:

@extends('layouts.app')

@section('content')
  @while(have_posts()) @php the_post() @endphp
    {{-- You can edit the code below, this is a basic code for page templates in neura theme --}}

    <article {!! post_class('page --custom-template article') !!}>
      <div class="wrapper">
        @if ($has_page_title)
          <header class="article__header">
            <h1>
              {!! $page_title !!}
            </h1>
          </header>
        @endif    
        
        <div class="article__main --fullwidth @if (!$has_page_title) --header-off @endif">
          @php the_content() @endphp
        </div>
      </div>
    </article>

    {{-- You can edit the code above --}}
  @endwhile
@endsection

Kod szablonu korzystający z php:

@extends('layouts.app')

@section('content')
  @while(have_posts()) @php the_post() @endphp
    {{-- You can edit the code below, this is a basic code for page templates in neura theme --}}

    <article <?php post_class('page --custom-template article') ?>>
      <div class="wrapper">
        <?php if ($has_page_title) : ?>
          <header class="article__header">
            <h1>
              <?php echo $page_title ?>
            </h1>
          </header>
        <?php endif; ?>
        
        <div class="article__main --fullwidth <?php (!$has_page_title) ? '--header-off' : '' ?>">
          <?php the_content() ?>
        </div>
      </div>
    </article>

    {{-- You can edit the code above --}}
  @endwhile
@endsection

Można również dodawać kod php tylko w wybranych miejscach, korzystając z dyrektywy @php:

@extends('layouts.app')

@section('content')
  @while(have_posts()) @php the_post() @endphp
    {{-- You can edit the code below, this is a basic code for page templates in neura theme --}}

    <article {!! post_class('page --custom-template article') !!}>
      <div class="wrapper">
        @if ($has_page_title)
          <header class="article__header">
            <h1>
              {!! $page_title !!}
            </h1>
          </header>
        @endif

        @php
          $array = array('one', 'two', 'three');
          foreach ( $array as $value ) :
        @endphp
          <p>@php echo $value @endphp</p>
        @php
          endforeach;
        @endphp
        
        <div class="article__main --fullwidth @if (!$has_page_title) --header-off @endif">
          @php the_content() @endphp
        </div>
      </div>
    </article>

    {{-- You can edit the code above --}}
  @endwhile
@endsection

6. Tworzenie własnych części szablonu

Do szablonów stron można dołączać części szablonu (template partials), jak np. header, footer, sidebar itp.

Aby utworzyć własną część szablonu, należy utworzyć plik w katalogu themes/astratic

-child/resources/views/partials z rozszerzeniem blade.php.

Można wykorzystać istniejący, przykładowy plik, znajdujący się w motywie – example-content.blade.php, kopiując go i zmieniając jego nazwę.

Na przykład, tworząc szablon komponentu zawierający referencje, można utworzyć plik o nazwie testimonials.blade.php. Sekcję można załączyć do szablonu strony za pomocą dyrektywy @include w następujący sposób:

@include('partials/testimonials')
Przekazywanie zmiennych do części szablonu

Szablony blade umożliwiają przekazywanie do części szablonów zmiennych, co ułatwia budowanie reużywalnych komponentów strony, mogących pojawiać się na jednej stronie wielokrotnie, ale z różnymi danymi.

Zmienną do szablonu można przekazać poprzez wykorzystanie drugiego parametru (tablicy), do dyrektywy @include:

@include('partials/testimonials', [ 'testimonials' => ['Good', 'Better', 'The Best'] ])

W ten sposób, w szablonie testimonials.blade.php, dostępna będzie zmienna $testimonials, zawierająca tablicę z referencjami.

Potrzebujesz pomocy?

Dziękujemy!

Odpowiemy na Twoją wiadomość tak szybko jak to możliwe

Potrzebujesz pomocy? support-icon