Перейти к основному содержимому

Введение в шаблоны

Во Flute существует система шаблонизации. Это значит, что движок может иметь несколько установленных тем, и переключаться между ними.

Основная структура шаблона​

Все шаблоны должны находиться в папке app/Themes/. Пример структуры шаблона:

├── assets
│   ├── img
│   ├── js
│   └── styles
│       ├── base
│       ├── components
│       ├── layouts
│       ├── pages
│       │   ├── lk
│       │   ├── profile_edit
│       ├── utils
│       └── main.scss
├── components
├── errors
├── i18n
│   └── ru
│       └── t_standard.php
├── other
├── pages
│   ├── lk
│   ├── profile
├── layout.blade.php
└── ThemeLoader.php
warning

Каждый шаблон не имеет какой-то строгой структуры, но существует некоторый свод правил, которому должны придерживаться все шаблоны:

  1. Название шаблона (оно же название папки) должно быть уникальным!
  2. В каждом шаблоне обязательно должен существовать файл layout.blade.php и ThemeLoader.php
  3. Файлы в папке pages должны соответствовать стандартному шаблону. Название этих файлов нельзя менять!

Про ThemeLoader​

ThemeLoader - Это класс, который позволяет инициализировать наш шаблон внутри системы. Так как в качестве шаблонизатора используется библиотека BladeOne, то основные функции и возможности оттуда доступны в движке. Пример ThemeLoader:

<?php

namespace Flute\Themes\standard;

use Flute\Core\Support\AbstractThemeLoader;

class ThemeLoader extends AbstractThemeLoader
{
    public function __construct()
    {
        $this->createTheme();
    }

    public function register(\Flute\Core\Template\Template $templateService)
    {
    }

    protected function createTheme()
    {
        $this->setKey("standard");
        $this->setName("Flute Standard");
        $this->setAuthor("Flames");
        $this->setDescription("Просто стандартный шаблон на Flute");
        $this->setVersion("1.1");
    }
}

Как вы видите, в самом инициализаторе указывается ключ, название шаблона, автор и так далее.

к сведению

Шаблон должен наследоваться от класса AbstractThemeLoader

Чтобы узнать подробнее про загрузчик, вы можете почитать тут

Подробнее про layout​

В самом корне шаблона, должен существовать файл layout.blade.php. Этот файл отвечает за подгрузку и настройку всех основных компонентов системы.

layout и другие шаблоны используют функции @push и @stack. @stack - служит для вывода кода, который был инциализирован внутри @push @push - позволяет вносить данные внутри @stack неограниченное количество раз

Пример структуры layout.blade.php

layout.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLang() }}" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/x-icon" href="@asset('favicon.ico')">
    <title>@yield('title', page()->title)</title>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="description" content="{{ page()->description }}">
    <meta name="keywords" content="{{ page()->keywords }}">
    <meta name="robots" content="{{ page()->robots }}">
    <meta property="og:title" content="{{ page()->og_title }}">
    <meta property="og:description" content="{{ page()->og_description }}">
    <meta property="og:image" content="{{ page()->og_image }}">

    <link rel='stylesheet' href='@asset('montserrat')' type='text/css'>
    <link rel='stylesheet' href='@asset('sfpro')' type='text/css'>
    <link rel="stylesheet" href="@asset('animate')" type='text/css'>
    <link rel="stylesheet" href="@asset('grid')" type='text/css'>
    <link rel="stylesheet" href="@asset('assets/css/libs/driver.css')">

    <script src="@asset('phosphor')"></script>

    @at(tt('assets/styles/main.scss'))

    @stack('header')
</head>

<body>
    <main>
        @stack('content')
    </main>
    <footer>
        <script src="@asset('jquery')"></script>
        <script src="@asset('assets/js/sweetalert.js')"></script>
        <script src="@asset('assets/js/driver.js')"></script>
        <script src="@asset('assets/js/forms.js')"></script>
        <script src="@asset('assets/js/app.js')"></script>


        @at(tt('assets/js/modal.js'))
        @at(tt('assets/js/template.js'))

        @stack('footer')
    </footer>
    <div class="toast-container">
        @stack('toast-container')
    </div>
</body>

</html>

В движке безусловно существуют основные stack для заполнения контента. Если вы не кординально меняете шаблон, советую оставить их названия теми же.

Про доп.функции​

Если вы внимательно смотрели пример layout, то могли заметить, что там используется функция @asset и @at. Предлагаю кратенько углубиться в смысл разделения:

Весь движок работает в папке public/. Это значит, что все стили и скрипты будут браться именно оттуда.

@asset добавит URL сайта к указанному в аргументе пути. Будет http://site.com/{путь} @at перенесет и минимизирует указанный в аргументе файл, и отдаст готовый путь. Вам лишь нужно указать полный путь до файла css / js

@at так же применим к картинкам, и может автоматически конвертировать картинки в формат webp

Так же вы могли заметить функцию tt. Эта функция будет возвращать полный путь до активного на данный момент шаблона.

к сведению

К слову mm(string $moduleName, string $path) вернет путь до модуля