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

Интерфейсы

Во Flute по стандарту используется шаблонизатор BladeOne. Он идентичен с Blade от Laravel, так что если вы не знакомы с ним, рекомендую ознакомиться.

Как работают интерфейсы​

Объясню принцип работы интерфейсов. Каждый запрос у нас идет рендер одного шаблона (home.blade.php), который отдает нам sidebar, navbar и все мета-теги. Но как он это делает? Вряд ли в каждом модуле надо будет прописывать все это.

Да, каждый шаблон делает @extends() основного шаблона. По сути, в шаблоне идет не отрисовка контента, а добавление контента в другой шаблон, который и будет отрисован.

Понимаю трудно, давайте к практике скорее. Посмотрим стандартный layout шаблона:

layout.blade.php
@cookie_alert
@lang_alert

<!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>

Теперь посмотрим пример главной страницы:

home.blade.php
@extends(tt('layout.blade.php'))

@section('title')
    {{ !empty(page()->title) ? page()->title : __('def.home') }}
@endsection

@push('content')
    @navbar
    <div class="container">
        @navigation
        @breadcrumb
        @flash
        @editor
    </div>
@endpush

@if (tip_active('editor'))
    @push('footer')
        <script>
            const IS_EDITING = {{ (int) page()->isEditMode() }};
        </script>
        @at(tt('assets/js/pages/home.js'))
    @endpush
@endif
@footer

Давайте разберем все по порядку.

В основном шаблоне есть @stack(), который служит "контейнером" для сбора данных со всех шаблонов.

@push() как раз и добавляет данные в наш "контейнер". Просто ведь, да?

@navbar, @navigation и т.п. - Это произвольные функции, добавляемые самим шаблоном. Подробнее об этом расписано в разделе о разработке шаблонов

И сверху есть сам @extends, в котором есть layout.blade.php обернутый в функцию tt().

warning

Функция tt() отдает полный путь до текущего шаблона. К примеру Themes/standard/

Грубо говоря, @extends просто вызывает основной шаблон, в который уже будет добавлен контент. Все просто. В модулях мы делаем по аналогии с главной страницей для создания своих страниц.

примечание

Скажу по секрету, что в шаблонах модулей можно вообще не делать @extends() основного шаблона. Вы ни в чем не ограничены. Вы можете создать свой layout, либо не использовать его вовсе. Все в ваших руках

Отрисовка интерфейсов​

Для того, чтобы отрисовать интерфейс, нам достаточно сделать рендер нашего интерфейса и вернуть его в качестве Response внутри контроллера:

/** Допустим, мы уже создали роуты для этого контроллера */
class ViewController
{
    public function index()
    {
        // Мы просто отдаем рендер нашего шаблона в качестве Response
        return view('Modules/Monitoring/Resources/Views/index');
    }
}

Подробнее про строение шаблонов​

А вот какие функции, возможности и ограничения шаблонов существуют - описаны в разделе разработки шаблонов

Дополнение стандартных шаблонов​

Если у Вас возникло желание дополнять какой-то блок глобально в шаблоне, Вы можете сделать это очень просто.

Просто рендерите свой шаблон на каждой странице!

Кхм-кхм... Что прости?

Да, вы не ослышались. Для того, чтобы добавлять какой-то один блок на страницу, вы можете ставить глобально на рендер ваш шаблон в ServiceProvider'e:

template()->render('Modules/Monitoring/Resources/Views/test', [], false);

Сам шаблон бы имел подобную структуру:

test.blade.php
@push('container')
    Я добавляюсь в контейнер, поздравьте меня!!!!
@endpush

Если вы хотите вставлять данные только на одной странице (к примеру вам надо вставить данные только на главной), то вы можете сделать проверку:

if( request()->is('/') ) { // Проверяем, является ли текущая страница главной
    template()->render('Modules/Monitoring/Resources/Views/test', [], false);
}