- @extends (‘layout’) laravel. Система шаблонов Blade не работает
- 10 ответов
- Laravel 5.4 — @extends не работает
- Решение
- Другие решения
- Laravel @extends и @include
- Решение
- Другие решения
- Laravel по-русски
- #1 02.04.2014 20:01:50
- Почему не работает @extends в Laravel 4?
- #2 02.04.2014 20:15:03
- Re: Почему не работает @extends в Laravel 4?
- #3 02.04.2014 20:37:48
- Re: Почему не работает @extends в Laravel 4?
- #4 02.04.2014 20:40:45
- Re: Почему не работает @extends в Laravel 4?
- #5 02.04.2014 20:42:31
- Re: Почему не работает @extends в Laravel 4?
- #6 02.04.2014 20:49:18
- Re: Почему не работает @extends в Laravel 4?
- #7 02.04.2014 21:00:58
- Re: Почему не работает @extends в Laravel 4?
- #8 02.04.2014 21:06:23
- Re: Почему не работает @extends в Laravel 4?
- #9 02.04.2014 21:08:17
- Re: Почему не работает @extends в Laravel 4?
- Laravel 8 · Шаблонизатор Blade
- Введение
- Отображение данных
- Вывод JSON
- Преобразование в HTML-сущности
- Вывод неэкранированных данных
- Blade и JavaScript фреймворки
- Директива @verbatim
- Директивы Blade
- Операторы If
- Директивы аутентификации
- Директивы окружения
- Директивы секций
- Операторы Switch
- Циклы
- Переменная Loop
- Комментарии
- Подключение дочерних шаблонов
- Отрисовка шаблонов с коллекциями
- Директива @once
- Необработанный PHP
- Компоненты
- Самостоятельная регистрация компонентов пакета
- Отрисовка компонентов
- Передача данных компонентам
- Именование
- Экранирование атрибутов от синтаксического анализа
- Методы компонента
- Доступ к атрибутам и слотам в классах компонентов
- Дополнительные зависимости
- Скрытие атрибутов / методов
- Атрибуты компонента
- Атрибуты по умолчанию и слияние атрибутов
- Условное слияние классов
- Слияние неклассовых атрибутов
- Получение и фильтрация атрибутов
- Зарезервированные ключевые слова
- Слоты
- Слоты с ограниченной областью видимости
- Встроенные шаблоны компонентов
- Генерация компонентов со встроенными шаблонами
- Анонимные компоненты
- Свойства / атрибуты данных
- Динамические компоненты
- Самостоятельная регистрация компонентов
- Автозагрузка компонентов пакета
- Создание макетов
- Макеты с использованием компонентов
- Определение компонента макета
- Использование компонента макета
- Макеты с использованием наследования шаблонов
- Определение макета
- Расширение макета
- Формы
- Поле CSRF
- Поле Method
- Ошибки валидации
- Стеки
- Внедрение служб
- Расширение Blade
- Пользовательские операторы If
@extends (‘layout’) laravel. Система шаблонов Blade не работает
Я попытался использовать систему шаблонов laravel: blade , но, похоже, не работает при использовании кода ниже в файле users.blade.php :
10 ответов
Это должно работать, если у вас есть файл шаблона в /app/views/layout.blade.php, который содержит
Затем в вашем /app/views/user.blade.php содержимое
Если вы позвоните return View::make(‘user’) , у вас должен быть скомпилированный контент
Надеюсь, это поможет вам прояснить ситуацию. Если нет, можете ли вы указать расположение файлов шаблона и соответствующий контент?
Просто сохраните исходный код, используя кодировку UTF-8 without signature .
Допустим, у вас есть master.blade.php и index.blade.php. и оба файла находятся в домашнем каталоге views->. если вы хотите использовать @extends в index.blade.php, вызывая master.blad.php, вы должны записать в файл index.blade.php следующее сообщение:
Перечислить вещи, чтобы убедиться
правильно указаны имя файла и путь
дважды проверьте расширение файла .blade.php
Убедитесь, что вы вставили ссылку css в App.blade.php
Для меня По умолчанию нет ссылки на файл css
Вставьте следующую ссылку в app.blade.php
Теперь все работает нормально 🙂
По умолчанию в Laravel есть папка layouts внутри папки views , то есть app/views/layouts , и в этой папке вы храните файлы макета, то есть app/views/layouts/index.master.php , и если у вас есть что-то подобное, тогда вы должны использовать что-то вроде этого:
Это будет наследовать / использовать файл master.blade.php (как макет) из папки layouts , здесь layouts.master означает layouts/master.blade.php .
В вашем файле master.blade.php вы должны иметь это
Таким образом, данные / контент из представления между @section(‘content’) и @stop будут сброшены вместо @yield(‘content’) вашего макета.
Вы можете использовать любое имя для своего файла layout , если это layouts/main.blade.php , тогда вам следует использовать
У меня та же проблема. Что сделано: 1. в routes.php
Что AboutController является файлом контроллера. AboutController.php в индексе приложений / контроллеров является функцией внутри этого контроллера.
2.Создайте файл AboutController.php в приложении / контроллерах.
Если он в app/views/layouts , то он должен быть
(при условии, что имя — index.blade.php)
Пример: @extends(‘layouts.foo’) соответствует файлу в app/views/layouts/ , который называется foo.blade.php или foo.php . (в зависимости от того, используете ли вы лезвие)
Просто удалите лишний пробел или что-нибудь еще перед @extends (‘yourlayoutfile’).
Это должно быть первое, что нужно отобразить в файле.
Я столкнулся с той же проблемой и много чего пробовал. Внезапно я обнаружил один пробел в начале файла перед @extends.
Убрал пространство и работает нормально.
Если это не сработало, попробуйте:
Скопируйте все содержимое файла, а затем удалите файл.
Создайте новый файл и сохраните его как filename.blade.php
Только после сохранения файла вставьте содержимое на страницу. Сохраните изменения и запустите.
Источник
Laravel 5.4 — @extends не работает
У меня есть два основных вида в Ларавеле.
Оба файла называются в web.php следующим образом:
Вот их функция в CharacterController:
/ символы работают нормально.
Оно использует
Весь контент загружается нормально и CSS отображается.
Однако символы /
Он отображает содержимое из @extends, но не отображает CSS вообще.
Это шаблон лезвия для символов /
Он идентичен представлению, используемому символами /, за исключением того, что находится в разделе содержимого.
Решение
В вашем master.blade.php макет, активы загружаются из относительного URL
Так, например, если ваши активы загружены из assets/css/bootstrap.min.css и ваш текущий URL example.com/character тогда ваш актив будет загружен из example.com/assets/css/bootstrap.min.css , Это пока нормально
Но если ваш URL example.com/characters/potato тогда актив будет загружен из example.com/characters/assets/css/bootstrap.min.css , Это можно легко определить с консоли браузера, поскольку при загрузке ресурсов будет отображаться 404 ошибки. (F12 на хром)
Два решения этого:
- Префикс вашего пути активов с косой чертой, как это /assets/css/bootstrap.min.css ,
- Специфическим решением для Laravel является использование вспомогательной функции актива. << asset('assets/css/bootstrap.min.css') >> ,
Другие решения
Сначала опубликуйте свой код макета.
во-вторых, убедитесь, что вы вызываете свой CSS с помощью помощника asset например.
Источник
Laravel @extends и @include
Я работаю над этим проектом, используя Laravel.
В соответствии с этим уроком, который я смотрю, мне нужно было добавить этот фрагмент кода вверху главного окна.
Так как я новичок в Laravel, это заставило меня задуматься, почему я не могу просто использовать.
Я попробовал это вместо этого, и он сделал то же самое в принципе. Единственное, я знаю, как работает include, но я не знаю, что делает extends.
Есть ли разница и так, да, что это. Почему учебник парень пошел на @extends и не @include.
Решение
@include это как обычное PHP-включение, оно включает в себя «частичное» представление.
@extends позволяет «расширять» шаблон, который определяет его собственные разделы и т. д. Шаблон, который вы можете расширить, будет определять свои собственные разделы, используя @yield , который вы можете поместить свои собственные вещи в ваш файл просмотра.
template.blade.php
вид-one.blade.php
Теперь вы можете создать другое представление, которое расширяет тот же шаблон, но предоставляет свои собственные разделы.
Еще одно преимущество использования @extend это наследство. Вы можете предоставить базовый шаблон, а затем другой дочерний шаблон, который расширяет тот, который впоследствии дает свои собственные разделы. Затем вы можете расширить этот дочерний шаблон.
Другие решения
@include не предоставляет структурный каркас, который делает расширение шаблона макета с помощью @extend. С @include вы вставляете частичку из другого файла.
Расширение шаблона лезвия обеспечивает структуру для представления, определенного в шаблоне макета. Например, макет:
макеты / layout.blade.php
show.blade.php
@extends с @section это более мощный и удобный способ использования макетов, особенно в больших приложениях. Это позволяет использовать наследование. Вы можете сделать то же самое с несколькими @include но это будет менее читаемым и менее обслуживаемым решением.
Узнайте больше о @extends и как это работает Вот .
Источник
Laravel по-русски
Русское сообщество разработки на PHP-фреймворке Laravel.
#1 02.04.2014 20:01:50
Почему не работает @extends в Laravel 4?
Не знаю почему, но у меня абсолютно не работают шаблоны blade. Первый раз работаю с данным фреймврком и сразу столкнулась с этой проблемой. Создала маршрут:
ну и сам шаблон:
При переходе на страницу new происходит следующий вывод: @extends(‘layout’) instead of @layout(‘layout’).
Я, конечно, не очень опытный разработчик. Может это моя какая-то тупость и все же буду безмерно благодарна, если кто-то поможет мне разобраться.
#2 02.04.2014 20:15:03
Re: Почему не работает @extends в Laravel 4?
Используйте, пожалуйста, [CODE] для оформления кода.
В вашем шаблоне так и написано? Это неверно, должно быть просто @extends(‘layout’) — похоже, что вы скопировали это из какой-то статьи.
Ничего себе… a → p → h3.
Не в сети 08.04.2012
#3 02.04.2014 20:37:48
Re: Почему не работает @extends в Laravel 4?
Такая конструкция тоже не работает. Я естественно пробовала ее изначально. Это меня и смутило.
#4 02.04.2014 20:40:45
Re: Почему не работает @extends в Laravel 4?
В выводе на странице оказывается подобная строчка :
@extends(‘layout’).
И все.
P.s. Ну да, верстка кривая.
#5 02.04.2014 20:42:31
Re: Почему не работает @extends в Laravel 4?
А точка-то зачем?
Не в сети 08.04.2012
#6 02.04.2014 20:49:18
Re: Почему не работает @extends в Laravel 4?
Не в сети 02.04.2014
#7 02.04.2014 21:00:58
Re: Почему не работает @extends в Laravel 4?
Я, честно говоря, не знаю, что у вас там не так. Посмотрите на следующее:
- Какая кодировка файла? Не UTF-8 with BOM? Должно быть или ASCII/ANSI, или UTF-8.
- Нет ли пробелов/пустых строк в начале, перед @extends ?
- Если использовать любые конструкции Blade ( @layout или << var >> , например) — они работают или выводятся как есть?
Не в сети 08.04.2012
#8 02.04.2014 21:06:23
Re: Почему не работает @extends в Laravel 4?
Огромное вам спасибо! Просто спасли) Честно говоря и не думала, что могут быть проблемы с кодировками. Кстати говоря, кодировка была UTF-8, но именно с ней и не работало. Переставила на ANSI и все заработало! Просто спасли)
Не в сети 02.04.2014
#9 02.04.2014 21:08:17
Re: Почему не работает @extends в Laravel 4?
- Кстати говоря, кодировка была UTF-8, но именно с ней и не работало.
Что у вас за редактор? Похоже он сохраняет UTF-8 с BOM (это два «символа» в начале с кодами FF FE , которые вставляются перед любым содержимым файла). PHP этого не любит, только UTF-8 без BOM. Обычно редакторы делают это по умолчанию.
Я бы посоветовал выбрать другой редактор, если он косячит на таких мелочах.
Источник
Laravel 8 · Шаблонизатор Blade
Введение
Blade – это простой, но мощный движок шаблонов, входящий в состав Laravel. В отличие от некоторых шаблонизаторов PHP, Blade не ограничивает вас в использовании простого кода PHP в ваших шаблонах. На самом деле, все шаблоны Blade компилируются в простой код PHP и кешируются до тех пор, пока не будут изменены, что означает, что Blade добавляет фактически нулевую нагрузку вашему приложению. Файлы шаблонов Blade используют расширение файла .blade.php и обычно хранятся в каталоге resources/views .
Шаблоны Blade могут быть возвращены из маршрутов или контроллера с помощью глобального помощника view . Конечно, как упоминалось в документации по HTML-шаблонам, данные могут быть переданы в шаблоны Blade, используя второй аргумент помощника view :
Отображение данных
Вы можете отображать данные, которые передаются в шаблоны Blade, заключив переменную в фигурные скобки. Например, учитывая следующий маршрут:
Вы можете отобразить содержимое переменной name следующим образом:
Выражения вывода << >> Blade автоматически отправляются через функцию htmlspecialchars PHP для предотвращения XSS-атак.
Вы не ограничены отображением содержимого переменных, переданных в шаблон. Вы также можете вывести результаты любой функции PHP. Фактически, вы можете поместить любой PHP-код в выражение вывода Blade:
Вывод JSON
Иногда вы можете передать массив вашему шаблону с намерением отобразить его как JSON, чтобы инициализировать переменную JavaScript. Например:
Однако вместо ручного вызова json_encode вы можете использовать директиву @json Blade. Директива @json принимает те же аргументы, что и функция json_encode PHP. По умолчанию директива @json вызывает функцию json_encode с флагами JSON_HEX_TAG , JSON_HEX_APOS , JSON_HEX_AMP , и JSON_HEX_QUOT :
Вы должны использовать директиву @json только для отображения существующих переменных как JSON. Шаблонизатор Blade основан на регулярных выражениях, и попытки передать сложное выражение в директиву могут вызвать неожиданные сбои.
Преобразование в HTML-сущности
По умолчанию Blade (и глобальный помощник e Laravel) будет дважды кодировать объекты HTML. Если вы хотите отключить двойное кодирование, вызовите метод Blade::withoutDoubleEncoding в методе boot вашего AppServiceProvider :
Вывод неэкранированных данных
По умолчанию, выражения вывода << >> Blade автоматически отправляются через функцию htmlspecialchars PHP для предотвращения XSS-атак. Если вы не хотите, чтобы ваши данные были экранированы, вы можете использовать следующий синтаксис:
Будьте очень осторожны при выводе содержимого, полученого от пользователей вашего приложения. Обычно следует использовать экранированный синтаксис двойных фигурных скобок для предотвращения атак XSS при отображении данных, предоставленных пользователем.
Blade и JavaScript фреймворки
Поскольку во многих фреймворках JavaScript также используются «фигурные» скобки, чтобы указать, что данное выражение должно отобразиться в браузере, вы можете использовать символ @ , чтобы сообщить движку Blade, что выражение должно остаться нетронутым. Например:
В этом примере Blade удалит символ @ ; однако выражение << name >> останется нетронутым движком Blade, что позволит обработать его вашим фреймворком JavaScript.
Символ @ также используется для исключения из обработки директив Blade:
Директива @verbatim
Если вы отображаете переменные JavaScript в крупной части своего шаблона, вы можете заключить HTML в директиву @verbatim , чтобы вам не приходилось добавлять префикс @ к каждому выражению вывода Blade:
Директивы Blade
Помимо наследования шаблонов и отображения данных, Blade также содержит удобные псевдонимы для общих структур управления PHP, таких как условные операторы и циклы. Эти директивы обеспечивают очень чистый и лаконичный способ работы со структурами управления PHP, но при этом остаются схожими со своими аналогами PHP.
Операторы If
Вы можете создавать операторы if , используя директивы @if , @elseif , @else , и @endif . Эти директивы работают так же, как и их аналоги в PHP:
Для удобства Blade также содержит директиву @unless :
В дополнение к уже обсужденным условным директивам, директивы @isset и @empty могут использоваться в качестве удобных ярлыков для соответствующих функций PHP:
Директивы аутентификации
Директивы @auth и @guest могут использоваться для быстрого определения, является ли текущий пользователь аутентифицированным или считается гостем:
При необходимости вы можете указать охранника аутентификации для проверки при использовании директив @auth и @guest :
Директивы окружения
Вы можете проверить, запущено ли приложение в эксплуатационном окружении, с помощью директивы @production :
Или вы можете определить, работает ли приложение в конкретной среде, с помощью директивы @env :
Директивы секций
Вы можете определить, есть ли в секции наследуемого шаблона содержимое, используя директиву @hasSection :
Вы можете использовать директиву sectionMissing , чтобы определить, что в секции нет содержимого:
Операторы Switch
Операторы Switch могут быть созданы с использованием директив @switch , @case , @break , @default и @endswitch :
Циклы
В дополнение к условным операторам, Blade содержит простые директивы для работы со структурами циклов PHP. Опять же, каждая из этих директив работает так же, как и их аналоги в PHP:
При создании цикла вы можете использовать переменную Loop, чтобы получить информацию о цикле, например, находитесь ли вы в первой или последней итерации цикла.
Вы также можете завершить цикл или пропустить текущую итерацию, используя директивы @continue и @break :
Вы также можете включить в объявление директивы условие продолжения или прерывания:
Переменная Loop
Внутри цикла доступна переменная $loop . Она обеспечивает доступ к некоторой полезной информации, например, индекс текущего цикла, первая это или последняя итерация цикла:
При нахождении во вложенном цикле, вы можете получить доступ к переменной $loop родительского цикла через свойство parent :
Переменная $loop также содержит множество других полезных свойств:
| Свойство | Описание |
|---|---|
| $loop->index | Индекс текущей итерации цикла (начинается с 0). |
| $loop->iteration | Текущая итерация цикла (начинается с 1). |
| $loop->remaining | Итерации, оставшиеся в цикле. |
| $loop->count | Общее количество элементов в итерируемом массиве. |
| $loop->first | Первая ли это итерация цикла. |
| $loop->last | Последняя ли это итерация цикла. |
| $loop->even | Четная ли это итерация цикла. |
| $loop->odd | Нечетная ли это итерация цикла. |
| $loop->depth | Уровень вложенности текущего цикла. |
| $loop->parent | Переменная родительского цикла во вложенном цикле. |
Комментарии
Blade также позволяет вам определять комментарии в ваших шаблонах. Однако, в отличие от комментариев HTML, комментарии Blade не будут включены в результирующий HTML, возвращаемый вашим приложением:
Подключение дочерних шаблонов
Хотя вы можете использовать директиву @include , компоненты Blade содержат аналогичный функционал и предлагают несколько преимуществ по сравнению с директивой @include , например привязку данных и атрибутов.
Директива @include Blade позволяет вам включать шаблоны из другого шаблона. Все переменные, доступные для родительского шаблона, будут доступны для включенного шаблона:
Включенный шаблон унаследует все данные, доступные в родительском шаблоне, но вы также можете передать массив дополнительных данных, которые должны быть доступны для включенного шаблона:
Если вы попытаетесь включить несуществующий шаблон, Laravel выдаст ошибку. Если вы хотите включить шаблон, который может присутствовать или отсутствовать, вам следует использовать директиву @includeIf :
Если вы хотите включить шаблон в зависимости от результата логического выражения, возвращающего либо true , либо false , то используйте директивы @includeWhen и @includeUnless :
Чтобы включить первый существующий шаблон из переданного массива шаблонов, вы можете использовать директиву includeFirst :
Вам следует избегать использования в ваших шаблонах Blade констант __DIR__ и __FILE__ , поскольку они будут ссылаться на расположение кешированного, скомпилированного шаблона.
Отрисовка шаблонов с коллекциями
Вы можете cкомбинировать циклы и подключение шаблона в одну строку с помощью директивы Blade @each :
Первый аргумент директивы @each – это шаблон, отображаемый для каждого элемента в массиве или коллекции. Второй аргумент – это массив или коллекция, которую вы хотите перебрать, а третий аргумент – это имя переменной, которая будет присвоена текущей итерации в шаблоне. Так, например, если вы выполняете итерацию по массиву jobs , обычно вам нужно обращаться к каждому элементу как к переменной job в шаблоне. Ключ массива для текущей итерации будет доступен как переменная key в шаблоне.
Вы можете передать четвертый аргумент директиве @each . Этот аргумент определяет шаблон, который будет отображаться, если переданный массив пуст.
Шаблоны, отображаемые с помощью @each , не наследуют переменные родительского шаблона. Если дочернему шаблону требуются эти переменные, вам следует использовать вместо них директивы @foreach и @include .
Директива @once
Директива @once позволяет вам определить часть шаблона, которая будет проанализирована только один раз за цикл визуализации. Это может быть полезно для вставки переданного фрагмента JavaScript в подвал страницы с помощью стеков. Например, если вы отображаете переданный компонент в цикле, то бывает необходимо разместить JavaScript в подвале при визуализации компонента только единожды:
Необработанный PHP
В крайних ситуациях можно встроить PHP-код в ваши шаблоны. Вы можете использовать директиву @php Blade для размещения блока простого PHP в вашем шаблоне:
Компоненты
Компоненты и слоты предоставляют те же преимущества, что и секции, макеты и включение шаблона из другого шаблона; однако, некоторым может быть легче понять мысленную модель компонентов и слотов. Есть два подхода к написанию компонентов: компоненты на основе классов и анонимные компоненты.
Чтобы создать компонент на основе класса, вы можете использовать команду make:component Artisan. Чтобы проиллюстрировать, как использовать компоненты, мы создадим простой компонент Alert . Команда make:component поместит компонент в каталог app/View/Components :
Команда make: component также создаст шаблон для компонента. Шаблон будет помещен в каталог resources/views/components . При написании компонентов для вашего собственного приложения компоненты автоматически обнаруживаются в каталогах app/View/Components и resources/views/components , поэтому дополнительная регистрация компонентов обычно не требуется.
Вы также можете создавать компоненты в подкаталогах:
Приведенная выше команда создаст компонент Input в каталоге App\View\Components\Forms , а шаблон будет помещен в каталог resources/views/components/forms .
Самостоятельная регистрация компонентов пакета
При написании компонентов для вашего собственного приложения компоненты автоматически обнаруживаются в каталогах app/View/Components и resources/views/components .
Однако, если вы создаете пакет, который использует компоненты Blade, вам необходимо вручную зарегистрировать класс компонента и его псевдоним HTML-тега. Вы должны зарегистрировать свои компоненты в методе boot поставщика служб вашего пакета:
После того, как ваш компонент был зарегистрирован, он может быть отображен с использованием псевдонима тега:
Как вариант, вы можете использовать метод componentNamespace для автоматической загрузки классов компонентов по соглашению. Например, пакет Nightshade может иметь компоненты Calendar и ColorPicker , которые находятся в пространстве имен Package\Views\Components :
Это позволит использовать компоненты пакета в пространстве имен их поставщиков, используя синтаксис x-package-name:: :
Blade автоматически обнаружит класс, связанный с этим компонентом, используя «верблюжий регистр» имени компонента. Подкаталоги также поддерживаются с использованием «точечной» нотации.
Отрисовка компонентов
Для отображения компонента вы можете использовать тег компонента Blade в одном из ваших шаблонов Blade. Теги компонентов Blade начинаются со строки x- , за которой следует имя в «шашлычном регистре» класса компонента:
Если класс компонента имеет вложенность в каталоге app/View/Components , то вы можете использовать символ . для обозначения вложенности каталогов. Например, если мы предполагаем, что компонент находится в App\View\Components\Inputs\Button.php , то мы можем отобразить его так:
Передача данных компонентам
Вы можете передавать данные в компоненты Blade, используя атрибуты HTML. Жестко запрограммированные примитивные значения могут быть переданы компоненту с помощью простых строк атрибутов HTML. Выражения и переменные PHP следует передавать компоненту через атрибуты, которые используют символ : в качестве префикса:
Вы должны определить необходимые данные компонента в его конструкторе класса. Все общедоступные свойства компонента будут автоматически доступны в шаблоне компонента. Нет необходимости передавать данные в шаблон из метода render компонента:
Когда ваш компонент визуализируется, вы можете отображать содержимое общедоступных переменных вашего компонента, выводя переменные по имени:
Именование
Аргументы конструктора компонентов следует указывать с помощью camelCase , а при обращении к именам аргументов в ваших атрибутах HTML следует использовать kebab-case . Например, учитывая следующий конструктор компонента:
Аргумент $alertType может быть передан компоненту следующим образом:
Экранирование атрибутов от синтаксического анализа
Поскольку некоторые фреймворки JavaScript, такие как Alpine.js, также используют атрибуты с префиксом двоеточия, вы можете использовать префикс с двойным двоеточием ( :: ), чтобы сообщить Blade, что атрибут не является выражением PHP. Например, учитывая следующий компонент:
Blade отобразит следующий HTML-код:
Методы компонента
В дополнение к общедоступным переменным, доступным для вашего шаблона компонента, могут быть вызваны любые общедоступные методы компонента. Например, представьте компонент, у которого есть метод isSelected :
Вы можете выполнить этот метод из своего шаблона компонента, вызвав переменную, соответствующую имени метода:
Доступ к атрибутам и слотам в классах компонентов
Компоненты Blade также позволяют получить доступ к имени компонента, атрибутам и слоту внутри метода render класса. Однако, чтобы получить доступ к этим данным, вы должны вернуть замыкание из метода render вашего компонента. Замыкание получит массив $data в качестве единственного аргумента. Этот массив будет содержать несколько элементов, предоставляющих информацию о компоненте:
componentName эквивалентно имени, используемому в HTML-теге после префикса x- . Таким образом, componentName компонента будет alert . Элемент attributes будет содержать все атрибуты, которые присутствовали в HTML-теге. Элемент slot – это экземпляр Illuminate\Support\HtmlString с содержимым слота компонента.
Замыкание должно возвращать строку. Если возвращенная строка соответствует существующему шаблону, то этот шаблон будет отрисован; в противном случае возвращенная строка будет оцениваться как встроенный шаблон Blade.
Дополнительные зависимости
Если вашему компоненту требуются зависимости из контейнера служб Laravel, то вы можете указать их перед любыми атрибутами данных компонента, и они будут автоматически внедрены контейнером:
Скрытие атрибутов / методов
Если вы хотите, чтобы некоторые публичные методы или свойства не использовались как переменные в шаблоне компонента, вы можете добавить их в свойство массива $except в вашем компоненте:
Атрибуты компонента
Мы уже рассмотрели, как передавать атрибуты данных в компонент; иногда требуется указать дополнительные атрибуты HTML, такие как class , которые не являются частью данных, необходимых для функционирования компонента. Как правило, вы хотите передать эти дополнительные атрибуты корневому элементу шаблона компонента. Например, представьте, что мы хотим отобразить компонент alert следующим образом:
Все атрибуты, которые не являются частью конструктора компонента, будут автоматически добавлены в «коллекцию атрибутов» компонента. Эта коллекция атрибутов автоматически становится доступной для компонента через переменную $attributes . Все атрибуты могут отображаться в компоненте путем вывода этой переменной:
Использование таких директив, как @env в тегах компонентов в настоящее время не поддерживается. Например, не будет компилироваться.
Атрибуты по умолчанию и слияние атрибутов
Иногда требуется указать значения по умолчанию для атрибутов или добавить дополнительные значения в некоторые атрибуты компонента. Для этого вы можете использовать метод merge коллекции атрибутов. Этот метод особенно полезен для определения набора CSS-классов по умолчанию, которые всегда должны применяться к компоненту:
Окончательный обработанный HTML-код компонента будет выглядеть следующим образом:
Условное слияние классов
По желанию можно объединить классы, если указанное условие истинно. Вы можете сделать это с помощью метода class , который принимает массив классов, где ключ массива содержит класс или классы, которые вы хотите добавить, а значение является логическим выражением. Если элемент массива имеет числовой ключ, то он всегда будет добавлен в конечный список классов:
Если вам нужно объединить другие атрибуты в свой компонент, вы можете связать метод merge с методом class :
Слияние неклассовых атрибутов
При слиянии атрибутов, которые не являются атрибутами класса, значения, предоставленные методу merge , будут считаться значениями атрибута по умолчанию. Однако, в отличие от атрибута class , эти атрибуты не будут объединены с указанными значениями атрибутов. Вместо этого они будут перезаписаны. Например, реализация компонента button может выглядеть следующим образом:
Чтобы отобразить компонент кнопки с настраиваемым type , его можно указать при использовании компонента. Если тип не указан, будет использоваться тип button , определенный по умолчанию:
Обработанный HTML-код компонента button в этом примере будет:
Если вы хотите, чтобы атрибут, отличный от class , имел значение по умолчанию и указанное значение, объединенные вместе, вы можете использовать метод prepends . В этом примере атрибут data-controller всегда будет начинаться с profile-controller , а любые дополнительные указанные значения data-controller будут помещены после этого значения по умолчанию:
Получение и фильтрация атрибутов
Вы можете фильтровать атрибуты, используя метод filter . Этот метод принимает замыкание, которое должно возвращать true , если вы хотите сохранить атрибут в коллекции атрибутов:
Для удобства вы можете использовать метод whereStartsWith для получения всех атрибутов, ключи которых начинаются с указанной строки:
И наоборот, метод whereDoesntStartWith может использоваться для исключения всех атрибутов, ключи которых начинаются с указанной строки:
Используя метод first , вы можете отобразить первый атрибут в указанной коллекции атрибутов:
Если вы хотите проверить, присутствует ли атрибут в компоненте, вы можете использовать метод has . Этот метод принимает имя атрибута в качестве единственного аргумента и возвращает логическое значение, указывающее, присутствует ли атрибут:
Вы можете получить значение конкретного атрибута, используя метод get :
Зарезервированные ключевые слова
По умолчанию некоторые ключевые слова зарезервированы для внутреннего использования Blade при визуализации компонентов. Следующие ключевые слова не могут быть определены как публичные свойства или имена методов в ваших компонентах:
- data
- render
- resolveView
- shouldRender
- view
- withAttributes
- withName
Слоты
Вам часто потребуется передавать дополнительный контент вашему компоненту через «слоты». Слоты компонентов отображаются путем вывода переменной $slot . Чтобы изучить эту концепцию, представим, что компонент alert имеет следующую разметку:
Мы можем передавать контент в slot , вставив контент в компонент:
Иногда компоненту может потребоваться отрисовать несколько разных слотов в разных местах внутри компонента. Давайте модифицируем наш компонент оповещения, чтобы учесть вставку слота title :
Вы можете определить содержимое именованнго слота с помощью тега x-slot . Любой контент, не указанный в явном теге x-slot , будет передан компоненту в переменной $slot :
Слоты с ограниченной областью видимости
Если вы использовали фреймворк JavaScript, такой как Vue, то вы, возможно, знакомы со «слотами с ограниченной областью видимости», которые позволяют получать доступ к данным или методам из компонента в вашем слоте. Вы можете добиться аналогичного поведения в Laravel, определив общедоступные методы или свойства в вашем компоненте и получив доступ к компоненту в вашем слоте через переменную $component . В этом примере мы предположим, что компонент x-alert имеет общедоступный метод formatAlert , определенный в его классе компонента:
Встроенные шаблоны компонентов
Для очень маленьких компонентов может показаться обременительным управлять как классом компонента, так и шаблоном компонента. По этой причине вы можете вернуть разметку компонента прямо из метода render :
Генерация компонентов со встроенными шаблонами
Чтобы создать компонент, который использует встроенный шаблон, вы можете использовать параметр —inline при выполнении команды make:component :
Анонимные компоненты
Подобно встроенным компонентам, анонимные компоненты предоставляют механизм для управления компонентом через один файл. Однако анонимные компоненты используют один файл шаблона, но не имеют связанного с компонентом класса. Чтобы определить анонимный компонент, вам нужно только разместить шаблон Blade в вашем каталоге resources/views/components . Например, если вы определили компонент в resources/views/components/alert.blade.php , вы можете просто отобразить его так:
Вы можете использовать символ . , чтобы указать, вложен ли компонент в каталоге components . Например, если компонент определен в resources/views/components/inputs/button.blade.php , вы можете отобразить его так:
Свойства / атрибуты данных
Поскольку анонимные компоненты не имеют ассоциированного класса, вы можете задаться вопросом, как можно различить, какие данные должны быть переданы компоненту как переменные, а какие атрибуты должны быть помещены в коллекцию атрибутов компонента.
Вы можете указать, какие атрибуты следует рассматривать как переменные данных, используя директиву @props в верхней части шаблона Blade вашего компонента. Все остальные атрибуты компонента будут доступны через коллекцию атрибутов компонента. Если вы хотите присвоить переменной данных значение по умолчанию, вы можете указать имя переменной в качестве ключа массива и значение по умолчанию в качестве значения массива:
Учитывая приведенное выше определение компонента, мы можем отобразить компонент следующим образом:
Динамические компоненты
Иногда требуется визуализировать компонент, но вы не знаете, какой компонент следует визуализировать до времени выполнения. В этой ситуации вы можете использовать встроенный в Laravel компонент dynamic-component для отображения компонента на основе значения или переменной, полученной во время выполнения запроса:
Самостоятельная регистрация компонентов
Следующая документация по самостоятельной регистрации компонентов в первую очередь полезна тем, кто пишет пакеты Laravel, которые включают компоненты. Если вы не пишете пакет, эта часть документации компонента может быть вам не нужна.
При написании компонентов для вашего собственного приложения компоненты автоматически обнаруживаются в каталогах app/View/Components и resources/views/components .
Однако, если вы создаете пакет, который использует компоненты Blade или размещаете компоненты в других каталогах, вам необходимо самостоятельно зарегистрировать класс компонента и его псевдоним HTML-тега, чтобы Laravel знал, где найти компонент. Вы должны зарегистрировать свои компоненты в методе boot поставщика служб вашего пакета:
После того, как ваш компонент был зарегистрирован, он может быть отображен с использованием псевдонима тега:
Автозагрузка компонентов пакета
Как вариант, вы можете использовать метод componentNamespace для автоматической загрузки классов компонентов по соглашению. Например, пакет Nightshade может иметь компоненты Calendar и ColorPicker , которые находятся в пространстве имен Package\Views\Components :
Это позволит использовать компоненты пакета в пространстве имен их поставщиков, используя синтаксис x-package-name:: :
Blade автоматически обнаружит класс, связанный с этим компонентом, используя «верблюжий регистр» имени компонента. Подкаталоги также поддерживаются с использованием «точечной» нотации.
Создание макетов
Макеты с использованием компонентов
Большинство веб-приложений поддерживают одинаковый общий макет на разных страницах. Было бы невероятно громоздко и сложно поддерживать наше приложение, если бы нам приходилось повторять весь HTML-макет в каждом создаваемом экране. К счастью, этот макет удобно определить как один компонент Blade, а затем использовать его во всем приложении.
Определение компонента макета
Например, представьте, что мы создаем приложение со списком задач. Мы могли бы определить компонент layout , который выглядит следующим образом:
Использование компонента макета
Как только компонент layout определен, мы можем создать шаблон Blade, который будет использовать этот компонент. В этом примере мы определим простой шаблон, который отображает наш список задач:
Помните, что содержимое, внедренное в компонент, по умолчанию будет передано переменной $slot компонента layout . Как вы могли заметить, наш layout также учитывает слот $title , если он предусмотрен; в противном случае отображается заголовок по умолчанию. Мы можем добавить другой заголовок из нашего шаблона списка задач, используя стандартный синтаксис слотов, описанный в документации по компонентам:
Теперь, когда мы определили наш макет и шаблоны списка задач, нам просто нужно вернуть представление task из маршрута:
Макеты с использованием наследования шаблонов
Определение макета
Макеты также могут быть созданы с помощью «наследования шаблонов». Это был основной способ создания приложений до появления компонентов.
Для начала рассмотрим простой пример. Сначала мы изучим макет страницы. Поскольку большинство веб-приложений поддерживают одинаковый общий макет на разных страницах, удобно определить этот макет как единый шаблон Blade:
Как видите, этот файл содержит типичную разметку HTML. Однако, обратите внимание на директивы @section и @yield . Директива @ section , как следует из названия, определяет секцию содержимого, тогда как директива @yield используется для отображения содержимого секции, предоставленного дочерним шаблоном.
Теперь, когда мы определили макет для нашего приложения, давайте определим дочернюю страницу, которая наследует макет.
Расширение макета
При определении дочернего шаблона используйте директиву Blade @extends , чтобы указать, какой макет дочерний шаблон должен «наследовать». Шаблоны, расширяющие макет Blade, могут добавлять содержимое в секции макета с помощью директив @section . Помните, как видно из приведенного выше примера, содержимое этих секций будет отображаться в макете с помощью @yield :
В этом примере секция sidebar использует директиву @parent для добавления (а не перезаписи) содержимого к боковой панели макета. Директива @parent будет заменена содержимым макета при визуализации представления.
В отличие от предыдущего примера, нынешняя секция sidebar заканчивается @endsection вместо @show . Директива @endsection будет только определять секцию, в то время как @show будет определять и немедленно дополнять секцию.
Директива @yield также принимает значение по умолчанию в качестве второго параметра. Это значение будет отображено, если дополняемый раздел не определен:
@yield(‘content’, ‘Default content’)
Формы
Поле CSRF
Каждый раз, когда вы определяете HTML-форму в своем приложении, вы должны включать в форму скрытое поле токена CSRF, чтобы посредник защиты от CSRF мог провалидировать запрос. Вы можете использовать директиву @csrf Blade для генерации поля токена:
Поле Method
Поскольку HTML-формы не могут выполнять запросы PUT , PATCH или DELETE , вам нужно будет добавить скрытое поле _method , чтобы подменить эти HTTP-методы. Директива @method Blade поможет создать для вас такое поле:
Ошибки валидации
Директива @error используется для быстрой проверки наличия сообщений об ошибках валидации для конкретного атрибута. В директиве @error вы можете вывести содержимое переменной $message для отображения сообщения об ошибке:
Вы можете передать имя конкретной коллекции ошибок в качестве второго параметра директивы @error для получения сообщений об ошибках валидации на страницах, содержащих несколько форм:
Стеки
Blade позволяет вам добавлять содержимое к именованным стекам, которые можно отобразить где-нибудь еще в другом шаблоне или макете. Это может быть особенно полезно для указания любых библиотек JavaScript, необходимых для ваших дочерних шаблонов:
Вы можете помещать в стек сколько угодно раз. Чтобы отобразить полное содержимое стека, передайте имя стека в директиву @stack :
Если вы хотите добавить содержимое в начало стека, вы должны использовать директиву @prepend :
Внедрение служб
Директива @inject используется для извлечения службы из контейнера служб Laravel. Первый аргумент, переданный в @inject , – это имя переменной, в которую будет помещена служба, а второй аргумент – это имя класса или интерфейса службы, которую вы хотите извлечь:
Расширение Blade
Blade позволяет вам определять ваши собственные пользовательские директивы с помощью метода directive . Когда компилятор Blade встречает вашу директиву, он вызывает указанное замыкание с выражением, содержащимся в директиве.
В следующем примере создается директива @datetime($var) , которая форматирует переданный $var , который должен быть экземпляром DateTime :
Как видите, мы привяжем метод format к любому выражению, переданному в директиву. Итак, в этом примере окончательный PHP, сгенерированный этой директивой, будет:
После обновления логики директивы Blade вам нужно будет удалить все кешированные шаблоны Blade. Кешированные шаблоны Blade могут быть удалены с помощью команды view:clear Artisan.
Пользовательские операторы If
Программирование пользовательской директивы иногда бывает более сложным, чем необходимо при определении простых пользовательских условных операторов. По этой причине Blade содержит метод Blade::if , который позволяет быстро определять пользовательские условные директивы с помощью замыканий. Например, давайте определим условие, которое проверяет настроенный по умолчанию «диск» приложения. Мы можем сделать это в методе boot нашего AppServiceProvider :
После того, как пользовательское условие было определено, вы можете использовать его в своих шаблонах:
Источник